Preview

Developer preview

This feature is in developer preview. Use with caution as it may change unexpectedly. For more information, contact us.

Developer Preview

This page documents the developer preview of the SDK, version 20.81.1-alpha.25.sha-f076f9b857.

The preview handler (GET /api/preview) connects Canvas to your app:

  1. Canvas opens /api/preview?secret=…&path=… in the preview panel.
  2. The handler checks the secret against UNIFORM_PREVIEW_SECRET, and enables Next.js draft mode.
  3. The handler redirects to the page with a 307 redirect.
  4. The middleware sees draft mode, and writes the draft state into the code. When the URL has is_incontext_editing_mode, it writes the editor state.
  5. The page renders draft content and adds the visual editing script. In the editor state, it also adds the editing markers.

Draft requests do not use edge mode. The browser chooses the personalization and test variants.

By default, the handler redirects to the path of the project map node. If the composition has no node, it uses the slug. Use resolveFullPath when your URLs are different from the project map paths:

app/api/preview/route.ts

export const GET = createPreviewGETRouteHandler({ // Canvas sends the project map path (/en-US/…); the site uses /en/… resolveFullPath: ({ path, slug, id, locale }) => (path ?? slug)?.replace(/^\/en-US(\/|$)/, "/en$1"), });

The handler does not add the locale to the redirect URL of a composition. If your route uses the locale, put it into the path in resolveFullPath.

When Canvas shows a pattern, the handler redirects to playgroundPath with the id of the pattern. The middleware then rewrites the request to ${playgroundPath}/[code].

warning

The middleware finds a pattern preview only when the path is the same as playgroundPath. If processPlaygroundPath of the preview handler changes the path, for example to add a locale, the middleware does not find the pattern preview. Then the preview gives a 404.

Open /api/preview?disable=true&path=/about to turn off draft mode and go to /about.

Last modified
Next
Caching