Live preview for your website in four steps

Editors trust what they can see. A form full of fields tells them what a page contains, but not whether the heading wraps badly on a phone or the new image clashes with the one below it. That's why CMS Orbit shows your real website beside the editor, with the draft in place, and updates it as people type.

Setting it up takes four small pieces on your website. Here's what each one does.

How preview works

Beside the editor, CMS Orbit loads your website in a frame at the space's preview address, followed by the page's address and a preview token. Each token is for one page's draft and lasts an hour; the editor makes new ones as needed, so nobody handles them. Your website's job is to notice the token, switch to drafts and let the editor talk to the page.

The four pieces

1. A proxy

Any address with ?preview= goes to your preview route, keeping the page's address. Without it, the page opens normally and shows the published version.

2. A preview route

One line with the SDK: export const GET = createPreviewHandler({ client: cms }). It checks the token, turns on draft mode and sends the browser on to the page. An exit route turns draft mode off again.

3. Drafts on the page

While draft mode is on, your page reads content with preview: true, so it gets the draft instead of the published page.

4. The bridge

Add <CmsBridge client={cms} /> to your layout. It only renders in draft mode, and it lets editors click a block in the preview to select it in the editor. For that, give each component's outer element data-cms-id with the block's id. The header, footer and banner can carry data-cms-edit too, so hovering them offers a shortcut to the menu or settings they come from.

Show every keystroke

With the bridge alone, the preview reloads each time the editor saves, about a second after they stop typing. To show changes as they happen, render the page with CmsLivePage in a client component, or use the useLivePage hook for templates. The CMS sends each change as the delivery API would answer it, with images and links filled in, and your components render it straight away. Banners can preview the same way with useLiveBanners.

Not using React? The bridge gives the same changes to any framework through window.cmsOrbit.on('page', …).

Before editors use it

• Serve the preview over https: And allow the CMS, https://app.bifrostorbit.com, to show your website in a frame.
• Tell the CMS where it is: In the space's Settings, set the preview address and the device widths editors can switch between.
• Share it: Editors can copy a share link that opens the preview for someone without an account, such as a colleague who signs off copy.

Get started

Every file is in full in Preview in the docs, and the SDKs for PHP, Swift and Kotlin read drafts the same way. Start a 14-day free trial and connect your website.