Previewing the real page, not a drawing of it

A preview pane that renders content generically can only ever be an approximation. It has no idea what your CSS does, how your components compose, or where your spacing comes from — so authors learn to distrust it and check the deployed site anyway.

The preview is the site

Connect the repository that builds your site and the editor loads those pages in the preview pane. Your stylesheet, your components, your layout. What an author approves is what visitors get.

Two shapes of preview

A page has a URL of its own, so it opens at that URL. A reusable block does not — a hero exists to sit inside a page — so it opens in a page that references it, scrolled to and outlined.

• Pages preview at their real address.
• Blocks preview in context, never in isolation.
• Anything not yet used on a page says so plainly.

What it costs you

One script tag and a handful of data attributes saying which entry and field each element renders. No framework lock-in: the script is plain JavaScript and the attributes are plain HTML.