DEV Community


Introducing TinaCMS: Inline Content Editing for React

couellet profile image Charles Ouellet Originally published at on ・2 min read

Introducing TinaCMS: Inline Content Editing for React

“Jamstack is great for developers, but it’s too tech-savvy to get my clients on board.”

I can’t count the number of times we’ve heard this comment from devs.

In all fairness, it was true of the Jamstack in 2015. However, many solutions to get around this issue have popped up since then.

Take the multiple competent headless CMSs or static site builders such as Stackbit, for instance. They’ve paved the way for a user-friendly modern web development experience.

Another relatively new player, TinaCMS, is pushing static website editing to a whole new accessibility level.

In this post, I’ll try out this editing toolkit by integrating it on a Next.js app and showcasing its main features.

The steps to build the live demo are as follow:

  • Creating a Next.js project
  • Adding markdown content
  • Generating markdown helpers
  • Integrating TinaCMS & the inline editing feature

Ready to do this?

What is TinaCMS?


The team at Tina has made it pretty clear that it isn’t a CMS. Not in the traditional sense anyway.

What is it then? The definition you’ll find on their site is that Tina is an open-source site editing toolkit for React-based sites.

It allows users to manage content directly on their website instead of working from another platform. It exposes an editing interface to handle and update content in real-time.

Once installed, users get an edit icon that reveals the editing screen containing the CMS fields. The content you input in there is then written to external data sources such as Markdown or JSON files.

TinaCMS opens the Jamstack door to teams who need non-technical folks to work on content & site editing seamlessly.

→ Read the full post here

Discussion (0)

Editor guide