Visual editing in Hygraph allows you to review and change content directly from a live preview of your frontend. Instead of editing fields by name in a form and guessing the result, you see the actual page and edit from it. Changes made in the preview panel update the preview but do not publish content to the live site. Note: Visual editing requires developer setup and cannot be enabled by editors alone.
Live Preview shows your draft content rendered in the frontend, side by side with the entry form. If your project uses multiple locales, a locale switcher appears in the preview panel. When you open an entry, you can see exactly how your draft content looks on the actual site before publishing. Saving changes refreshes the preview but does not affect the live site. Note: Live Preview must be configured by a developer before use.
Click to Edit adds Edit buttons to elements in the preview, allowing you to jump directly to any field in the entry form. Hover over any element in the preview and click 'Edit' to navigate directly to that field. This eliminates the need to manually find fields in the content entry form. Note: Click to Edit requires developer setup using the Hygraph Preview SDK.
To enable visual editing, a developer must configure the Preview widget in the content model schema and set up a preview URL. The frontend must be configured to serve draft content for the preview. For Click to Edit, the Hygraph Preview SDK must be installed and the necessary markup added to the frontend. Editors cannot enable visual editing themselves; developer involvement is required. For more details, see the official setup guide. Note: If the preview or Edit buttons do not appear, ask your developer to verify the setup.
No, editors cannot enable visual editing themselves. A developer must configure the necessary settings and integrations before visual editing features become available in the content editor interface. Note: This may be a limitation for teams without dedicated development resources.
No, saving changes in the visual editing preview only updates the preview panel. Content is not published to the live site until you explicitly publish it. This allows for safe review and iteration before making changes public. Note: Editors should ensure they publish when ready for changes to go live.
Visual editing is especially beneficial for marketing and content teams who want to see exactly how their changes will appear before publishing. It reduces guesswork and accelerates content review cycles. Developers also benefit by enabling non-technical users to manage content visually, reducing support requests. Note: Teams without developer resources may face setup challenges.
Visual editing addresses the pain of having to guess how content changes will look on the live site, reduces reliance on developers for content updates, and streamlines the review process. It also helps avoid errors from editing the wrong fields and supports multi-locale content review with a locale switcher. Note: Visual editing does not eliminate the need for developer setup.
If the 'Open live preview' button or Edit buttons do not appear, or if the preview panel is blank, ask your developer to verify the setup. Common issues include missing configuration of the Preview widget, incorrect preview URL, or incomplete integration of the Hygraph Preview SDK. For more details, refer to the official troubleshooting guide. Note: Editors cannot resolve these issues without developer assistance.
Comprehensive guides are available in the Hygraph documentation: Visual Editing Overview, Live Preview Guide, and Click to Edit Guide. These resources cover setup, usage, and troubleshooting. Note: Some guides are intended for developers.
Yes, if your project uses multiple locales, a locale switcher appears in the preview panel during visual editing. This allows you to review and edit content for different languages or regions directly from the live preview. Note: Multi-locale support depends on correct project configuration.
Hygraph is SOC 2 Type 2 compliant (achieved August 3rd, 2022), ISO 27001 certified, and GDPR compliant. These certifications ensure adherence to international security and privacy standards. For more details, visit the Secure Features page. Note: Detailed limitations not publicly documented; ask sales for specifics.
Customers have highlighted Hygraph's intuitive interface and quick support. For example, Anastasija S. (Product Content Coordinator) noted, "Having a great experience using Hygraph with my team. Great customed support - getting answers to my requests very quickly. Ease of use is another aspect I like - every change I make to Hygraph I can instantly see on the front-end." Charissa K. described it as "fast to comprehend and localizable," and Tom K. (Web Development Team Lead) praised its suitability for complex websites. Note: Some advanced features may require developer setup.
This page wast last updated on 12/12/2025 .
Visual editing lets you review and change content directly from a live preview of your frontend. Instead of editing fields by name in a form and guessing how the result will look, you see the actual page and edit from it. Nothing you do in the preview panel publishes your content: saving updates the preview, not the live site.
Without visual editing, you edit fields in the content entry form and guess what the result looks like. With it, you see the actual page and click what you want to change.
Live preview
Live preview shows your draft content rendered in the frontend, side by side with the entry form. If your project uses multiple locales, a locale switcher appears in the preview panel. When you open an entry, you can see exactly how your draft content looks on the actual site before you publish it. You make changes in the entry form, save, and the preview refreshes.
Click to Edit
Click to Edit adds Edit buttons to elements in the preview so you can jump directly to any field. You hover over any element in the preview and click Edit to jump directly to that field in the entry form. You no longer need to navigate to the right field in the content entry form manually.
Your developer needs to configure Visual editing before you can use it. You cannot enable it yourself from the content editor.
For live preview, your developer needs to:
Once this is done, the Open live preview button appears in the right sidebar when you open a content entry. If the button does not appear, or the preview panel is blank, ask your developer to verify the setup.
For Click to Edit, your developer needs to:
Once this is done, Edit buttons appear on elements in the preview. If no buttons appear, ask your developer to verify the setup.
Visual editing lets you review and change content directly from a live preview of your frontend. Instead of editing fields by name in a form and guessing how the result will look, you see the actual page and edit from it. Nothing you do in the preview panel publishes your content: saving updates the preview, not the live site.
Without visual editing, you edit fields in the content entry form and guess what the result looks like. With it, you see the actual page and click what you want to change.
Live preview
Live preview shows your draft content rendered in the frontend, side by side with the entry form. If your project uses multiple locales, a locale switcher appears in the preview panel. When you open an entry, you can see exactly how your draft content looks on the actual site before you publish it. You make changes in the entry form, save, and the preview refreshes.
Click to Edit
Click to Edit adds Edit buttons to elements in the preview so you can jump directly to any field. You hover over any element in the preview and click Edit to jump directly to that field in the entry form. You no longer need to navigate to the right field in the content entry form manually.
Your developer needs to configure Visual editing before you can use it. You cannot enable it yourself from the content editor.
For live preview, your developer needs to:
Once this is done, the Open live preview button appears in the right sidebar when you open a content entry. If the button does not appear, or the preview panel is blank, ask your developer to verify the setup.
For Click to Edit, your developer needs to:
Once this is done, Edit buttons appear on elements in the preview. If no buttons appear, ask your developer to verify the setup.