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

React Bricks vs Tina CMS

Introduction

Both Tina CMS and React Bricks are headless CMSs with visual editing capabilities, 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 inline 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.

Supported frameworks

Tina CMS currently only supports Next.js with the Pages router.

React Bricks supports all major React frameworks: Next.js (both Pages and App router), Astro, Remix and Gatsby.

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, as the content blocks (bricks) are cross-framework.

React Server Components

Tina CMS doesn't currently support React Server Components.

React Bricks is fully compatible with React Server Components to improve the website performance avoiding useless hydration on the client: from the CLI you can choose the Next.js starter with App Router.

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 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 and create your own rich text plugins.

Data Store (Git / Database)

Tina CMS stores content on a GitHub repository and uses 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. However, according to Tina CMS documentation, there may be synchronisation issues between the GitHub repository and the Tina CMS database cache in some cases.

In contrast, React Bricks stores content in a database through APIs called by the React Bricks library. This approach eliminates limits tied to content serialization to files and removes the need for a database caching layer.

React Bricks never access your repository or your code and it offers features like versioning with a content "time machine", scheduled publishing, multiple environments, approval workflow, multiple build hooks, self-backup and restore.

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 a global 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 all the React Bricks plans).

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

Digital Asset Manager

A Digital Asset Manager (DAM) is a fundamental part of a modern CMS. It allows editors to organize, search and reuse assets or upload new images and files.

While Tina CMS has a minimal media manager to upload images, React Bricks has an enterprise-grade Digital Asset Manager (DAM).

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

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.

SEO Optimization

React Bricks includes an SEO module that guides editors towards best-practice optimization.

Within the SEO module, content editors can set:

  • Meta data such as slug, title, description, and keywords
  • Open Graph data and images, with automatic resizing and guided cropping to maintain the correct aspect ratio
  • Twitter Cards data and images, with automatic resizing and guided cropping to maintain the correct aspect ratio
  • Complete support for schema.org semantic data, encompassing 14 schemas, from Article and Event to Product, How To, ...and even Recipe!

Collaboration

React Bricks incorporates a built-in collaboration feature to prevent conflicts when multiple users edit the same page at the same time.

This feature displays who is online and viewing a page, and uses a lock system to prevent two people from simultaneously editing the same content, thus avoiding a "last save wins" issue. When an editor starts editing a page, they gain write control, which prevents other users from editing.

The lock is released when the page is saved, allowing other editors to make changes. If necessary, the lock can also be manually released.

In Tina, the Git layer manages collaboration, but it doesn't provide clear visibility for 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-licensed open source related projects, such as all the starter projects for Next.js, Remix and Gatsby. We also provide under a permissive "source available" license a UI library of hundreds of pre-made bricks.

Enterprise features

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

Vision on Content Management

When balancing the needs of developers and content editors, it seems that Tina CMS leans more towards the developers. It uses technologies that developers find attractive, such as Markdown and Git, at the expense of flexibility and easy-of-use for the marketing team.

In contrast, React Bricks aims to serve well both Developers and Content Editors. It offers inline visual editing, complete flexibility with React code, and features suitable for enterprise-grade applications.

Conclusion

If you prefer a Git-based product or require an open-source project, Tina might be the better choice. However, for a more comprehensive feature set, including a superior editing interface, Digital Asset Management (DAM), SEO optimization, localization, collaboration, scheduled publishing, and a more stable enterprise-grade CMS, React Bricks may be more suitable.

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