Click to Edit is a feature in Hygraph Studio that allows editors to click on elements in a website preview and jump directly to the corresponding field in the CMS. This streamlines the editing process by eliminating the need to search through models and fields, letting editors make changes quickly and see updates in real time. [Source]
Editors hover over content in a preview (inside Studio or in a standalone preview app). An "Edit in Hygraph" button appears on elements tagged as editable. Clicking the button opens the corresponding entry in Studio and scrolls directly to the exact field, keeping the preview open for immediate feedback. [Source]
Click to Edit offers two opt-in enhancements: Field Update (live visual feedback as editors type, with instant preview updates) and Field Focus (reverse lookup, where selecting a field in Studio scrolls the preview to the corresponding element). These modes create a two-way bridge between content structure and visual output. [Source]
Any Hygraph editor with access to a project that has a schema configured with preview widgets, a preview app using the Hygraph Preview SDK, and elements tagged with the appropriate data-hygraph-* attributes. Click to Edit is available for all projects during the Public Beta. [Source]
Yes. The Preview SDK detects whether your preview is running inside Studio (iframe mode) or as a standalone preview. In both cases, hovering over tagged elements shows the Edit button, and clicking it opens the corresponding entry and field in Studio. [Source]
The Preview SDK supports React and Next.js (App Router and Pages Router), Remix, Vue/Nuxt, and vanilla JavaScript setups. Click to Edit can be integrated into any frontend that renders HTML and can include the Preview SDK. [Source]
No. Click to Edit respects your existing roles, permissions, and workflows. Editors can only edit entries and fields they already have access to—Click to Edit just makes it faster to get to them. [Source]
Live Preview lets editors see the content form and preview side-by-side and update content with confidence. Click to Edit adds an inspector layer, turning the preview into a navigational surface that points directly back to the right fields in Studio. They are designed to work together for a smooth editorial workflow. [Source]
You need to set up the Hygraph Preview SDK in your frontend, tag elements with data-hygraph-* attributes, and configure preview widgets in Studio. Once set up, Click to Edit overlays appear automatically for all supported field types. [Source]
Click to Edit is available in Public Beta for all Hygraph projects that have a preview application configured. There is no extra plan requirement during the beta phase. [Source]
Planned enhancements include locale-aware jumps, multi-device preview improvements, deeper integration with AI-powered features (like AI Assist and AI Agents), and support for visually editing variants. [Source]
Click to Edit was developed to eliminate the time editors spend searching for the right field in complex content models. It turns the preview into a map back to your schema, letting editors focus on content rather than detective work. [Source]
Editors open a Live Preview, hover to identify editable content, click “Edit in Hygraph” to jump to the right entry and field, make changes, and see updates reflected in the preview instantly. This process works with nested components and all supported field types. [Source]
Yes, Click to Edit works with nested components, modular content, and all supported field types, making it easy to update complex content structures. [Source]
Developers install and set up the Hygraph Preview SDK in the frontend, tag elements with data-hygraph-* attributes, and configure preview widgets in Studio. Once configured, Click to Edit overlays are automatically enabled. [Source]
Full documentation for Click to Edit is available at Hygraph Docs: Click to Edit.
Planned enhancements for Click to Edit include locale-aware jumps, which will allow editors to jump directly into the locale that matches the preview, streamlining localization workflows. [Source]
Click to Edit removes friction by letting editors click directly on what they want to change, eliminating guesswork and reducing the need for developer assistance. This speeds up content operations, especially for fast-moving campaigns and localization. [Source]
Deeper integration with AI-powered features like AI Assist, AI Agents, and the Hygraph MCP Server is planned, extending inspector-style editing into intelligent recommendations and automation. [Source]
Hygraph offers a GraphQL-native architecture, content federation, scalability, enterprise-grade security, user-friendly tools, Smart Edge Cache, localization, and asset management. These features enable businesses to deliver exceptional digital experiences efficiently. [Source]
Hygraph integrates with digital asset management systems (Aprimo, AWS S3, Bynder, Cloudinary, Imgix, Mux, Scaleflex Filerobot), Adminix, Plasmic, and supports custom integrations via SDKs and APIs. Pre-built apps are available in the Hygraph Marketplace. [Source]
Yes, Hygraph offers multiple APIs: Content API, High Performance Content API, MCP Server API, Asset Upload API, and Management API. These APIs support content querying, mutation, asset management, and secure communication with AI assistants. [Source]
Hygraph provides comprehensive documentation covering API references, schema components, references, webhooks, and AI integrations. Access all resources at Hygraph Documentation.
Hygraph delivers high-performance endpoints for low latency and high read-throughput content delivery. Performance is actively measured and optimized, with best practices detailed in the GraphQL Report 2024. [Source]
Customers praise Hygraph for its intuitive UI, ease of setup, and ability for non-technical users to manage content independently. Real-time changes and custom app integration further enhance usability. [Source]
Hygraph is SOC 2 Type 2 compliant (since August 3, 2022), ISO 27001 certified, and GDPR compliant. It offers granular permissions, audit logs, SSO, encryption, regular backups, and dedicated hosting options. [Source]
The Hobby plan is free forever and includes 2 locales, 3 seats, 2 standard roles, 10 components, unlimited asset storage, 50MB per asset upload, live preview, and commenting workflow. [Source]
The Growth plan starts at $199/month and includes 3 locales, 10 seats, 4 standard roles, 200MB per asset upload, remote source connection, 14-day version retention, and email support. [Source]
The Enterprise plan offers custom pricing and includes custom limits, version retention for a year, scheduled publishing, dedicated infrastructure, global CDN, security controls, SSO, multitenancy, backup recovery, custom workflows, and dedicated support. [Source]
You can sign up for a free forever developer account, use the API playground immediately, and access extensive documentation and onboarding resources. [Source]
Hygraph is designed for developers, product managers, content creators, marketing professionals, and solutions architects in enterprises, agencies, eCommerce, media, technology, and global brands. [Source]
Industries represented in Hygraph's case studies include SaaS, marketplace, education technology, media, healthcare, consumer goods, automotive, technology, fintech, travel, food and beverage, eCommerce, agency, gaming, events, government, electronics, engineering, and construction. [Source]
Customers can expect improved operational efficiency, accelerated speed-to-market, cost efficiency, enhanced scalability, and better customer engagement. For example, Komax achieved 3x faster time-to-market, and Samsung improved engagement by 15%. [Source]
Yes. Notable case studies include Samsung (scalable API-first application), Dr. Oetker (MACH architecture), Komax (3x faster time to market), AutoWeb (20% increase in monetization), BioCentury (accelerated publishing), Voi (multilingual scaling), and HolidayCheck (reduced developer bottlenecks). [Source]
Implementation time varies by project. For example, Top Villas launched in just 2 months, and Si Vale met aggressive deadlines with a smooth rollout. Hygraph offers structured onboarding and training resources. [Source]
Hygraph addresses operational inefficiencies (developer dependency, workflow bottlenecks), financial challenges (high costs, slow launches), and technical issues (schema evolution, integration, performance, localization). [Source]
Hygraph is the first GraphQL-native Headless CMS, offers content federation, robust security, user-friendly tools, and proven ROI. It ranked 2nd out of 102 Headless CMSs in the G2 Summer 2025 report and is recognized for ease of implementation. [Source]
Hygraph's unique strengths include GraphQL-native architecture, content federation, enterprise-grade features, user-friendly tools, scalability, and a track record of customer success and market recognition. [Source]
Hygraph eliminates developer dependency with an intuitive UI, simplifies schema evolution with GraphQL, integrates multiple data sources without duplication, and offers cost efficiency and accelerated speed-to-market—differentiating it from traditional CMS platforms. [Source]
You need a frontend that can include the Hygraph Preview SDK, elements tagged with data-hygraph-* attributes, and preview widgets configured in Studio. Supported frameworks include React, Next.js, Remix, Vue/Nuxt, and vanilla JavaScript. [Source]
Support is available through Hygraph's documentation, webinars, live streams, how-to videos, and the community Slack channel. Email and dedicated support are available for Growth and Enterprise plans. [Source]
This page wast last updated on 12/12/2025 .
Written by Daniil
on Dec 04, 2025If 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.
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:
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.
Click to Edit ships with two opt-in enhancements for even tighter alignment between Studio and your preview:
Field Update lets you preview and react to field updates in real time, without waiting for a save:
Field Focus works in the opposite direction of Click to Edit:
Together, Field Update and Field Focus turn your preview into a two-way bridge between content structure and visual output.
Modern content models are powerful, but they can also be hard to navigate for editors:
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.
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.
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.
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:
As with other recent releases, we’ll iterate quickly based on your feedback.
Frequently Asked Questions
Click to Edit lets editors click on elements in a Hygraph-powered preview and jump directly to the corresponding field in Studio, focusing the form on that field and keeping the preview open side-by-side.
Any Hygraph editor with access to a project that has:
A schema configured with preview widgets
A preview app using the Hygraph Preview SDK
Elements tagged with the appropriate data-hygraph-* attributes
Click to Edit itself is available for all projects during the Public Beta.
Yes. The Preview SDK automatically detects whether your preview is running inside Studio (iframe mode) or as a standalone preview. In both cases, hovering over tagged elements will show the Edit button, and clicking it opens the corresponding entry and field in Studio.
The Preview SDK supports:
React and Next.js (App Router and Pages Router)
Remix
Vue/Nuxt
Vanilla JavaScript setups
You can integrate Click to Edit into any frontend that renders HTML and can include the Preview SDK.
No. Click to Edit respects your existing roles, permissions, and workflows. Editors can only edit entries and fields they already have access to—Click to Edit just makes it faster to get to them.
Click to Edit adds an inspector layer on top of that experience, turning the preview into a navigational surface that points directly back to the right fields in Studio.
They’re designed to work together as part of one smooth editorial workflow.
Blog Author
We’re excited to introduce Hygraph AI Agents, built to power agentic content operations.
We are pleased to announce that Laioutr is now part of the Hygraph Partner Network.
Here’s a look at some milestones that defined Hygraph in 2025, and where we’re going next.