TinaCMS

TinaCMS

Written by Thom Krupa

Last update: 4/17/2024

Is Tina really not a CMS? Let's try to figure this out first.

What Is a CMS?

CMS stands for Content Management System. So, the primary goal of it is to Manage the Content, right? It doesn't stand for a content management system that requires a database and server and has API or interaction with Git, right?

Imagine CMS that gives you the ability to live-edit your content. Just click on whatever you want to edit, change it, and see the changes live before your eyes. No need for saving, waiting for a rebuild, or preview server. Click "Publish" and deploy instantly new changes as static files to a global CDN. There is still some more complexity here, but I believe Tina makes a step in the right direction to make this vision real.

How Does TinaCMS Work?

Currently, TinaCMS supports only React-based frameworks - Next.js, Gatsby, CRA, and similar. There is a plan to support Vue, but there is no specific ETA at the moment. If Vue is your jam, you can contribute to the project.

Essentially, Tina is a middleware between frontend and content source (usually markdown or yml files). Think of it as a big form with different fields. Each field represents a piece of content from the source file. When you edit the value it "hijacks" new value the frontend app. When you click "Save", it rewrites the source file with new values.

Live-editing Experience

Tina Team has created a few demos of the CMS + Gatsby, available to fork on Github. I checked out one of them called Grande Starter you can find a sneak peek of how looks the edition experience on the quick video below:

[@portabletext/react] Unknown block type "video", specify a component for it in the `components.types` prop

Tina Cloud

Tina started as a simple React library. Authentication was handled by Github, so every editor needed an account there. It's not an ideal situation especially for non-tech-savvy editors. To extend functionality of Tina, the team launched public alpha of Cloud in June this year. It's sol

Plan for the future is to add media management, GraphQL read-only access and multi-branch workflow.

Try It Yourself on tinacms.org

If you have Github account you can try to edit the official Tina website. Sneak peek below:

[@portabletext/react] Unknown block type "video", specify a component for it in the `components.types` prop

Pricing

Tina has a per-project pricing model that can scale to meet your needs.

It also gives you a Free plan.

Team: Priced at $29 per month, the Team plan includes 3 users, 2 roles, and a maximum limit of 10 users. Additional users can be added at $9 per seat. The plan offers forum support for users to get started with ease.

Business: Geared towards businesses, the Business plan is available at $599 per month. It includes 10 users, 3 roles (coming soon), and no user limit. Additional users can be added at $9 per seat. This plan provides priority support, single sign-on (SSO), and an editorial workflow for enhanced content management.

Enterprise: Designed for large-scale enterprises, the Enterprise plan offers bulk pricing with custom users, custom roles, and no user limit. The pricing structure is variable for users. This plan includes enterprise-level support, single sign-on (SSO), and custom editorial workflows. For detailed pricing and features, users are encouraged to contact TinaCMS directly.

Conclusion

I treat Tina as a proof-of-concept and a very interesting direction in the headless CMS ecosystem. Thanks to the recent Next.js 9.3 update and its Preview feature, it opens new possibilities for Tina in terms of an even better live-editing experience.

[@portabletext/react] Unknown block type "newPdfPage", specify a component for it in the `components.types` prop

TinaCMS Pros and Cons

[@portabletext/react] Unknown block type "prosCons", specify a component for it in the `components.types` prop