Introducing Click to Edit

If you’ve ever spotted a typo on your homepage and then spent minutes digging through models, references, and nested components to find the right field, you’re exactly who we built Click to Edit for.

We are announcing Click to Edit, a new feature that lets editors hover over content in their preview, click Edit in Hygraph, and jump straight to the exact field in Studio. Make the change, save, and see it update right away.

We built this because we don’t want to see editors wasting time on detective work instead of doing their actual job. The CMS should help you work faster, not slower.

#What is Click to Edit?

Click to Edit is a new capability in Hygraph Studio that connects what editors see on their website preview to the exact field they need to change in the CMS.

It builds on Live Preview, which already supports side-by-side visual editing, and lets editors hover over elements in the preview to find the corresponding field in the CMS immediately.

With Click to Edit:

• Editors hover over content in a preview (inside Studio or in a standalone preview app).
• An Edit in Hygraph button appears on elements that have been tagged as editable.
• Clicking that button opens the corresponding entry in Studio and scrolls directly to the exact field.
• The preview stays open and in place, so editors can see their changes in context.

You won’t have to guess the entry or scan dozens of fields, and far fewer “can you help me find this?” messages to developers.

#Two powerful modes: Field Update & Field Focus

Click to Edit ships with two opt-in enhancements for even tighter alignment between Studio and your preview:

Field Update (live visual feedback)

Field Update lets you preview and react to field updates in real time, without waiting for a save:

• As editors type into a tagged field, the preview can update instantly.
• This is powerful for copy-heavy layouts, hero sections, or places where designers and editors iterate together.

Field Focus (reverse lookup)

Field Focus works in the opposite direction of Click to Edit:

• When an editor selects a field in Studio, the preview scrolls to the corresponding element on the page (if it’s visible).
• This makes it easier to understand where a particular field appears, especially when content is reused across multiple sections or components.

Together, Field Update and Field Focus turn your preview into a two-way bridge between content structure and visual output.

#Why we built Click to Edit

Modern content models are powerful, but they can also be hard to navigate for editors:

• A single page might pull content from multiple models, nested components, and repeatable lists.
• The same text (like a CTA label) might appear on many pages, or come from shared components.
• Editors who don’t live in the schema every day often resort to trial and error to find the right field.

That slows down content operations, especially when teams are trying to move fast on campaigns, experiments, or localization.

Click to Edit removes that friction by turning the preview itself into a map back to your schema. Editors don’t have to understand how the page is assembled—they just click what they see.

#Getting started with Click to Edit

For developers

Click to Edit is powered by the Hygraph Preview SDK, which turns your preview frontend into an interactive editing surface. Find Hygraph’s Preview SDK here.

Getting started requires three lightweight steps:

1) Install and set up the Preview SDK

Add @hygraph/preview-sdk to your frontend and wrap your preview app with the SDK.

Configure your API endpoint, Studio URL, refresh behavior, and optional overlay styling.

2) Tag elements you want editors to click

Add a few data-hygraph-* attributes (entry ID, field ID, optional rich text format or component chain).

You can also use helper functions from the SDK to generate these attributes cleanly in your components.

3) Add or update Preview widgets in Studio

Point each relevant model to your preview route.
Once wired up, Click to Edit overlays appear automatically.

For editors

Click to Edit works automatically once your preview app is connected.

Here’s what the experience looks like:

1) Open a Live Preview

Use the Preview widget in Studio or open your preview in a separate tab.

2) Hover to identify editable content

Elements tagged by your developers will highlight as you move your cursor.

3) Click “Edit in Hygraph”

The CMS jumps directly to the right entry and field so you can update content instantly.

4) Make changes and continue editing in context

Adjust the field, save, and see updates reflected in your preview without losing your place.

Move through the page and update multiple elements in one flow — no more hunting through the schema.

This works with nested components, modular content, and all supported field types.

Read the full documentation →

#Availability and roadmap

Click to Edit is now available in Public Beta for all Hygraph projects that have a preview application configured. There’s no extra plan requirement: once your team has Live Preview and the Preview SDK set up, Click to Edit overlays can be enabled with a small amount of markup in your frontend.

Looking ahead, we’re exploring:

• Locale-aware jumps – jumping directly into the locale that matches the preview, rather than switching manually in Studio.
• Multi-device preview improvements aligned with our previously announced Live Preview roadmap.
• Deeper integration with AI-powered features like AI Assist, AI Agents, and the Hygraph MCP Server, extending inspector-style editing into intelligent recommendations and automation.
• Support variants so you can visually edit variants without jumping back and forth between segments and pages.

As with other recent releases, we’ll iterate quickly based on your feedback.