#Get started with Click to Edit

The Click to Edit feature lets editors jump directly from the content preview to the exact field they want to edit in Hygraph Studio. Once configured using the Hygraph Preview SDK, you can:

Hover over a tagged element in your preview to display an Edit button.
Click the Edit button to open the corresponding field entry in Studio.
Save your changes to automatically refresh your preview.

#How it works

The SDK operates in two modes that are automatically detected:
- Iframe Mode: When your preview loads in an iframe inside Hygraph Studio .
- Standalone Mode: When your preview loads outside Studio, as a separate preview app.
The Edit button is available next to elements that you explicitly mark as editable.
The data-hygraph-* attributes in your rendered HTML help understand which entry and which field the element is linked to.
Hygraph Studio sends save events back to your preview so you can refresh content automatically while preserving scroll position and state.

#Get started

#Availability

The Click to Edit feature is available for all projects and is currently in Beta.

#Prerequisites

A Hygraph project with at least one model and content configured.
A running preview application (local or deployed) using React, Next.js, Remix, Vue, or vanilla JavaScript.

#Steps

Install the Preview SDK.
Create a PreviewWrapper component to enable the preview functionality.
Set environment variables.
Add data attributes to your content elements.
Set up the Preview widget in Studio
Use the Click to Edit feature from content previews

Learn how to implement this feature for the following supported frameworks at:

#Install the Preview SDK

The Preview SDK is the bridge between Hygraph and your frontend. The Preview SDK transforms your preview into an interactive experience where content updates appear instantly as you save your changes. You can click any content element in the preview to jump directly to its field in the editor.

npm install @hygraph/preview-sdk

#Create the PreviewWrapper component

Create the PreviewWrapper component that enables the preview functionality. This component:

Connects to your project’s API endpoint.
Listens for save events coming from Studio.
Handles iframe and standalone preview modes.
Renders Click to edit overlays based on data-hygraph-* attributes.

#Set environment variables

Set the following values as environment variables.

Content API endpoint - Copy your Content API endpoint from your Hygraph project settings under Project Settings > Access > Endpoints > High Performance Content API.For more information, see our dedicated docs on the Content API.
Hygraph Studio base URL - Copy the base Studio URL from your browser's address bar. Example: https://studio-eu-central-1-shared-euc1-02.hygraph.com. Ensure that the URL does not end with a /. Otherwise, Click to Edit will not work in standalone mode, outside of Hygraph Studio.
Permanent Auth Token - You can create a Permanent Auth Token from your Hygraph project settings under Project Settings > Access > Permanent Auth Tokens. Check that the default content stage is DRAFT. For more information, see our dedicated docs on Permanent Auth Tokens.
- This is needed only if your Hygraph project requires authentication for Content API requests.

#Add data attributes to content elements

The Preview SDK uses HTML data attributes to connect your rendered content back to specific fields in Hygraph Studio. Understanding how these attributes work is essential for implementing click-to-edit functionality.

Add data-hygraph-* attributes to the HTML or JSX elements, such as <h1>, <p>, <div>, in your frontend application that render content from Hygraph. These attributes tell the SDK which field in Hygraph corresponds to that element. The SDK scans your rendered HTML for these attributes and adds the hover overlays and Edit buttons automatically.

Attribute	Required / Optional	Description
`data-hygraph-entry-id`	Required	The content entry ID from Hygraph. Every element you want to make editable must include this attribute. This tells Studio which entry to open. This remains constant across all field types in Studio.
`data-hygraph-field-api-id`	Optional	The API ID of the field. Identifies which field to focus within the entry in the editor. Without it, the edit button opens the entry unfocused.
`data-hygraph-rich-text-format`	Optional	Specifies the Rich Text format. Accepts `html`, `markdown`, or `text` to specify the format for Rich Text fields.
`data-hygraph-component-chain`	Optional	JSON string describing the path to nested components. This is used for tagging component fields.

Data attributes markup

#Tagging component fields

When working with basic, modular, or nested components, or repeatable component lists, use the data-hygraph-component-chain attribute to help Studio navigate to the correct component field.

Attribute	Description
`data-hygraph-entry-id`	The content entry ID from Hygraph. Every element you want to make editable must include this attribute. This tells Studio which entry to open. This remains constant across all field types in Studio. You do not use the component's ID as the entry ID.
`data-hygraph-field-api-id`	The API ID of the field inside the component. Identifies which field to focus within the entry in the editor. Without it, the edit button opens the entry unfocused.
`data-hygraph-component-chain`	JSON array of `{fieldApiId, instanceId}`. This describes the path from root entry to the nested field. `fieldApiId` - The field that contains the nested component. `instanceId` - Unique identifier of the component instance, as returned in your GraphQL query as described below. This is not the API ID of the component.

Data attributes components markup

Retrieve the instanceId using the following query:

Query to retrieve instanceId

Response with instanceId

To use the Click to Edit functionality in Studio, follow these steps:

Open your Hygraph project.
Navigate to the Schema builder, and select your model.
Click the Sidebar tab.
Select the Preview widget from the right sidebar.
Complete the Preview name and the URL template fields, and click Add.

#Use the Click to Edit feature from content previews

#In iframe mode in Studio

Open an entry of the model for which you added the Preview widget.
In the right sidebar, under Preview, click Open live preview. The preview loads in Studio.
Hover over a tagged element that you need to make changes. The Edit button appears automatically on the tagged element.
Click the Edit button. You go the corresponding field in Hygraph.
Make updates to the field, as required, and click Save & Preview. Alternatively, hit CMD+S on Mac, or CTRL+S on Windows.
- If your preview is set to refresh automatically on field updates, you do not need to save and preview.
You can see your updates in the side-by-side preview.

#In standalone mode outside Studio

Launch your preview website in the browser.
Hover over a tagged element that you need to make changes. The Edit button appears automatically on the tagged element.
Click the Edit button. You go the corresponding field in Hygraph.
Make updates to the field, as required, and click Save & Preview. Alternatively, hit CMD+S on Mac, or CTRL+S on Windows.
- If your preview is set to refresh automatically on field updates, you do not need to save and preview.
You can see your updates in the preview website in the tab.

#Known limitations

Localization - You cannot use the Click to Edit feature to jump to a field in a specific locale. You need to use the field API ID to bring users to the correct field, and then select the necessary locale using the Studio UI.

#Troubleshooting

#Edit buttons do not appear

Check that data-hygraph-entry-id is set on your elements.
Enable debug={true} to check console logs.
Verify your Content API endpoint URL is correct.

#Preview does not refresh on save

Ensure the the onSave callback is properly configured.
Check that your framework's refresh method is working. Example: router.refresh() in Next.js.
Verify you're querying the DRAFT stage in preview mode. Check that the default content stage is DRAFT for your Permanent Auth token.

#Content does not update in real-time

Real-time field updates in the preview are optional and disabled by default.

Enable with sync={{ fieldUpdate: true }}.

#Components do not focus correctly

Verify the instanceId values match with what Hygraph returns in your GraphQL query.
Check that the value of data-hygraph-entry-id is always the root entry ID, not the component ID.
Ensure the component chain array is properly structured with fieldApiId and instanceId.