React Bricks vs Tina CMS

Introduction

Both Tina CMS and React Bricks are great headless CMSs with visual editing, based on React. They both aim to be developer-friendly and easy to use for content editors.

However, they differ in many aspects. Let's delve into the details to see what they are!

Visual editing

TinaCMS has a feature called "contextual editing" which allows editors to make changes using form fields in a sidebar and view a preview of the changes in real-time on the page.

React Bricks, on the other hand, offers true visual editing. This allows users to directly edit text and images inline, as they would with a word processor like Microsoft Word or Apple Pages. This is more intuitive for content editors, as it eliminates the cognitive load of writing in one place and seeing the results in another, allowing the marketing team to make changes quickly and efficiently.

Markdown

Tina CMS saves content in Markdown format. Developers love Markdown for its simplicity and the ability to write without having to leave the keyboard. However, content in a CMS is not created by developers, but by content editors. Markdown limits the potential expressivity of content editors, as it does not allow for complex styling and formatting.

React Bricks offers a richer JSON format for content and rich text, enabling an almost limitless number of markers, such as "highlight", which is not available in Markdown. You have the freedom to customize the render function for any rich text style.

Data Store (Git / Database)

Tina CMS stores content on a GitHub repository and has a GraphQL data layer to access it. To use Tina CMS in production, you need to connect to Tina Cloud, the SaaS service of Tina CMS for user authentication and to handle the communication with GitHub. According to the Tina CMS documentation, synchronization issues between the GitHub repository and the Tina CMS database cache may occur in some cases.

React Bricks, on the other hand, stores content in a database via APIs called by the React Bricks library. In this way, there are no limits bound to the serialization of content to files and no database caching layer is needed.

React Bricks has versioning, a "time machine" to go back in time, scheduled publishing and self-backup and restore. Furthermore, you can store your repository in any cloud repository service, such as GitHub, Bitbucket, or GitLab: React Bricks doesn't need to access your repository or your code.

Supported frameworks

Tina CMS currently only supports Next.js, whereas React Bricks supports all major React frameworks: Next.js, Gatsby, and Remix.

This flexibility allows developers to choose the best framework for their needs and change it when they want. Switching framework in React Bricks is a matter of minutes: just initialize another starter with the CLI, copy the .env file and the react-bricks folder, and you're good to go.

Custom React components

React Bricks makes it easy to use components from your design system. Just add React Bricks visual editing components like Text, Image, and Repeater to your components' JSX code to enable inline visual editing. Then, add a schema property to your component to enable editing of props via sidebar controls for what's not directly editable (for example the background color).

When you need to add a new prop, you never need to change context - just add a visual editable component to your JSX code or a new sidebar prop to your component's schema. It's just React!

With Tina CMS, the integration with React is different. You need to use the useTina hook to enable contextual editing (through sidebar forms) and you need to define collections and fields in a global schema inside Tina CMS’s configuration.

Images optimization and CDN

Image optimization is essential for a performant website, providing a great user experience and top search engine ranking.

Tina CMS supports Cloudinary for image optimization, but that means that you have to purchase an external service for it to work.

React Bricks, on the other hand, has built-in image optimization and serving from CDN.

Every time an image is uploaded, the React Bricks servers:

• Create optimized images for Responsive view, in next-gen WebP format, with proper fallback (PNG for transparent images, GIF for animated images, JPEG in all other cases).
• Generate a blur up image for browsers that don't natively support lazy loading of images.
• Return the sourceSet array to be used by the client library.
• Serve the optimized images from a global CDN (included in the React Bricks plan).

The React Bricks library's Image component will serve the best image based on the screen resolution and the browser capability (native lazy loading, WebP support, JavaScript enabled, etc.).

Internationalization

According to Tina CMS documentation, there is no built-in solution for internationalization. However, they suggest a workaround using content sub-folders.

React Bricks, instead, has internationalization built-in. You can add the languages you want to support in the React Bricks dashboard and then translate each page by selecting the language tab in the editor interface. If you are using the Next.js starter, Next.js i18n routing is already set up for you.

Collaboration

React Bricks has collaboration built-in to avoid conflicts when multiple users edit the same page simultaneously.

It shows who is online and viewing a page, and leverages a lock system to prevent two people from writing the same content at once, leading to a "last save wins" problem. When an editor starts writing on a page, they gain write control, blocking other users from writing.

The lock is released when the page is saved, allowing other editors to make changes. It's also possible to manually release the lock, if needed.

In Tina, collaboration is managed by the underlying Git layer, with no clear visibility for the Content editors.

Open source

The editor of Tina CMS is open source, with an Apache 2 license. However, Tina Cloud (the SaaS service required to publish in production) is not open source.

React Bricks is not open source, but it has some MIT-licensedopen source related projects, such as all the starter projects for Next.js, Gatsby and Remix. We also provide under a permissive "source available" license a UI library of hundreds of pre-made bricks.

Enterprise features

While Tina CMS recently released version 1.0, React Bricks is already on its third major release, making it highly stable.

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

• Scheduled publishing
• Time machine to go back in time
• Single Sign-on
• Possibility to self-host the APIs if required
• Fine content locking at the block level
• Staging and Production environments
• Web hooks
• On-boarding and Customer success manager

Pricing

Both Tina CMS and React Bricks have a per-project monthly pricing, with a free tier.

Tina CMS has a Basic plan at $29, a Business plan at $599 and Enterprise plan at $2999.

React Bricks has an Essential plan at $49, a Pro plan at $99, a Business plan at $299 and Enterprise plans tailored to the customer’s needs.

Vision about Content management

In the balance between developers and content editors needs, it seems Tina CMS is more on the developer side, using technologies that are appealing for devs, like Markdown and Git, at the expense of flexibility and easy-of-use for the marketing team.

On the other hand, React Bricks is targeting both Developers and Content editors, with inline visual editing, total flexibility with React components and Enterprise-grade features.

Conclusion

Both Tina CMS and React Bricks are great solutions. If open source is important, Tina CMS is likely the best choice. However, if UX for content editors and a stable CMS with enterprise features are priorities, React Bricks may be a better fit.

We suggest that you try both with a demo project to understand the developer experience and content editor experience of both solutions before making a decision.