React Bricks vs Prismic
Introduction
Choosing the right tool to manage your website's content can feel like navigating a maze. But what if there was a perfect match that synergizes with your technology and empowers your editor?
If you're a React developer and want control over the look and feel of your site, you should know about React Bricks and Prismic. Both are headless CMSs with visual editing, but their significant differences need to be understood before making a decision. In this document, we'll highlight these essential differences.
Visual editor
Prismic allows editors to make changes using form fields within the page layout, and provides a real-time preview of these changes in a sidebar where content blocks are displayed.
React Bricks, on the other hand, offers inline visual editing. This feature enables users to directly edit text and images inline, similar to using a word processor or a website builder like Wix. This approach is more intuitive for content editors, as it eliminates the need to write in one place and see the results in another, thus enabling the marketing team to make changes quickly and efficiently.
While Prismic has recently added the visual preview feature to keep up with current trends, React Bricks has been a pioneer in true inline visual editing since 2019 and continues to lead in this area.
Custom React content blocks
In Prismic, developers must set up a new project, the "Slice Machine", to create custom content blocks. Here, they create React components and register them to synchronize with the Prismic backend.
However, in React Bricks, there's no need for a new project. You create content blocks as React components directly in your frontend project, whether it's Next.js, Remix, or Gatsby.
React Bricks makes it easy to use components from your design system. Just add React Bricks visual editing components like Text, Image, or Repeater to your components' JSX code to enable inline visual editing. Then, add aschema property to your component to enable editing of props via sidebar controls for what's not directly editable (for example the background color).
Your bricks' code is never synchronized with the React Bricks backend. Instead, it remains solely in your repository. You simply set your bricks in the React Bricks configuration on the frontend website, allowing the library to match the JSON content from the React Bricks APIs with your React components to render the pages correctly.
Media library (DAM)
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.
With React Bricks DAM editors can:
- Search assets by keywords
- Organize images and files in Folders
- Filter images by used or unused
- For each image, view and modify data like title, description, SEO friendly name, source, copyright
- For each image, see the original source (full width, not cropped or rotated) and all the references in Pages
- Before using an image, apply crop, rotation, flip.
- Manage the trash bin
The React Bricks library's Image component will serve the best image based on the screen resolution and the browser capabilities (native lazy loading, WebP support, JavaScript enabled, etc.).
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 other SEO fields.
React Bricks offers an advanced SEO module that guides editors towards best-practice optimization. The SEO interface allows editors to manage meta fields, Open Graph data, Twitter Cards data, and all the semantic data defined by Schema.org, fully supporting over 14 schema types, among which Article, Product, Event, How to, ecc.
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 page.
React Bricks provides real-time user presence and manages collaboration through a pessimistic lock system to prevent conflicts when multiple users edit the same page at the same time. 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.
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.
Approval workflow
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.
React Bricks has a flexible approval workflow system. The workflow will consist of the following stages: Published ⇒ Working copy ⇒ Approval requested ⇒ Approval ⇒ Published. You can configure the workflow phases and use fine-grained permissions and page types to allow users to edit or approve groups of pages.
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.
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.
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.
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 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.