# Preview release content

> Preview Uniform release content in the visual editor, share release-scoped previews with stakeholders, and integrate release-aware previews into custom frontends.

Source: https://docs.uniform.app/docs/guides/composition/releases/preview-release-content

Once a release is active, you can preview its content exactly as it will look after launch. Uniform forwards the current release context to your frontend preview, so compositions, entries, and patterns resolve to their release versions instead of the base state. This lets editors, reviewers, and stakeholders validate release content end-to-end before it is launched.

## Preview in the visual editor

If you are using the [visual editor](https://docs.uniform.app/docs/guides/composition/visual-editing/activate-visual-editing) to preview content in Uniform, the preview panel automatically respects the currently [active release](https://docs.uniform.app/docs/guides/composition/releases/manage-releases#activating-and-switching-between-releases) – no additional configuration is required. As soon as you activate a release, the preview reloads and the frontend serves the release version of any composition or entry it renders.

Switching the active release (for example, back to **Base** via the release switcher) immediately updates the preview, so you can compare different releases and verify that the release-only changes look correct in context.

## Release-aware preview URLs

When a release is active in the editor, Uniform appends a `releaseId` query parameter to the preview URL that it opens on your frontend, for example:

```text
https://your-site.com/preview?id=[!!! COMPOSITION ID !!!]&releaseId=[!!! UNIFORM RELEASE ID !!!]
```

If your frontend uses the Uniform Next.js SDKs, the preview handlers in [`@uniformdev/canvas-next`](https://sdk.uniform.app/canvas-next) and [`@uniformdev/canvas-next-rsc`](https://sdk.uniform.app/canvas-next-rsc) forward this `releaseId` to the page being rendered and the SDK automatically requests release-aware content. No extra wiring is required to make release previews work end-to-end.

If your frontend is not built with the Next.js SDKs, the preview URL still carries the same `releaseId` query parameter. You can read it in your own preview / draft handler and pass it to the Uniform client when fetching content – see [Preview release content with any frontend or external app](#preview-release-content-with-any-frontend-or-external-app) below.

> **Release previews are gated to preview mode:**
>
> The `releaseId` query parameter is only honored when the frontend is running in preview or draft mode. Requests made in production mode always return content from **Base**, so live visitors never see unreleased content.

> **Minimum SDK version:**
>
> Built-in release support in the preview handlers requires `@uniformdev/canvas-next` or `@uniformdev/canvas-next-rsc` **version 20.58.0 or later**. On older SDK versions the `releaseId` query parameter is not forwarded automatically and the preview falls back to **Base**.
>
> If you cannot upgrade, see the knowledge base article [How to create links to preview content for a specific Uniform release](https://docs.uniform.app/docs/knowledge-base/how-to-create-links-to-preview-content-for-a-specific) for snippets that wire `releaseId` through `withUniformGetStaticProps` (Page Router) or `retrieveRoute` (App Router).

## Share a release-scoped preview with stakeholders

Because the `releaseId` is carried on the preview URL, you can share the preview of a composition or an entry in a given release with people who do not have access to Uniform. Open the preview in a new browser tab from the editor, then copy its URL from the address bar – the `releaseId` query parameter is already present. Anyone who opens the link in a browser session that has preview / draft mode enabled on your frontend will see the release version of the content.

How preview / draft mode is enabled for a given session depends on your frontend setup. For details, see [Configure preview](https://docs.uniform.app/docs/guides/composition/visual-editing/preview-mode) and [Activate visual editing](https://docs.uniform.app/docs/guides/composition/visual-editing/activate-visual-editing).

## Preview release content with any frontend or external app

The built-in release forwarding described above is specific to the Uniform Next.js SDKs. For any other setup, you can still preview release content by passing the release ID directly to the Uniform client when you construct it. The release ID can come from any source you trust (a query string parameter, a server-side session, an environment variable in a preview build, etc.):

_For the US region:_

```jsx
import { CanvasClient } from '@uniformdev/canvas';

const client = new CanvasClient({
  apiKey: '[!!! UNIFORM API KEY !!!]',
  projectId: '[!!! UNIFORM PROJECT ID !!!]',
  releaseId: '[!!! UNIFORM RELEASE ID !!!]',
});

client.getCompositionList().then((result) => {
  const { compositions } = result;
});
```

_For the EU region:_

```jsx
import { CanvasClient } from '@uniformdev/canvas';

const client = new CanvasClient({
  apiHost: 'https://eu.uniform.app',
  edgeApiHost: 'https://eu.uniform.global',
  apiKey: '[!!! UNIFORM API KEY !!!]',
  projectId: '[!!! UNIFORM PROJECT ID !!!]',
  releaseId: '[!!! UNIFORM RELEASE ID !!!]',
});

client.getCompositionList().then((result) => {
  const { compositions } = result;
});
```

## See also

- Knowledge base: [How to create links to preview content for a specific Uniform release](https://docs.uniform.app/docs/knowledge-base/how-to-create-links-to-preview-content-for-a-specific) – snippets for wiring `releaseId` through `withUniformGetStaticProps` (Page Router) or `retrieveRoute` (App Router) when the built-in handler version is not available.
- [Webhooks and rebuilds](https://docs.uniform.app/docs/guides/composition/releases/webhooks-and-rebuilds) – ensure your production site rebuilds at the right moment when a release is launched.