The React CMS

React Bricks is the first CMS for React, where you create your content blocks as React components.

The real CMS for React

React Bricks is a CMS, but it is also a React library that you use to define your visually editable content blocks as React components.

If you already have a Next.js or Gatsby website with React components defining a design system, you can easily turn them into visually editable content blocks for React Bricks.

Never leave your code editor

You don't have to go back and forth between the headless CMS to set up fields and the frontend where you query and use them.

You define your fields in React as props of your components, never leaving your code editor.

Structure of an app

A React Bricks application (for example created with Next.js, Gatsby or Remix) is composed of:

• The Admin section which uses React Bricks Admin components (Editor, Playground, AppSettings)
• The Pages which use the Viewer component from React Bricks
• The Bricks, visually editable content blocks

What are Bricks?

The bricks are React components that make up your design sytem. You create them in code, using the React Bricks library and your content creators use them to compose content.

For visually editable props like text and images, you just useReact Bricks visual components inside of your JSX code.

For other props, like a background color you map your props to sidebar controls, using the brick's schema.

What you see is what you get

Your component with the visual editing "magic" added by the React Bricks library makes content editing as easy as writing on a Page or Word document.

React Bricks is very flexible

Almost everything in React Bricks is fully customizable.

For example, you can provide your own React components as sidebar controls, you can have custom fields on pages, you can use external content from a headless CMS or an e-commerce system, you can access everything in your content blocks via React hooks.

You can use any React framework (Next.js, Gatsby, Remix) and any CSS library: make it your own!