Editing your site, right where you see it

The gap between a CMS form and the page it produces is where mistakes live. You fill in a "Subtitle" field, hit save, and only then discover it was too long, or landed in the wrong spot, or read awkwardly next to the heading above it. TinaCMS closes that gap by making the page itself the editing surface.

How it works

When you run the site with Tina's dev server and open /admin, Tina mounts a sidebar next to your real pages. Click any connected piece of content and the form for that field opens, with your edits reflected on the page as you type. There is no separate preview to refresh and no mental mapping between a field name and where it shows up.

The connection between a page element and its content is made with a single attribute:

<h1 data-tina-field={tinaField(post, 'title')}>{post.title}</h1>

That data-tina-field is what makes the heading clickable in the editor. You will find it throughout this starter's components, on titles, body copy, hero images, and dates.

Why it matters for a team

• Writers stay oriented. They edit the thing they can see, so layout and length problems surface immediately.
• Developers stay in control. The fields available, and their validation, come from the schema you defined, not from whatever an editor types into a freeform box.
• Review is honest. Because edits are real content changes, what you approve is exactly what ships.

Visual editing is only half the story. The fields an editor sees are generated from your content model, which is the subject of the next post.