Build real-time editing into your site.

Tina is an open-source site editing toolkit for React-based sites like Next.js & Gatsby

Choose your tools

Use Tina with your favorite modern JavaScript frameworks. While currently compatible with most React-based workflows — specifically Next.js, Gatsby and React SPA’s.

Edit from your site

Manage content on your own site, not another platform. Import Tina directly into your components to expose an editing interface for controlling and updating layers of your content mesh. You define the content model and editing powers specific to your site.

Extend & contribute

This is not one-size-fits-all CMS. Tina is a grassroots open source JavaScript toolkit with a plugin-rich ecosystem. You can customize and extend the toolkit to suit your needs. Get and give help with a robust community of contributors.

Make your site editable in five minutes.

Install and configure Tina plugins

Wrap and export your templates with Tina components specific to your data

Customize and define the content fields by passing an options argument

Open the sidebar 🤩, edit your site and watch the content updating in real-time

Get Started

yarn add tinacms

import { withTina } from 'tinacms'

function MyApp({ Component, pageProps }) {
  return <Component {...pageProps} />
}

export default withTina(MyApp, {
  enabled: true,
  sidebar: true,
})