Skip to main content

Enable Live Preview

The live preview allows you to preview the pre-published state of your composition and pull draft content from your Headless CMS of choice. The effort of enabling the preview feature is specific to the particular Front-end Framework (Next.js or Nuxt) and is described in the corresponding tutorials.

info

See Next.js tutorial here. The documentation for Nuxt is coming shortly.

Configuration

After the preview is enabled within your Next.js or Nuxt application, the preview URL must be configured within your project's Canvas Settings:

Preview settings

For Next.js, the Preview URL must start with /api/preview and contain a preview secret that matches the value used within your application. The live preview can run anywhere where your application can render (on your CDN or even locally). Uniform just needs that URL to be reachable for your users, so it can be opened when the Preview button is clicked on a composition.

https://localhost:3000/api/preview?secret=your-secret

The composition slug value and the compostion id will be passed via additional query string parameters to your app: Preview settings example

So the actual URL that will be opened will look like this:

https://localhost:3000/api/preview?secret=your-secret&slug=/your-composition-slig&id=your-composition-id

After this is enabled, you should see the Preview button within the Composition Editor: Preview button

Done!

If your web application is enabled for preview, you should be able to make edits to your compositions, save and see the changes reflect immediately without needing to do a manual refresh!