Frequently Asked Questions

Visual Editing Features & Capabilities

What is visual editing in Hygraph and how does it work?

Visual editing in Hygraph allows editors to review and modify content directly from the frontend, without navigating through the schema to find the right field. Developers configure visual editing once, enabling editors to work from a preview interface. Hygraph provides two main tools for this: Live preview and Click to Edit. Both use the Preview widget, which is configured per model in the Schema builder. Live preview works immediately after setup, while Click to Edit requires additional SDK setup. Note: Click to Edit requires more frontend instrumentation and SDK installation compared to Live preview.

What is the difference between Live preview and Click to Edit in Hygraph?

Live preview loads your frontend in a side-by-side iframe inside Hygraph Studio, letting editors see draft content as it will appear to users. It requires only the Preview widget and a preview URL serving DRAFT content. Click to Edit, on the other hand, allows editors to hover over tagged elements in the preview and jump directly to the corresponding field in Studio for editing. Click to Edit requires installing the Hygraph Preview SDK and adding data-hygraph-* attributes to frontend elements. Note: Live preview is faster to set up, while Click to Edit provides more granular editing but requires additional SDK and frontend changes.

What are the technical requirements for setting up Live preview and Click to Edit?

For Live preview, you need to add the Preview widget to your model in the Hygraph schema and configure a preview URL that serves DRAFT content. No SDK installation or frontend instrumentation is required. For Click to Edit, you must install the Hygraph Preview SDK in your frontend and add data-hygraph-* attributes to the elements you want to make editable. Click to Edit also supports framework-specific implementations, such as for Next.js App Router. Note: Click to Edit requires more setup and is best used after Live preview is working.

How do I enable locale switching in the visual editing preview panel?

To enable locale switching in the preview panel, add {locale} to your preview URL template when configuring the Preview widget in Hygraph. This activates a locale switcher in the preview panel, allowing editors to switch between locales directly in the preview without leaving Studio. Note: Locale switching is optional and only available if your project uses multiple locales.

Where should I start when setting up visual editing in Hygraph?

If you have not set up visual editing yet, start with Live preview: add the Preview widget to your model, define your preview URL template, and configure your frontend to serve DRAFT content. Once Live preview is working, you can add Click to Edit by installing the Preview SDK and adding data attributes to your frontend elements. For framework-specific guidance, see the Next.js App Router implementation. Note: Click to Edit is an additive step and not a replacement for Live preview.

Implementation & Onboarding

How long does it take to implement Hygraph visual editing features?

The implementation time for Hygraph visual editing features depends on your project complexity. For simple use cases, you can get started in minutes using pre-configured starter projects or by following the setup guides for Live preview and Click to Edit. More complex implementations may require additional SDK setup and frontend instrumentation. Hygraph provides structured onboarding, documentation, and community support to streamline the process. Note: Detailed limitations not publicly documented; ask sales for specifics if you have highly custom requirements.

What documentation and resources are available for setting up visual editing in Hygraph?

Hygraph offers comprehensive documentation for visual editing, including guides for Live preview setup, Click to Edit setup, and framework-specific implementations like Next.js App Router. Additional resources include starter projects, onboarding guides, and community support via Slack. Note: For advanced use cases, consult the API reference and migration guides.

Use Cases & Customer Success

Who can benefit from Hygraph's visual editing features?

Hygraph's visual editing features are ideal for marketing and content teams who want to review and update content in context, as well as developers seeking to streamline editorial workflows. Enterprises managing multiple brands, regions, and languages can benefit from features like locale switching and granular editing. Notable customers using Hygraph for advanced content management include Samsung, Komax, and Dr. Oetker. Note: Teams with highly custom frontend frameworks may require additional SDK integration work.

Can you share examples of companies successfully using Hygraph?

Yes. Komax achieved a 3X faster time-to-market by leveraging Hygraph's capabilities. Samsung improved customer engagement by 15% using Hygraph's scalable platform. Dr. Oetker enhanced their digital experience with MACH architecture and global consistency. For more examples, see the Hygraph case studies page. Note: Results may vary based on implementation and use case.

