The best visual headless React CMS

The headless CMS for React

React Bricks is not just a headless CMS with a React frontend. Its core advantage is the React library developers use to define visually editable content blocks directly in code.

If you already have a React-based design system, you can turn those patterns into visually editable bricks instead of rebuilding them in a separate CMS model.

It’s Just React

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

The editable fields for each brick are defined directly in the React code and fully typed with TypeScript. That is what makes React Bricks a true visual headless CMS designed for React teams.

Using the CLI, you can scaffold a Next.js or Astro project quickly and connect it to React Bricks with the core pieces already in place.

Bricks are the building blocks 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.

How a React Bricks app is structured

A React Bricks application typically consists of:

• A content editing admin area, built with React Bricks admin components such as the Editor, Playground, and AppSettings.
• Content pages that render page data using the Viewer component from React Bricks.
• Bricks, which are reusable React components with visual editing capabilities that implement your design system.

Your application code lives in your repository, and React Bricks does not require access to your frontend source 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 block, passing in the properties returned by the APIs.

Performance

React Bricks is highly optimized. The code related to visual editing is never included in the frontend bundle. That means React Bricks has minimal impact on the native performance of the underlying framework, whether you are using Next.js or Astro.

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 give developers real flexibility.

You can create custom sidebar controls, develop custom rich-text plugins, define custom page fields, and use content from external APIs. You can also use any CSS framework and host the frontend wherever you prefer.

You can configure a custom CDN domain for assets, customize user roles, and extend the editing experience to fit your project. Learn more about React Bricks flexibility.

Learn React Bricks

Want to go deeper? React Bricks includes learning resources for developers at every stage, from first setup to advanced custom bricks and production workflows.

• Learn: the main hub for developer onboarding and learning paths.
• Interactive tutorial: build a real project step by step and learn the core concepts hands-on.
• How-tos: practical guides for specific implementation tasks.
• Latest workshop video: a practical walkthrough of React Bricks in action.
• Support: get help when you need answers on implementation or architecture.