Uniform Preview mode with App Router

Last updated: October 8, 2025

The workflow of the preview mode:

  1. Uniform.app loads previewUrl/api/preview?compositionId=xxx

  2. Preview handler enters draft mode and redirects to path for composition so app loads normally

  3. Page load detects in draft mode and fetches from either EDITOR or DRAFT state

  4. Connection is established between Uniform.app and Page

  5. Connection ready message specifies that the page is using RSC SDK

  6. When theres a change to Canvas composition, fully resolved composition is written to EDITOR state

  7. Message is sent from Canvas to preview that data has changed

  8. Router refresh is called which reloads the data on the page and you see current EDITOR state

Note 1: if #5 doesn't happen, EDITOR state will not get written/updated

Note 2: Depending on the size of the composition, the save operation may complete before the reload of your app has occurred. You will see previous data. A manual refresh will bring an up-to-date version of the preview.