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

While Plasmic is primarily a “no code” tool designed for editors or startups without development skills, React Bricks is intended to be configured by developers. Developers can 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 freely use them to build pages with an intuitive visual editing interface.

Plasmic is more comprehensive for non-developers or no-code freelancers, while 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 allows editors to easily tweak styles such as margins and paddings. This is beneficial for a no-code oriented tool that empowers content editors to modify styles, potentially breaking the design.

The React Bricks editor is also very user-friendly with inline visual editing. However, for sidebar controls, it only allows the controls defined by developers, with types and values also defined by developers. This ensures that content editors can freely create content without breaking the design system. It optimizes the content editors' time by allowing them to focus on content creation rather than learning a tool.

Both Plasmic and React Bricks offer pre-made content blocks. Plasmic uses these blocks as default options for editors, while React Bricks provides them as a playground or for small landing page projects. The intention with React Bricks is for these pre-made blocks to be replaced by your own components, allowing you to achieve a custom pixel-perfect corporate image.

In React Bricks, you have the added benefit of a preview image for custom components, making the selection process more intuitive.

Experience for Developers

With Plasmic, customizing content blocks can be complex. To begin, you need to register the components with Plasmic, which will sync the component code and metadata to the Plasmic server. This allows you to edit them in the Plasmic Studio. However, the styles are not synced and will remain in your project. Therefore, if you are using custom styles or a CSS framework like Tailwind, you will need to have the localhost project running, so that the Plasmic Studio can access them.

On the other hand, with React Bricks, you host the Admin interface together with the frontend website, making it much easier. The React Bricks servers never see your code. Simply add your component to the frontend project, and the Admin interface can immediately access them, using your website's styles.

Media Management

With Plasmic, you have a simple upload interface that does not allow for cropping or transforming images.

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.

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.

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.

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.

Enterprise features

React Bricks is a world-class enterprise CMS, with advanced features like:

- Ability to use inside Bricks content from external data sources, as an headless e-commerce like Shopify or Swell - Lock of the page structure or editing at page or block level - Flexible custom roles - Change history to go back in time - Self backup and restore - Single Sign On - Advanced Digital Assets Management - Advanced SEO with complete implementation of [Schema.org](http://Schema.org) fields - Multiple content Environments - Event logging to an external API

Pricing

Both Plasmic and React Bricks offer self-service plans and enterprise plans with more advanced features. It's important to note that Plasmic uses frontend website page views as a parameter to determine the appropriate plan for your site. In contrast, React Bricks does not count frontend page views. Since you host the frontend yourself, the traffic your website receives, especially if it's statically generated, does not affect our pricing.

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 is the recommended choice. However, if you're a developer seeking a highly customizable platform based on React for corporate customers, React Bricks is a better option.

Choose the platform that best aligns with your needs, skill set, and project requirements!

Why choose React Bricks?

Here are some reasons why React Bricks is the best alternative to Plasmic:

• More flexible: Creating a design system based on React components is easy and time saving for Developers
• Easier to use:The visual editing interface is very user-friendly for content editors, who are autonomous. If they can use Word, they can use React Bricks!
• Enterprise-ready: React Bricks has all the enterprise features you need, out of the box.

Sounds interesting?