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 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 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 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.