Click to Edit lets you click any element in the live preview to jump directly to that field in the entry form.

#Prerequisites

Click to Edit requires your developer to have installed the Hygraph Preview SDK and added the necessary markup to your frontend and configured a Preview widget and preview URL for your content model.

If you open a live preview and no Edit buttons appear anywhere in the preview, the SDK setup is incomplete. Ask your developer to verify the setup.

Edit buttons do not appear on every field. Developers choose which elements to configure as editable, such as titles, descriptions, hero images, and the blocks editors touch most. If a field you frequently update is missing a button, ask your developer to add it; the content entry form is always there as a fallback.

#Use Click to Edit in Studio

Studio loads the preview in a side-by-side panel alongside the entry form.

1. Open the content entry you want to edit.
2. In the right sidebar, click Open live preview. The preview loads next to the entry form.
3. Hover over an element in the preview. An Edit button appears on elements your developer has configured as editable.
4. Click Edit. Studio scrolls to and focuses the corresponding field in the entry form.
5. Make your changes to the field.
6. Click Save & Preview. The preview shows your saved content.

The preview holds your scroll position when it refreshes, so you stay oriented in the page as you edit.

#Use Click to Edit in standalone mode

If your developer has configured standalone mode, the Edit buttons appear directly on your preview site in a regular browser tab, outside Studio. Clicking Edit navigates you to the correct field in Studio without any risk of affecting other entries or content.

1. Open your preview site in a browser.
2. Hover over an element. An Edit button appears on elements your developer has configured as editable.
3. Click Edit. Studio opens in a new tab and takes you directly to the field.
4. Make your changes to the field.
5. Click Save & Preview.
6. Go back to the preview and check your changes. The preview shows your saved content.

#Click to edit for locales

Clicking Edit while previewing a locale opens the correct field in Studio in the default locale. Select your target locale field manually after the field opens.

After you open live preview, follow these steps to edit the field for the target locale:

1. Use the locale switcher in the preview panelto open the preview for the target locale.
2. Hover over an element. An Edit button appears on elements your developer has configured as editable.
3. Click Edit. You are taken to the field for the default locale.
4. Select the target locale field that you want to edit. Locale fields appear below the default locale field.
5. Make your changes.
6. Click Save & Preview. The preview shows your saved content.

#Troubleshooting

#Edit buttons do not appear

The Preview SDK is not installed or is not wrapping your page content correctly. Ask your developer to verify the setup.

#Edit button appears but nothing happens when clicked

Check that your browser is not blocking new tabs. In standalone mode, Studio opens in a separate tab. Confirm your browser allows this from your preview site.

#Preview does not refresh after saving

Confirm you used Save & Preview instead of Save. If the preview still does not update, ask your developer to check the save callback configuration.

#Preview panel is blank or shows a security error

Your site is blocking iframe embedding. This is a server configuration issue, not a content issue. Ask your developer to check the X-Frame-Options and Content-Security-Policy headers on your frontend.

#What's next

• Live preview: How the side-by-side preview panel works and how to save and refresh correctly.
• Edit content: How to edit fields directly in the entry form.
• Content stages: The difference between Draft and Published and what Save & Preview does to your content.