The best visual headless CMS for Developers

1. CMS for React

React Bricks stands as the first CMS born for React. Although it's a headless CMS with decoupled APIs, its power lies in the React library. This library allows developers to create reusable visually editable content blocks as React components.

It's Just React^TM

In a purely headless CMS, developers are required to constantly switch between the hosted CMS interface, which is used to define data architecture, and their IDE, which is used to fetch and render the data on the frontend.

However, with React Bricks, developers can remain within their code editor. Content blocks are simply React components. Developers can determine what is directly editable, such as text or images, by using Visual components like Text, RichText, Image, Repeater in the component's JSX.

For elements that aren't directly editable, such as a background color, developers can define controls in the component's schema property. These controls can then be used by editors from a sidebar to make the necessary changes.

TypeScript typings

The React Bricks library is crafted in TypeScript. Typings are not an afterthought. You'll find effective types everywhere and autocomplete on your IDE for seamless development.

React Starter Projects

You can set up a project in 1 minute, using the React Bricks CLI command:

From the CLI interface, you'll be able to choose your preferred framework:

• Next.js with App Router (with Server Components)
• Next.js with Pages Router
• Remix
• Gatsby

You'll also have the option to choose the type of project you'd like to set up, such as a website and blog with Tailwind CSS, or an empty project.

Once the CLI has scaffolded the project for you, you can start creating your custom React components to prepare the visually editable content blocks which content editors will use to compose the pages.

Great docs and learning material

The Documentation is very complete, we have a great step-by-step Tutorial with gamification and video workshops.

2. Make the Marketing team autonomous

Once developers have created all the necessary bricks, their involvement is no longer required. as content creators can independently compose pages using these content blocks.

At the same time, you can rest assured that content editors cannot compromise the design. This is because developers define exactly what content editors can alter: you'll never discover green Comic Sans text on a red background or a large table that breaks the responsive design!

Moreover, the marketing team has access to the best visual editing interface on the market, complete with a powerful Digital Asset Management system, advanced SEO, and more.

3. Flexibility

Choose your preferred React and CSS frameworks

React Bricks is compatible with all the major React frameworks, such as Next.js, Remix, and Gatsby. It also supports Server Components for optimal performance.

React Bricks is CSS-agnostic, allowing you to utilize any CSS or CSS-in-JS framework.

Choose your Hosting Service

You have the freedom to host the frontend and the admin interface wherever you prefer, be it Vercel, Netlify, Azure, AWS, or any other platform of your choice.

React Bricks does not include any page view tracking system, as we don't page views don't impact our pricing and we value your privacy.

Integration with external APIs

React Bricks enables the fetching of data from external APIs within your bricks. This data retrieval is managed on the Node.js side, occurring either during the build phase for static site generation (SSG) or the rendering phase for server-side rendering (SSR). This approach ensures that external data is incorporated into the server-generated page and is visible to search engines.

This feature is particularly useful for e-commerce websites. You can integrate data from a headless commerce system with content edited visually. For instance, consider a Product Details Page where the product data and price are sourced from the e-commerce system, while the product landing page with features and images is created visually.

Customize everything

React Bricks provides a high degree of customization. You can create can create custom components for the sidebar controls, such as a custom color picker or a small map to pick latitude and longitude.

The flexibility extends to the visual components as well. You can create Custom RichText plugins with their own icons, rendering functions, and custom popup interfaces for setting plugin attributes.

Even the login interface and the Admin top menu can be customized.

4. Batteries included

React Bricks is a comprehensive CMS for content editors, too. It comes with built-in features such as:

• Localization
• Scheduled Publishing
• Advanced Digital Asset Management (DAM)
• Advanced SEO with Schema.org
• Collaboration
• Image optimization

5. Enterprise-grade

Enterprise customers around the globe use React Bricks, appreciating its advanced features, such as:

• Content versioning and Change history to go back in time
• Approval workflows
• Custom Roles
• Single sign-on (SSO)
• Ability to have a custom CDN domain
• Multiple environments
• Fine-grained Permissions
• Scheduled backup on your S3 bucket
• Ability to self-host the backend when needed