# Visual editing

Overview of Hygraph's visual editing tools — live preview and Click to Edit. Understand what each requires, how they build on each other, and where to start.

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 | Click to Edit     |
|--------------------------------------|--------------|-------------------|
| Requires Preview widget              | Yes          | Yes               |
| Requires Preview SDK                 | No           | Yes               |
| Requires data attributes on frontend | No           | Yes               |
| Editors see content in context       | Yes          | Yes               |
| Editors can jump to a specific field | No           | Yes               |
| Locale switcher in preview panel     | Optional     | Optional          |
| Works outside Studio (standalone)    | No           | Yes               |
| Real-time updates while typing       | No           | (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 preview](https://hygraph.com/images/docs/developer-guides/visual-editing-live-preview.png)

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](https://hygraph.com/docs/developer-guides/schema/live-preview).

## 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](https://hygraph.com/images/docs/developer-guides/visual-editing-click-to-edit.png)

For Click to Edit to work, you need to install the [Hygraph Preview SDK](https://github.com/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](https://hygraph.com/docs/developer-guides/schema/click-to-edit) and the [Next.js App Router implementation](https://hygraph.com/docs/developer-guides/schema/click-to-edit-next-js-app-router) and [Next.js Pages Router implementation](https://hygraph.com/docs/developer-guides/schema/click-to-edit-next-js-pages-router).

## Where to begin

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

1. [Live preview](https://hygraph.com/docs/developer-guides/schema/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](https://hygraph.com/docs/developer-guides/schema/click-to-edit): Install the Preview SDK and add data attributes to your frontend elements.
    - [Next.js App Router](https://hygraph.com/docs/developer-guides/schema/click-to-edit-next-js-app-router): Framework-specific implementation for Next.js App Router with code examples for simple fields and components.
    - [Next.js Pages Router](https://hygraph.com/docs/developer-guides/schema/click-to-edit-next-js-pages-router): Framework-specific implementation for Next.js Pages Router with code examples for simple fields and components.