Home
Blog
Showcase
Community
Introduction
Overview
Introduction To TinaCMS
Getting Started
Using the Tina Editor
FAQ
Core Concepts
Content Modeling
Data Fetching
Visual Editing
Querying Content
Overview
Writing custom queries
Editing
Overview
Markdown & MDX
Block-based editing
Single Document Collections
Customizing Tina
Overview
Validation
Custom Field Components
Custom List Rendering
Format and Parse Input
Filename Customization
Before Submit function
Going To Production
Overview
Tina Cloud
Self-Hosted
Drafts
Overview
Draft Fields
Editorial Workflow
Guides
Overview
Framework Guides
Separate Content Repo
Querying Tina Content at Runtime
Internationalization
Migrating From Forestry
Further Reference
Overview
Config
Schema
The "tina" folder
The TinaCMS CLI
Media
Search
Content API
Tina's edit state
The "tinaField" helper
Self-Hosted Components

Introduction

Tina's "click to edit" feature allows editors to select the element they want to edit on the page in order to see it in the sidebar.

Try the demo!

In order for this to work, Tina needs to know what document and field the element is associated with. Tina makes this easy with the tinaField helper function. Using this function, developers can add the appropriate metadata to the [data-tina-field] attribute.

import { useTina, tinaField } from 'tinacms/dist/react'
const Page = (props) => {
const { data } = useTina(props)
return (
<div>
<h1 data-tina-field={tinaField(data, 'title')}>{data.title}</h1>
</div>
)
}

Now, when you open the Tina sidebar you'll see editing overlays on any element that's been configured.

"Click to edit" will work for any field in your query, this means you can also click on fields from references as well.

The tinaField function used above is a type-safe helper designed to pluck the metadata out of the data object for the given property to be used on the [data-tina-field] attribute:

// Get metadata for the 'object' field
tinaField(data)
// Get metadata for the `data.title` field
tinaField(data, 'title')

How does the tinaField helper work?

When not in edit-mode, the data returned by the useTina hook might look like this:

{
page: {
title: 'Hello, world',
blocks: [{
__typename: 'PageBlocksHero',
heading: 'Hi, again!',
description: 'Some description'
links: [{
label: "About Us",
url: '/about=us'
}]
}]
}
}

Once edit-mode is enabled, Tina will update each nested object with _tina_metadata:

{
page: {
title: 'Hello, world',
blocks: [{
__typename: 'PageBlocksHero',
heading: 'Hi, again!',
description: 'Some description'
links: [{
label: "About Us",
url: '/about=us',
_tina_metadata: {
formId: "content/pages/hello-world.md",
fields: {
// tinaField(link, 'label') -> `023nsk-page.blocks.0.links.0.label`
label: "page.blocks.0.links.0.label",
url: "page.blocks.0.links.0.link",
}
}
}],
_tina_metadata: {...}
}],
_tina_metadata: {...}
}
}

The tinaField helper simply plucks out the appropriate information from the _tina_metadata object.

API Reference

ArgumentDescriptionTypeRequired
objectThe object which holds the field you're accessingObjectYes
propertyThe property from the object which you're accessing, omitting this will return the object field's metadataStringNo
// components/blocks/hero
import { tinaField } from 'tinacms/dist/react'
export const HeroComponent = (props) => {
return (
<div>
<h4 data-tina-field={tinaField(props, 'heading')}>{props.heading}</h4>
<p data-tina-field={tinaField(props, 'message')}>{props.message}</p>
<ul data-tina-field={tinaField(props, 'links')}>
{props.links.map((link) => (
<li>
<a data-tina-field={tinaField(link)} href={link.url}>
{link.label}
</a>
</li>
))}
</ul>
</div>
)
}

Notice that the <a> tag's data attribute only needs access to the link data object.

Styling the visual editing interface

When Tina finds an element with the [data-tina-field] attribute, it will attach some CSS to it when in edit mode, clicking on the element triggers the Tina form to open and focus the matching field.

Since Tina uses CSS to achieve the interface, it's possible for styles to collide. Overriding and customizing Tina's styles are encouraged. Here's an example of overriding the outline color to red:

.__tina-quick-editing-enabled [data-tina-field] {
outline: 2px dashed rgba(254, 34, 56, 0.5);
}
.__tina-quick-editing-enabled [data-tina-field]:hover {
outline: 2px dashed rgba(254, 34, 56, 1);
}

Product

Showcase
TinaCloud
Introduction
How Tina Works
Roadmap

Resources

Blog
Examples
Support
Media

Whats New
TinaCMS
TinaCloud
Use Cases
Agencies
Documentation
Teams
Jamstack CMS
Benefits
MDX
Markdown
Git
Editorial Workflow
Customization
SEO
Comparisons
TinaCMS vs Storyblok
TinaCMS vs Sanity
TinaCMS vs DecapCMS
TinaCMS vs Contentful
TinaCMS vs Builder.io
TinaCMS vs Strapi
Integrations
Astro
Hugo
NextJS
Jekyll