loading...
Cover image for Announcing TinaCMS
Tina

Announcing TinaCMS

scottgallant profile image scottgallant Originally published at tinacms.org ・2 min read

We’re excited to announce TinaCMS: an open-source site editing toolkit for React-based sites (Gatsby and Next.js). See the announcement video at JAMstack Conf SF (the demo starts at 3:45).

Tina is not a CMS, in the traditional sense. As in, it’s not a separate system for managing content. Instead, Tina adds editing functionality to your site when running in dev mode locally, or when using Tina Teams (cloud)...In fact, I'm writing this post with Tina right now:

tina-announcement-gif

When you install Tina, your site gets a floating edit icon in the corner that toggles an editing pane (left) to expose the CMS fields. This gives your content editors a contextual editing experience that’s super intuitive. When you click "Save" Tina writes your content to external data sources, such as Markdown or JSON files. Try the Gatsby starter site to see for yourself.

Where does Tina store my content?

Currently, Tina writes to Markdown and data files and commits to Git but it can be extended to write to other data sources (think, a WordPress database, Google Sheets, Airtable, etc). When running locally, Tina writes to the file system and if you're using Tina Teams, it commits to your GitHub/GitLab repo.

Why Tina?

I’ve been setting up content management systems for people since the early 2000’s. In the beginning, CMSs like WordPress and Drupal gave our non-developer colleagues website editing powers. But we’ve seen very little innovation on the editing experience in the past 10+ years. Meanwhile, the editing experience of site builders like Squarespace, Wix and Webflow have become very sophisticated.

When I watch people use a traditional CMS, I often see them struggle because the input (the CMS) lacks the context of the output (their site) and using a CMS feels more like filing your taxes than editing a website. Now that we’ve moved to headless CMSs and the JAMstack, editors often lose the ability to preview, leaving them in the dark as they create content.

We developers have hot-reloading, and Tina is hot-reloading for content editors.

Get Started

We're coming out of a monolithic CMS era and we believe next-gen sites need a next-gen CMS. Checkout Tina and let us know what you think!

Discussion

pic
Editor guide
Collapse
dirtyf profile image
Frank Taillandier

It's up to developers to define if fields should go in the sidebar or if they should be edited inline in the page. See: tinacms.org/docs/inline-editing/

And yes Tina is using contentEditable under the hood :)

Collapse
dcgoodwin2112 profile image
dcgoodwin2112

I set up TinaCMS on a Gatsby blog site I'm working on today and it was a quick and easy process. I definitely recommend checking this one out!

Collapse
ncphillips profile image
ncphillips

Super glad to hear that! <3

Collapse
mercatante profile image
Steven Mercatante

This looks great. I was speaking to Frank and the other Forestry folks at Smashing Conf NY (sorry I forgot their names!), and TinaCMS looks really interesting. I'm excited to try it.

Collapse
biswaviraj profile image
Biswajeet Das

Watched the demo it was really amazing🔥. Can't wait to use it in my next project.

Collapse
scottgallant profile image
scottgallant Author

Awesome! Reach out in slack or on twitter if you have feedback if you need help.

Collapse
superdiana profile image
Super Diana

WOW! Just WOW! this is amazing! Great job. Can't wait to use it!

Collapse
albertomontalesi profile image
AlbertoM

I have two blogs made with Gatsby, this seems interesting, I'll try it one of these days thanks

Collapse
jalukaba_x profile image
Jalu Kaba X

Awesome... I will try it

Collapse
sm0ke profile image
Sm0ke

Great tool.

Collapse
daviddalbusco profile image
David Dal Busco

Congratulations for the launch 🚀👍

Collapse
adam_cyclones profile image
Adam Crockett

I wish CMS would decouple, be a headless editor that I can use remotely or embedded. Anyway this CMS looks nice.

Collapse
ncphillips profile image
ncphillips

Hey, Tina maintainer here.

Using Tina to build your site is an examples of low coupling and high cohesion.

Why is it low coupling? If you need to upgrade Gatsby you don't have to upgrade Tina, and vice versa; if you change your data storage, all your form definitions remain the same; etc.

Why high cohesion? Because everything you need to know about how your content is created, edited, and displayed is grouped together.

These qualities mean TinaCMS provides a substantially better experience for both the developer and the editor

As a developer your workflow is incredibly fast; it's easy to upgrade different parts of the stack independently; and you have way more control then with traditional CMSs.

Content editors get an interface that makes sense to them. In traditional CMSs, editors need to understand how this hug abstract set of form get turned into their website. With Tina, the link is immediately apparent.

Collapse
tyrw profile image
Tyler Warnock

For that you can check out AnyMod.com

Collapse
karolis_sh profile image
Karolis Šarapnickis

I'm currently using MDX + NetlifyCMS, but this looks really next gen! Nice work!

Collapse
ncphillips profile image
ncphillips

While TinaCMS doesn't technically "support" MDX, you can definitely write use MDX components inside your content. Check it out! Maybe you'll be converted ;)

Collapse
nikolalakovic85 profile image
Nikola Lakovic

Hi NCPhillips! Can you describe how this can be achieved? Thank you in advanced!

Thread Thread
ncphillips profile image
ncphillips

There is actually now a gatsby-tinacms-mdx plugin!

It's still pretty alpha.

npmjs.com/package/gatsby-tinacms-mdx

Collapse
vouzamo profile image
John Askew

How does this work for sites that need to localize content or manage multiple branded websites etc? Maybe it doesn't cater for that use case (which is fine) but just trying to understand any limitations that may dictate where it does and doesn't make sense to use it.

Collapse
scottgallant profile image
scottgallant Author

Hey, Tina is a very new project (pre 1.0) so we don't have examples of i18n implementations yet. However, I can tell you where we see it going. We want Tina to work for very small sites - like, a personal portfolio - but scale up to very large sites - like, multi-lingual sites with lots of content and many contributors.

Stay tuned here: tinacms.org/community

Collapse
rixcy profile image
Rick Booth

This looks really good, been searching for something like this for a while so definitely going to test it in my next project, thanks!

Collapse
jameswelbes profile image
⭐James Welbes⭐

Sounds way too nerdy to really catch on.

Collapse
awwsmm profile image
Andrew (he/him)

Is... Is this named after the llama from Napoleon Dynamite?

Collapse
lucaskardo profile image
lucas kardonski

Tina adds editing functionality to react based sites only? Is there a way to add this editing functionalities to a multi page static site written in html and css?