Live preview loads your frontend in a side-by-side iframe inside Studio. Editors open any entry, click Open live preview, and see exactly how their unpublished changes look on the actual site, without leaving the entry form.

#Requirements

• Permanent Auth Token with DRAFT as the default stage
• A frontend URL serving content from the DRAFT stage

The preview refreshes when the editor saves the content entry. It does not update in real time as the editor types. Live preview is not compatible with native mobile applications. Requests made by the preview count against your project's rate limits.

#Add a preview widget

You need to configure the Preview widget once per content model.

1. In your Hygraph project, click Schema.
2. Select the model you want to enable preview for.
3. Click the Sidebar tab at the top of the screen.
4. Select the Preview widget from the right sidebar.
5. Complete the Preview name and URL template fields. See Define a preview URL template for how to build the URL.
6. Click Add.

If more than one preview URL is required, for example, a local development URL and a staging URL, click + Add to add additional URLs. Editors select between them using a dropdown in the content entry sidebar.

#Define a preview URL template

The URL template tells Studio how to construct the preview link for each entry. It uses your domain plus one or more field values from the content entry as identifiers.

Use curly brace notation to insert field values. As soon as you type { in the URL template field, Studio shows two groups of available tokens:

Available fields: These are the fields on your model. Default system fields available on every model are id, createdAt, updatedAt, publishedAt, and scheduledIn. Any custom fields you have added to the model, such as slug, also appear here.

Other placeholders: {locale} adds a locale selector to the preview. When your model has more than one locale configured, editors can switch between locales directly in the preview panel. Without it, the switcher does not appear even if your project has multiple locales configured.

Common patterns:

https://preview.your-domain.com/blog/{slug}
https://your-domain.com/{slug}?preview=true
https://preview.your-domain.com/posts/{id}
https://preview.your-domain.com/{locale}/posts/{slug}

Use {slug} when your frontend routes by slug. Use {id} when it routes by entry ID. You can combine multiple fields and placeholders in a single template if your URL structure requires it.

We recommend including a secret token in the URL that only your application and Hygraph know. This prevents the preview URL from being accessed directly without going through Studio.

https://your-domain.com/api/preview?secret=MY_SECRET_TOKEN&slug={slug}

#Add a Variants preview URL

If your model uses Variants, you can add one of the variant placeholders, such as ${variant.id}, {variant.segments[0].id}, or {variant.segments[*].id}, to your URL template. This lets Studio construct a preview URL that passes the variant or segment ID to your frontend. Editors can preview how content looks for a specific segment before publishing. Without a variant placeholder in the URL template, the variant or segment ID is not passed to the frontend and the preview shows the main entry content only.

You can combine variant placeholders with {locale} in the same URL template.

Ensure you have added the Preview widget and defined a base URL template before configuring Variants preview.

1. In your Hygraph project, click Schema and select the model.
2. Click the Sidebar tab.
3. Click Edit widget on the Preview widget.
4. Under Variant preview settings, complete the Preview name and URL template fields.
5. Click Update.

Supported URL template tokens for Variants:

Example URLs and what they resolve to:

{variant.segments[*].id} returns all segment IDs as a comma-separated list. Commas are URL-encoded as %2C. Your frontend interprets the query parameter and queries the API for the correct variant.

#Configure your frontend for DRAFT content

Your preview URL needs to serve content from Hygraph's DRAFT stage. There are two approaches.

Two-token strategy: Create one Permanent Auth Token with DRAFT as the default stage and use it in your preview environment. Create a second token with PUBLISHED as the default stage for production. Your application switches between them based on context.

To create a preview token:

1. Go to Project Settings > Access > Permanent Auth Tokens.
2. Click Add token and give it a name, for example, Preview token.
3. Set the default content stage to DRAFT.
4. Click Initialize default permissions on the token page.

Repeat the above steps for the PUBLISHED content stage for your production token.

Draft mode strategy: Use your framework's built-in preview or draft mode mechanism. The preview URL hits a route that sets a cookie or flag, which your application reads to switch from PUBLISHED to DRAFT queries. This is the recommended approach for Next.js.

See Frontend implementation for examples on retrieving DRAFT content in Next.js, Nuxt, and Astro.

#Verify the setup

1. Open an entry in Studio for the model you configured live preview.
2. In the right sidebar, click Open live preview. The preview should load alongside the entry form.
3. Make a change to a field and click Save & Preview. The preview should refresh and show your change.

If the preview panel is blank or shows an error, see the Troubleshooting section.

#Edit or delete a preview URL

1. Navigate to the Schema builder and select the model.
2. Next to the Preview widget, do one of the following:
   • To edit a preview URL, click the pencil icon, and update the Preview name or URL template fields.
   • To delete a preview URL, click the trash icon at the end of the row you want to remove.
3. Update the Preview name or URL template fields.
4. Click Update.

A preview widget needs to contain at least one URL. If you need to remove the only configured URL, delete the widget from the Sidebar tab instead. You can re-add the widget later if needed.

Delete the preview widget

Delete a preview widget

1. Navigate to the Schema builder.
2. Select the model that contains the preview widget that you want to delete.
3. Click on the context menu for the widget, and select Remove.

#Troubleshooting

#CSP or security header issues

Your site's security headers are blocking iframe embedding. Check your response headers:

1. Navigate to the Network tab in your browser console.
2. Search for the page you are trying to see.
3. Under the Headers subtab, click the Response Headers.
4. Determine whether the security configuration matches one of the options below:
   • If X-Frame-Options is set, remove it from your application.
   • If Content-Security-Policy is set, add frame-ancestors 'self' https://*.hygraph.com to the header value.

In case you are hosting on Vercel, go to Settings > Deployment Protection and disable Vercel Authentication. This removes the X-Frame-Options header. Disabling Vercel Authentication makes preview deployments publicly accessible.

#Stale data

Your frontend is serving the PUBLISHED stage in preview. Check that:

• Your preview token has DRAFT set as the default content stage.
• Your application is using the preview token, not the production token, when the preview URL is loaded.
• Your GraphQL queries are not hardcoding stage: PUBLISHED.
• You do not have a caching layer active in preview mode.

#No Open live preview button

The entry should have been saved at least once, that is, it should exist in the DRAFT stage. The button does not appear on unsaved entries.

#What's next

• Frontend implementation: Configure your Next.js, Nuxt, or Astro frontend to serve DRAFT content for live preview.
• Click to Edit setup: Learn how to install the Hygraph Preview SDK and configure Click to Edit so editors can jump from any preview element directly to the corresponding field in Hygraph Studio.