I’m excited to share that Tina’s visual editing UX just got a lot better with click-to-edit functionality.

This pops open the Tina sidebar at the right location when you click editable elements on the page.  See it in action on roev.com here:

Our goal is to make visual editing the most intuitive editing experience without compromising the developer's experience and code-quality. Click-to-edit is a big UX win and easy to implement on your site.

Demo

If you want to get a feel for the UX, try this demo (no log in required).

Getting Started

If you're already using visual editing, you can enable click-to-edit by adding the data-tina-field attribute to your DOM elements which allows Tina to map the editable elements on your page to the correct CMS field. We provide a helper that makes it easy to add this to pages with complex data structures.

Note, the data-tina-field attribute is different from the data-tinafield attribute used by our Active Field Indicator (which will be phased out in the future).

No Going Back

We've been using this internally for a while now and it's one of those features that makes you think "how did we do it before?". Going back to the old way where you have to traverse nested forms in Tina's sidebar to find the right field feels very cumbersome.

We're excited to hear what you think about click-to-edit. Please hop in our Discord server if you have feedback.