March Free Workshops: Astro by Elian Van Cutsem March 28th | React Bricks by Matteo Frana April 3rd
Live Demo 🔥
Comparisons

React Bricks vs Plasmic

Introduction

This article offers a detailed comparison of Plasmic and React Bricks, two widely-used content management systems with visual editing capabilities. It will help you decide which tool is best suited for your requirements.

Content Management Vision

Plasmic is primarily a "no code" tool designed for editors and startups without development skills. Anyway, it can be expanded with custom content blocks.

React Bricks is designed to be set up by developers. They create a design system using visually editable "Lego" bricks of content, which are implemented as React components. Once the bricks are created, content editors can use them to build pages with an intuitive visual editing interface.

React Bricks targets tech startups, corporates and especially enterprises. It powers the websites of large banks in Italy and France, as well as companies like Deel and The Weather Channel.

Visual editing

The Plasmic editor enables users to adjust styles like margins and paddings with ease. This is beneficial for a no-code oriented tool that empowers content editors to modify styles. However, this freedom could potentially disrupt the design.

React Bricks editor is also user-friendly, providing inline visual editing. Unlike Plasmic, the sidebar controls are defined by developers, including their types and values. This ensures that content editors can create content without compromising the corporate identity. By focusing on content creation, it optimizes editors' time rather than having them learn a new tool.

Both Plasmic and React Bricks offer pre-made content blocks. While Plasmic uses these blocks as default options, React Bricks employs them as just as a playground or for small landing page projects. React Bricks encourages the use of custom components to replace these pre-made blocks, enabling a custom, pixel-perfect corporate image.

Developer Experience

Customizing content blocks with Plasmic can be somewhat complex. Developers need to register the components with Plasmic, syncing the component code and metadata to the Plasmic server. This enables you to edit them in the Plasmic Studio. However, the styles aren't synced and will stay in your project. So, if you're using custom styles or a CSS framework like Tailwind, you need to keep the localhost project running for the Plasmic Studio to access them.

React Bricks simplifies this process. You host the Admin interface alongside the frontend website. Your bricks' code is never synchronized with the React Bricks backend. Instead, it remains private in your repository. You simply set your bricks in the React Bricks configuration on the frontend website, and the Admin interface can instantly access them, using your website's styles. The library matches the JSON content from the React Bricks APIs with your React components to render the pages correctly.

Media Management (DAM)

With Plasmic, you have a simple upload interface that does not allow for cropping or transforming images. What's more there isn't an interface to easily organize media assets.

React Bricks has an enterprise-grade Digital Asset Manager (DAM) to organize your assets and transform them (crop, flip, rotate) before using them in pages.

You can also reuse a cropped version of an image that has already been used on a page. Since React Bricks references the original image, you can also enlarge the cropped area by re-cropping the image. Moreover, React Bricks provides advanced fields such as image source and copyright information to fulfill the requirements of corporate customers. React Bricks optimizes images at upload time, creating all the responsive versions and serving them from a global CDN.

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.).

Nesting blocks

Plasmic has the concept of Slots. By including a slot in your component, you enable the insertion of any other component into the slot, similar to how children work in React. This is coherent with the no-code vocation of Plasmic.

On the other hand, React Bricks provides an explicit Repeater component where you can specify the exact types of bricks that can be repeated within it. For instance, in a customers' gallery, you can restrict editors to only repeat CustomerLogo bricks. This level of control allows for precise implementation of the design system.

Localization

Both React Bricks and Plasmic have the Localization feature to translate content into different languages. However, Plasmic only provides Localization on Enterprise plans, whereas React Bricks includes it in the free Community version as well.

Collaboration

Both Plasmic and React Bricks have the collaboration feature, to allow the editing of content by multiple users at the same time.

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.

Entities

React Bricks offers several ways to reuse content across pages, with one of them being Entities. Entities are similar to Pages, but they are not intended to be directly used as routes on your frontend website. For each entity type, you can define any number of custom fields, and you can also visually edit these custom fields by binding Visual components like Text, RichText, and Image to them.

This feature can be particularly useful for visually managing the Header and Footer (which can be rendered on pages via PageViewers), as well as managing the content of a Call To Action (CTA) that you may want to embed into multiple pages using Embed blocks.

Stories

In React Bricks, there is a concept called "story". A story is a set of component props that are saved with a name, allowing them to be reused in other places. This is different from Embeds or Entities rendered via PageViewer, as the Story feature acts like a "cookie cutter". When you reuse the props content in a new block, the content becomes independent from the original source.

Enterprise features

React Bricks offers enterprise-grade features to meet the needs of our enterprise customers, which include:

Conclusion

Both Plasmic and React Bricks offer powerful features for web development, but they cater to different audiences. Plasmic targets non-developers, as it is harder to customize.

On the other hand, React Bricks is better suited for corporate environments with React-skilled developers. It offers superior customization and integration options. Once developers define the content blocks as React components, the marketing team can freely use the great visual interface without compromising the design.

If you're an individual or small startup looking for an easy-to-use, drag-and-drop solution, Plasmic may be the recommended choice. However, for corporates or enterprises seeking a highly customizable platform based on React with a top-notch editing interface, React Bricks would be a more suitable option.

We recommend trying both platforms with a demo project to understand the developer and content editor experiences before making your final decision.

Ready to start building?
Request demoGet started