React CMS

React Bricks is the CMS for React

Unlike the headless CMS who claim to be "the perfect CMS for React", but they are really just APIs with no connection with the front-end technology, React Bricks is created from the ground up in React with TypeScript and meant to be used with React.

React Bricks infact is both a React library (to create your content blocks as React components and edit content) and a SaaS where the content is persisted.

Structure of a React Bricks app

A React Bricks application (for example created with Next.js or Gatbsy) 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.

How can I learn how to use it?

There are many ways to learn React Bricks. We suggest you to start with the Tutorial.

Step-by-step Tutorial 🧙‍♂️

The Tutorial will guide you step-by-step in the set up of a new React Bricks App, the creation of content blocks and the deployment in production.

You gain points as you proceed and as you correctly answer the question at the end of each section... with a final surprise!

Go to the Step by step Tutorial

Documentation 👩🏽‍🔬

Since React Bricks is very flexible, when you need to find how to do something, the Documentation comes in handy. It is very complete and with a powerful search.

Go to the Documentation

Videos 🍿

We are preparing a video introduction and a set of "how to" videos. Stay tuned!