The best visual headless React CMS

The headless CMS for React

React Bricks is a headless CMS, but its power lies in the React library that developers use to define visually editable content blocks as React components. If you have an existing React-based design system, you can easily turn it into visually editable content blocks for React Bricks.

It’s Just React

Developers no longer need to switch back and forth between a headless CMS for field setup and a code editor for retrieval and rendering.

The fields for each content block (brick) are directly defined in the React code and are fully typed with TypeScript. This is what makes React Bricks a true visual headless CMS designed for React.

Using the CLI, you can scaffold a Next.js, Astro, Remix, or Gatsby project in just one minute.

Lego Bricks of Content

Bricks are React components created by developers using the React Bricks library, which enables visual editing. Content editors use these bricks to compose page content.

• For visually editable properties such as text and images, developers incorporate the React Bricks visual components within the component's JSX code.
• For other properties, like background color, developers can define sidebar controls. The values of these controls map to the brick's properties.

Structure of an app

A React Bricks application, being it a Next.js, Remix, or Gatsby project, consists of:

• Content Editing Admin section, which uses the React Bricks Admin components such as the Editor, Playground, and AppSettings.
• Content Pages that typically catch all slugs and include the Viewer component from React Bricks which renders the page content.
• Bricks are reusable, custom content blocks with visual editing capabilities. Implemented as React components, bricks implement the corporate design system and enforce the brand identity.

The code for an app resides in your repository, and we never have access to your code.

The React Bricks library, operating within your project, fetches the JSON content for each page from the React Bricks APIs. Each page's content consists of an array of blocks, each with their type and properties. The library renders the appropriate React component for each content block, providing it with all the required properties from the APIs.

Performance

React Bricks is highly optimized. The code related to visual editing is never included in the front-end bundle. Therefore, React Bricks has minimal or no impact on the native performance of the underlying React frameworks, whether it's Next.js, Remix, or Gatsby.

For enhanced performance, React Bricks was the first visual headless CMS to support React Server Components with the Next.js App Router.

Flexibility

React Bricks is designed to provide developers with flexibility.

For example, you can create custom sidebar controls, develop custom rich-text plugins, define custom fields on pages, and use content from external APIs. It also allows you to use any CSS framework and host the front-end website wherever you prefer.

You can have a custom CDN domain for assets, customize user roles, and more. Learn more about React Bricks flexibility.

The Best CMS for React Developers

React Bricks stands out as the top CMS for React Developers . It leverages React and TypeScript expertise, it makes content editors autonomous, and offers excellent learning resources. It is easy to start using the CLI and offers great flexibility.

For content editors, it provides all necessary features such as Localization, Scheduled Publishing, Digital Asset Management, SEO, Collaboration, Image Optimization, and more.

As an enterprise-grade solution, it includes Content Versioning, Approval Workflows, Custom Roles, Single Sign-On (SSO), Multiple Environments, Fine-Grained Permissions, Scheduled Backups, and the ability to self-host the backend.