TinaCMS

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:

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:

Pricing

Tina is free and fully open-source. Tina Cloud is free as well, at least during the alpha stage. There is no pricing yet.

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.

Pros and Cons