The best CMS for Gatsby with visual editing

Gatsby is a great framework to generate a blazing fast static website using a headless CMS like headless WordPress or Contentful.

Many web agencies are switching from a monolithic CMS like Wordpress or Drupal to a solution based on a headless CMS and a React front-end based on Gatsby.

Getting started with Gatsby

Creating a Gatsby website with React Bricks is a matter of minutes: you just need a free account and you can launch npx create-reactbricks-app

From the React Bricks CLI you can choose one of the 2 Gatsby starters:

  • Website with Tailwind CSS (with also some pre-made content blocks)
  • Empty project

Benefits of React Bricks over a headless CMS

1. Direct Visual editing

A direct visual editing experience like Elementor, but on a fast React frontend. Your content creators are productive as if they were using Word or Pages and they have no way to break the design system.

All the freedom Content creators want; no more than they need.

2. No context switching - It's just React!

With React Bricks you don't have to access a headless CMS to create fields and then come back to code to get the data and use it. You define your fields as props of your React components.

The props that are visually editable are managed by React Bricks visual components; the other props are mapped to sidebar controls. Easy and powerful.

3. No framework lock-in

Your site is framework-independent: you could switch from Gatsby to Next.js or viceversa in a matter of minutes, just setting up a new starter connected to the same React Bricks app.
No need to change from a GraphQL connector to direct REST API calls, no change of "Image" component (in your bricks you don't use the Gatsby or Next "Image" component, but the one from React Bricks, which is cross-platform).

4. No need to train your users

A headless CMS can be a complex beast for Content creators. They are not DB admins. With React Bricks they feel at home from the first minute. They are happy and don't need to ask you, so you save time.

Why React Bricks is the best CMS for Gatsby.js?

React Bricks is great for developers, because you define the content blocks using React components. Each content block React component has also a "schema" static property that defines how props like the background color are edited via sidebar controls, validation rules etc.

In the JSX you can use the React Bricks library visual editing components, like Text, RichText, Image, Repeater, to have a visual editing experience like the one you can have with Wix, but with your own design system (so that you make your customers or marketing team happy, too).