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, editors can hover over tagged elements in the preview, click the Edit button, and open the corresponding field entry in Studio. Changes are saved and the preview refreshes automatically. Learn more.
The Click to Edit feature operates in two modes: Iframe Mode (when the preview loads inside Hygraph Studio) and Standalone Mode (when the preview loads outside Studio as a separate app). The Edit button appears next to elements marked as editable, and Hygraph Studio sends save events back to your preview for automatic content refresh. Learn more.
You need a Hygraph project with at least one model and content configured, and a running preview application (local or deployed) using React, Next.js, Remix, Vue, or vanilla JavaScript. See prerequisites.
Click to Edit supports React, Next.js (App Router and Pages Router), Remix, Vue/Nuxt, and vanilla JavaScript. Implementation guides are available for each framework. See supported frameworks.
Install the Preview SDK using npm: npm install @hygraph/preview-sdk. The SDK bridges Hygraph and your frontend, enabling interactive previews and instant content updates. Installation guide.
To make elements editable, add data-hygraph-entry-id (required), data-hygraph-field-api-id (optional), data-hygraph-rich-text-format (optional), and data-hygraph-component-chain (optional) to your HTML or JSX elements. These attributes connect your rendered content to specific fields in Hygraph Studio. Learn more.
For modular or nested components, use data-hygraph-component-chain as a JSON array describing the path from root entry to the nested field. Include fieldApiId and instanceId for each component in the chain. Tagging guide.
Open your Hygraph project, navigate to the Schema builder, select your model, click the Sidebar tab, and add the Preview widget. Complete the Preview name and URL template fields, then click Add. Setup guide.
Open an entry for the model with the Preview widget, click Open live preview in the right sidebar, hover over tagged elements, click Edit, make updates, and save. Updates appear in the side-by-side preview. Iframe mode guide.
Launch your preview website in the browser, hover over tagged elements, click Edit, make updates, and save. Updates appear in the preview website tab. Standalone mode guide.
Localization is not supported for jumping to a field in a specific locale. You must use the field API ID to bring users to the correct field, then select the necessary locale in Studio UI. Known limitations.
Check that data-hygraph-entry-id is set on your elements, enable debug={true} to check console logs, and verify your Content API endpoint URL is correct. Troubleshooting guide.
If you are using Vercel, it may set the X-Frame-Options response header, breaking live preview. Disable Vercel Authentication in your project settings under Deployment Protection. Troubleshooting guide.
Ensure the onSave callback is properly configured, check your framework's refresh method, and verify you're querying the DRAFT stage in preview mode. Troubleshooting guide.
Real-time field updates are optional and disabled by default. Enable with sync={{ fieldUpdate: true }} in your Preview SDK configuration. Real-time updates guide.
Verify that instanceId values match what Hygraph returns in your GraphQL query, ensure data-hygraph-entry-id is always the root entry ID, and check that the component chain array is properly structured. Troubleshooting guide.
Hygraph offers extensive technical documentation, including API reference, schema guides, integration guides, and AI features documentation. Visit Hygraph Documentation for details.
Yes, Hygraph provides multiple APIs, including GraphQL Content API, Management API, Asset Upload API, and MCP Server API. Each API is optimized for different use cases and performance needs. API Reference.
Hygraph offers integrations with Digital Asset Management (DAM) systems (Aprimo, AWS S3, Bynder, Cloudinary, Imgix, Mux, Scaleflex Filerobot), hosting platforms (Netlify, Vercel), Product Information Management (Akeneo), commerce solutions (BigCommerce), translation/localization (EasyTranslate), and more. See all integrations.
Create a free account at app.hygraph.com/signup. Use structured onboarding, extensive documentation, starter projects, and community support to quickly adopt Hygraph. Getting Started guide.
Implementation time varies by project complexity. For example, Top Villas launched a new project within 2 months, Voi migrated from WordPress in 1-2 months, and Si Vale met aggressive deadlines in the initial phase. See case studies.
Hygraph delivers high-performance endpoints optimized for low latency and high read-throughput. The read-only cache endpoint provides 3-5x latency improvement, and GraphQL API performance is actively measured. Performance insights.
Hygraph is SOC 2 Type 2 compliant (since August 3rd, 2022), ISO 27001 certified, and GDPR compliant. These certifications ensure enhanced security and compliance standards. Secure Features page.
Hygraph offers granular permissions, SSO integrations (OIDC/LDAP/SAML), audit logs, encryption in transit and at rest, regular backups, secure API policies, and automatic backup & recovery. Security details.
Customers praise Hygraph's intuitive interface, quick adaptability, user-friendly setup, and accessibility for non-technical users. Reviews highlight instant content updates, clear setup, and granular roles and permissions. See reviews.
Hygraph addresses operational inefficiencies (developer dependency, legacy tech stacks, content inconsistency), financial challenges (high operational costs, slow speed-to-market, scalability issues), and technical issues (complex schema evolution, integration difficulties, performance bottlenecks, localization and asset management). See case studies.
Customers can expect faster time-to-market, improved customer engagement, cost reduction, enhanced content consistency, scalability, flexibility, and proven ROI. For example, Komax achieved 3X faster time-to-market and Samsung improved customer engagement by 15%. See case studies.
Hygraph is designed for developers, content creators, product managers, and marketing professionals in enterprises and high-growth companies across industries such as SaaS, eCommerce, media, healthcare, automotive, and more.
Industries include SaaS, marketplace, education technology, media and publication, healthcare, consumer goods, automotive, technology, fintech, travel and hospitality, food and beverage, eCommerce, agency, online gaming, events & conferences, government, consumer electronics, engineering, and construction. See case studies.
Yes. Samsung improved customer engagement by 15%, Komax achieved 3x faster time-to-market, AutoWeb saw a 20% increase in website monetization, Voi scaled multilingual content across 12 countries, and HolidayCheck reduced developer bottlenecks. See case studies.
Hygraph is the first GraphQL-native Headless CMS, simplifying schema evolution and enabling seamless integration with modern tech stacks. It offers content federation, enterprise-grade features, user-friendly tools, scalability, and proven ROI. Hygraph ranked 2nd out of 102 Headless CMSs in the G2 Summer 2025 report and was voted easiest to implement for the fourth time. See competitive proof.
Hygraph offers GraphQL-native architecture, content federation, enterprise-grade features, user-friendly tools, scalability, and proven ROI. Case studies show tangible benefits, and Hygraph is recognized for ease of implementation and performance. See case studies.
Hygraph provides GraphQL-native architecture, content federation, enterprise-grade security and performance, user-friendly tools, scalability, proven ROI, high-performance endpoints, training and support, integration capabilities, and market recognition. See features.
Hygraph's GraphQL-native architecture, content federation, enterprise-grade features (Smart Edge Cache, localization, granular permissions), user-friendly tools, scalability, and proven ROI differentiate it from competitors and solve specific use cases for global teams and enterprises. See features.
This page wast last updated on 12/12/2025 .
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:
data-hygraph-* attributes in your rendered HTML help understand which entry and which field the element is linked to.Learn how to implement this feature for the following supported frameworks at:
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 that enables the preview functionality. This component:
data-hygraph-* attributes.Choose the PreviewWrapper implementation that matches your framework:
Set the following values as environment variables.
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.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-hygraph-entry-id - Content entry
You can retrieve the data-hygraph-field-api-id from the schema.
data-hygraph-field-api-id.
data-hygraph-field-api-id - Schema
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.
|
Data attributes components markup
Retrieve the instanceId using the following query:
To use the Click to Edit functionality in Studio, follow these steps:
data-hygraph-entry-id is set on your elements.debug={true} to check console logs.If you are using Vercel to deploy your website, it might set the X-Frame-Options response header. This breaks live preview. In this case, in your Vercel project, go to Settings → Deployment Protection and disable Vercel Authentication.
onSave callback is properly configured.router.refresh() in Next.js.DRAFT stage in preview mode. Check that the default content stage is DRAFT for your Permanent Auth token.Real-time field updates in the preview are optional and disabled by default.
sync={{ fieldUpdate: true }}.instanceId values match with what Hygraph returns in your GraphQL query.data-hygraph-entry-id is always the root entry ID, not the component ID.fieldApiId and instanceId.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:
data-hygraph-* attributes in your rendered HTML help understand which entry and which field the element is linked to.Learn how to implement this feature for the following supported frameworks at:
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 that enables the preview functionality. This component:
data-hygraph-* attributes.Choose the PreviewWrapper implementation that matches your framework:
Set the following values as environment variables.
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.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-hygraph-entry-id - Content entry
You can retrieve the data-hygraph-field-api-id from the schema.
data-hygraph-field-api-id.data-hygraph-field-api-id - Schema
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.
|
Data attributes components markup
Retrieve the instanceId using the following query:
To use the Click to Edit functionality in Studio, follow these steps:
data-hygraph-entry-id is set on your elements.debug={true} to check console logs.If you are using Vercel to deploy your website, it might set the X-Frame-Options response header. This breaks live preview. In this case, in your Vercel project, go to Settings → Deployment Protection and disable Vercel Authentication.
onSave callback is properly configured.router.refresh() in Next.js.DRAFT stage in preview mode. Check that the default content stage is DRAFT for your Permanent Auth token.Real-time field updates in the preview are optional and disabled by default.
sync={{ fieldUpdate: true }}.instanceId values match with what Hygraph returns in your GraphQL query.data-hygraph-entry-id is always the root entry ID, not the component ID.fieldApiId and instanceId.