Product

Live preview

See drafts change on the actual site. Live preview updates alongside every edit, on your real front end — not a mockup.

npm create cairnRead the docs
0%

Draft content isolated from what visitors see

0

Front end — no separate preview app to build

0

Lines of code to wire up preview mode

0d

Default expiry on a shared preview link

Your real site, live

Preview inside the front end you already built

Live preview renders drafts through your actual application, not a generic content viewer — so what an editor sees while writing is exactly what will ship, styling and all.

  • Works with your existing front end, no rebuild required
  • Draft content resolves through the same API your site uses
  • Supports any framework that can read a preview token
app/page.tsx
const post = await cairn.posts.findOne({
  where: { slug },
  preview: draftMode().isEnabled,
})

Updates as you type

No refresh, no publish, no waiting

Edits stream to the preview as they're made. Editors see paragraph, image and layout changes reflected within moments, so review happens against the real page instead of a static draft.

  • Field-level updates push to preview in real time
  • Shareable preview links for stakeholder review
  • Draft state never touches published content
terminal
$ cairn preview link post/hello-world
✓ https://preview.cairn.dev/p/8f21ac (expires in 7d)

Built for review

Everything a review workflow needs

Real-time preview

Drafts render through your live front end, updating as changes are made.

Shareable links

Send a scoped preview link to anyone, without giving them editor access.

Isolated drafts

Preview content never leaks into what visitors to your live site see.

Preview your next edit live

Connect live preview to your front end in a few lines of code.

npm create cairnView docs