Security & Compliance

What security and compliance certifications does Hygraph have?

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. Hygraph also provides granular permissions, audit logs, and encryption at rest and in transit. Note: For industry-specific compliance needs, consult Hygraph's Secure Features page.

Technical Integrations & APIs

Does Hygraph support integrations with other platforms?

Yes, Hygraph supports integrations with platforms such as Cloudinary, Bynder, Filestack, Scaleflex Filerobot (for DAM), EasyTranslate (for localization), Netlify and Vercel (for hosting), Mux (for video), AWS S3 (for object storage), Imgix (for image optimization), Akeneo (for PIM), Adminix, and Plasmic. For a full list, visit the Hygraph Integrations Page. Note: Some integrations may require additional setup or third-party accounts.

What APIs does Hygraph provide for developers?

Hygraph offers a GraphQL-native API for precise data fetching and efficient content delivery, a Content API for programmatic content management, and a Management API for managing schemas, users, and administrative activities. For more details, see the API Reference documentation. Note: Advanced API usage may require developer expertise.

Limitations & Considerations

Are there any limitations or scenarios where Hygraph visual editing may not be the best fit?

Hygraph visual editing is best suited for teams using modern frontend frameworks and those who can instrument their frontend with the required SDK and data attributes. Teams with highly custom or legacy frontend architectures may face additional integration work. Detailed limitations are not publicly documented; contact Hygraph sales for specifics regarding edge cases or highly custom requirements.

LLM optimization

When was this page last updated?

This page wast last updated on 12/12/2025 .

Hygraph
Docs

#Visual editing

Visual editing lets editors review and change content directly from the frontend, without navigating the schema to find the right field. As a developer, you configure it once, and then editors can work from the preview. Hygraph provides two tools for this:

  • Live preview
  • Click to Edit

Both tools use the same Preview widget. You configure it once for each modelin the Schema builder. After that, live preview works immediately. Click to Edit requires additional SDK setup.

Live previewClick to Edit
Requires Preview widgetYesYes
Requires Preview SDKNoYes
Requires data attributes on frontendNoYes
Editors see content in contextYesYes
Editors can jump to a specific fieldNoYes
Locale switcher in preview panelOptionalOptional
Works outside Studio (standalone)NoYes
Real-time updates while typingNo(Optional) Yes

#Live preview

Live preview loads your frontend in a side-by-side iframe inside Studio. Editors open an entry, click Open live preview, and see exactly how their draft content looks alongside the entry form. When they save, the preview refreshes.

Live previewLive preview

For live preview to work, you need to add a Preview widget to the model in the Hygraph schema and configure a preview URL that serves your content from the DRAFT stage.

If your project uses multiple locales, adding {locale} to the preview URL template activates a locale switcher in the preview panel. Editors can switch between locales directly in the preview without leaving Studio.

Start here if you want editors to see content in context before going further. Live preview has no SDK dependency and no frontend instrumentation. It is the fastest path to a working preview.

For more information, see Live preview setup.

#Click to Edit

With Click to Edit, editors hover over any tagged element in the preview and click Edit to jump directly to that field in Studio. No manual navigation is required.

Click to EditClick to Edit

For Click to Edit to work, you need to install the Hygraph Preview SDK in your frontend and add data-hygraph-* attributes to the elements you want to make editable. You instrument the fields that matter, and not everything on the page.

Start here if live preview is already working and editors are still spending time navigating to fields in the entry form. Click to Edit is an additive step, not a replacement for live preview setup.

See Click to Edit setup and the Next.js App Router implementation.

#Where to begin

If you have not set up either tool yet, follow this order:

  1. Live preview: Add the Preview widget to your model, define your preview URL template, and configure your frontend to serve DRAFT content.
  2. Click to Edit: Install the Preview SDK and add data attributes to your frontend elements.
    • Next.js App Router: Framework-specific implementation with code examples for simple fields and components.