TinaCMS

Let's be clear on one thing first: Tina is not a CMS - that's the acronym. Tina is an open-source website editing toolkit for React-based frameworks like Gatsby and Next.js. Created and maintained by the Forestry folks. The reason for Tina being here is that it aims at giving full power to the developers to build custom editing experience on the fly, using their favorite stack, free from platform dependencies.

Written by:
  • Thom Krupa

    Thom Krupa

Last update: July 15, 2021
  • TinaCMS logo
  • CMS type: Tina is Not a CMS*
  • Website: tina.io
  • Founded: 2019

Last update: July 15, 2021

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:

Loading Video

Loading Video

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:

Loading Video

Loading Video

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

  • Great live-editing experience. Very valuable for not tech-savvy editors.
  • You can use a variety of fields to edit content and other website settings like theme. From simple text input to the color picker.
  • You can post a RFC and discuss it with the team.
  • Forestry team communicates publicly often about the short-term goals and future Tina direction.
  • Works only with React-based tools like Next.js, Gatsby, and CRA.
  • Works only with flat-files. It means it's an extension or alternative to Git-based CMS, but will not replace fully API-driven CMS.

Compare TinaCMS with

  • Contentful logo
  • Storyblok logo
  • Sanity logo
  • Forestry logo
  • DatoCMS logo
  • Prismic logo
  • NetlifyCMS logo
  • Strapi logo
  • Headless WordPress logo
  • Agility CMS logo
  • GatherContent logo
  • Kentico Kontent logo
  • GraphCMS logo
  • Craft CMS logo
  • Butter CMS logo
  • Payload CMS logo
  • Cosmic logo
  • Directus logo
  • Ghost logo
  • LexasCMS logo
  • Magnolia CMS logo
  • TakeShape logo
  • Contentstack logo