React Bricks vs Headless CMS

Isn’t React Bricks a headless CMS, too?

React Bricks is a headless CMS because it provides HTTP APIs as as a service decoupled from the frontend created through a React framework like Next.js, Astro, Remix, or Gatsby.

However, it has two unique features:

• An accompanying React library: the library is used to create your React content blocks (”bricks”). The library interfaces with the React Bricks APIs to render the appropriate components, feeding them the JSON content from the APIs as props.
• A self-hosted Admin interface: the admin interface is hosted by the user alongside the frontend website.

These features set it apart, enabling a unique inline visual editing experience that cannot be replicated with a standard headless CMS.

What is a Headless CMS?

Once, all web applications were monoliths, managing both the backend (handling data retrieval and storage) and the frontend (the presentation of data). This included Content Management Systems (CMS) like Wordpress and Drupal, which were also monolithic.

However, the advent of REST APIs prompted a shift towards separating backend APIs, running on a server, from frontend websites, built with JavaScript and running on the client. This evolution transformed many CMSs into headless systems, providing only the backend HTTP APIs for data management. These headless CMSs also offer an admin interface to edit the data.

The frontend website simply calls these APIs, either at build time for static site generators (SSG) or at runtime for server-side rendering (SSR).

A distinctive characteristic of headless CMSs is that they don't dictate how the content will be presented on the frontend, as they just don’t care about the presentation layer. Consequently, visual editing, as seen in monolithic CMSs like WordPress, is no longer available. This means we've traded direct visual editing for gray forms with pure headless CMSs.

What is visual editing?

Visual editing is the direct manipulation of text and images, similar to what you do in word processors such as Word or Pages. It involves clicking on the text to write, or clicking on an image to select the source, with immediate visual feedback.

Visual editing provides a superior user experience for content creators because they can see how the content looks as they create it.

To bridge this gap, modern headless CMSs offer an "instant" preview feature. You edit the content in a form on a sidebar, and after a brief delay (for server save roundtrip and re-rendering), you see the result on the page.

However, this approach doesn’t match direct visual editing. Editing content in one area and checking the result in another leads to a higher cognitive load.

While developers may be accustomed to this process - editing code in an IDE and seeing the result in a browser - content creators are more familiar with the straightforward experience of word processors like Word or Pages, where you simply click on the text you want to change and start typing.

Why React Bricks?

React Bricks combines the advantages of a headless CMS for developers and a visual editing tool like a page builder for the content editors, improving on both.

Advantages for developers

• Make the marketing team autonomous
• Use a modern React framework
• Fully typed in TypeScript
• Save time: it's just React, no need to switch context between the headless CMS interface and your code
• No hassles to manage a backend infrastructure
• Built-in Image optimization and serving from a global CDN
• Scaffold a project in 1 minute with the CLI
• Great learning material and docs

Advantages for content editors

• Best in class visual editing experience
• No need for training, because the interface is very intuitive
• Compose pages freely using pre-built component which implement the corporate design system

Advantages for corporates

• The design is always adherent to the corporate image guidelines
• The right level of freedom for content editors: they are autonomous, but they cannot break the design system
• Developers save a lot of time, as they leverage React and the marketing team is autonomous
• The marketing team saves a lot of time
• A happy team creates better content