Log in
FeaturesLearnDemoBlogPricingDocs

React CMS with visual editing

React Bricks is the first CMS born for React.

In React Bricks CMS you define your content blocks as React components (using the react-bricks library) and you get visual editing for free.

React Bricks infact is both a React library to create your content blocks (=> pure fun) and a SaaS where the content is persisted (=> no hassles).

Structure of a React Bricks app

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

  • An Admin section which uses React Bricks Admin components (Editor, Playground, AppSettings)
  • The Pages which use the Viewer component from React Bricks
  • A set of shared content blocks that we call "bricks"

This front-end application talks with React Bricks APIs to persist and retrieve the content and to process images which are optimized for responsive view and blur-up lazy loading and served from a fast global CDN.

Schema of a React Bricks application with React CMS blocks

What are the bricks?

The bricks are your content blocks, the different Lego bricks that your content editors may use to compose the pages.

They are just React components which import React Bricks' special visual editing componentds and render them in the returned JSX.

Another peculiarity is that they must have a "schema" static property which defines the brick name, label, default values, which props can be edited via sidebar controls (and with which type of control), eventual repeating nested items, etc.

React Bricks is very flexible

Flexible architecture

Almost everything in React Bricks is customizable.

For example, you can provide your own components as sidebar controls (want a custom color picker? great!), you can create your own visual editing components, you can have custom fields on pages, you can access everything in your content blocks via hooks, you can configure from the logo to the responsive breakpoints, or use any React framework, any router, and so on...

Any CSS you like

React Bricks works with any CSS framework and any CSS-in-js library that our customers tried so far.

It's Just ReactTM

With React Bricks you don't have to go back and forth between the headless CMS where you set up fields, queries to fetch those fields and the React frontend where you finally use them.

You define your fields as props of your component, never leaving your code editor with your React project.

Learn it now