React Bricks vs Prismic

Introduction

Choosing the right tool for managing your website's content can take time and effort, like finding your way through a maze. But what if you could find a perfect match that works well with the technology you're using and lets your editor be completely autonomous?

If you love React and want control over the look and feel of your site, you should know about React Bricks and Prismic. These two options provide exciting features that may be exactly what you're looking for.

Visual editor

React Bricks offers an inline visual editor that simplifies the editing and management of content directly on the page. Currently, Prismic does not have a visual editor.

However, in the spirit of transparency, Prismic is also working on integrating some form of visual editing (likely using sidebar forms). They have an alpha version of this feature, but it has yet to be publicly available. In contrast, React Bricks was born to have the best visual editor on the market.

Customizability

React Bricks offers high customizability by allowing developers to create their own "bricks," visually editable content blocks. You can preview these bricks directly in the admin interface of React Bricks, either in the Playground or the Editor.

Bricks are React components that use the `react-bricks` library. This library exports visual components that enable visual editing in your JSX. Additionally, by defining a `schema` property, you can create sidebar controls for elements that are not directly editable, such as the background color. You can customize these controls based on your design system, specifying the allowed values (for example white or gray background).

Prismic also allows you to use React components, but you must register in their "Slice Machine", a separate project developers use. These React components are not visually editable, but you can map the component's props to fields in the headless CMS. This synchronization is achieved through the Slice Machine.

Editor interface

React Bricks is designed to provide a visual editing experience, making it simple for non-developers to create and update content. You can host the editing interface, along with the frontend website, wherever you prefer. On the other hand, Prismic offers a more traditional CMS interface called the Prismic Dashboard, which Prismic hosts. It allows you to manage content using forms and fields.

Developers interface

As mentioned earlier, when using Prismic, developers must use the Slice machine, a separate project used to create React components and map the props to the "gray forms" of the headless CMS dashboard.

With React Bricks, you only need one project to manage (whether it's Next.js, Gatsby, or Remix), making it much simpler. You add your custom visually editable components to the website code and enjoy true inline visual editing. It's easy and eliminates the hassle of managing two different platforms.

Pricing

React Bricks offers a free starting option and then transitions to $99/month. Similarly, Prismic begins with a free option and then increases to $100/month. However, Prismic also provides a free tier for small teams, although they charge per repository and user. In contrast, React Bricks includes up to 5 users with their Entry plan, making it a more cost-effective platform.

Multiple environments

Both React Bricks and Prismic support multiple content environments. However, Prismic's enterprise plan limits you to creating at most two environments: a production branch and a copy of it. On the other hand, React Bricks does not have this limitation and allows you to create multiple environments as needed. This can be useful to allow developers to experiment with content without affecting the staging or production environments.

Media library

Prismic has a basic media library.

React Bricks offers a comprehensive Digital Asset Management (DAM) system. In addition to basic features like cropping, rotating, and flipping images, it also provides advanced options such as specifying the image source or copyright information. This functionality is designed to meet the requirements of corporate customers.

With React Bricks, you can reuse a cropped version of an image already used on a page. Furthermore, you can enlarge the cropped area by re-cropping the image, as React Bricks references the original image.

Scheduled Publishing

Both Prismic and React Bricks offer the feature of scheduling publishing in the future. In addition, React Bricks will trigger your build hook when scheduled publishing occurs, ensuring that the new content is immediately added to the production website.

Collaboration

We could not find any documentation on how Prismic handles two users attempting to edit the same piece of content simultaneously. Once we obtain this information, we will add it to the article.

React Bricks provides real-time user presence and manages collaboration through a pessimistic lock system. When a user starts editing a page, it is locked to prevent other users from editing it. The page is unlocked when the user saves their changes or navigates away from the page. Additionally, there is an option for another user to force the release of the page.

Advanced SEO

With Prismic, you have basic SEO support out of the box (title and description metadata). However, you will need to create custom fields to manage all the necessary SEO fields.

Starting from version 4, React Bricks offers an integrated Advanced SEO interface (available on Enterprise plans). This interface allows you to manage meta fields, Open Graph, Twitter fields, and all the schemas defined by [Schema.org](http://schema.org/). Whether you want to create a recipe or any other type of content, React Bricks provides all the necessary fields.

Approval workflow

React Bricks will introduce a flexible approval workflow system in v4. The workflow will consist of the following stages (configurable): Working copy ⇒ Ready to be published ⇒ Approved ⇒ Published.

Prismic follows a Draft ⇒ Saved ⇒ Published workflow, where only Publishers, Administrators, and Repository Owners can publish content. Prismic also has the concept of "Release", which allows you to group changes to documents into "releases" and then release them in production.

External data

React Bricks offers the "External data" feature, which allows you to incorporate data from external sources (such as a headless eCommerce) into your bricks. This means your editor can view and manage content blocks with external data within the same interface for composing pages. The external data is fetched at build time or on the server side, ensuring complete SEO-friendliness.

With Prismic, you can call external APIs in the server portion of your project. However, you must handle this integration yourself, as Prismic does not provide a visual editor for this purpose.

Entities

In Prismic, you can model entities just like any other headless CMS.

React Bricks has the concept of Page as a first citizen, as it is straightforward to grasp for content editors. However, to manage entities across pages, React Bricks introduces the concept of "Entity." This is particularly useful for visually editing shared components, such as the Header and Footer, used on multiple pages. Another use case is maintaining a single source of truth for a Call to Action (CTA), ensuring that changes made in one place are reflected everywhere it is used.

Conclusion

The choice between React Bricks and Prismic depends on your project's specific needs and the technology stack you're comfortable with. If you're a React enthusiast aiming to create a customized and visually appealing user experience, React Bricks provides unparalleled customization and control. It's like having a set of building blocks specifically designed for your project, enabling developers and non-developers to construct a unique digital experience effortlessly. Additionally, React Bricks supports enterprise use cases and is already powering the websites of banks in Italy and France and companies like [Deel.com](http://deel.com/) and The Weather Channel.

If you're looking for a general-purpose, technology-agnostic CMS with multi-platform capabilities and don’t prioritize ease of use for content editors, consider Prismic.

If you're working in the React ecosystem and want the flexibility to customize your components while providing a user-friendly interface for content creators, consider the unique capabilities of React Bricks. It can be the ideal tool to bring your vision to life.

Sounds interesting?