Skip to main content

Preview

Preview lets editors see drafts on the actual frontend, before publishing.

Preview keys​

Preview-type API keys read drafts in addition to published content. They're created the same way as delivery keys (Settings → API keys → New key, type "preview"), and presented via Authorization: Bearer … like any other key.

Pair with KriosClient's preview: true option:

const krios = new KriosClient({
  endpoint: process.env.KRIOS_ENDPOINT!,
  projectSlug: "demo",
  apiKey: process.env.KRIOS_PREVIEW_KEY!,
  preview: true,
});

Preview-mode responses set Cache-Control: private, no-store so they don't poison shared caches.

Signed tokens​

For one-shot preview links — when an editor clicks Preview on an entry — Krios signs a short-lived JWT (1 hour) bound to the specific (entry, locale) pair. The frontend doesn't need a long-lived preview key; it accepts the token in a query param, validates against the site's preview secret, and serves the draft.

Site-level config:

{
  "previewConfig": {
    "urlPattern": "https://staging.example.com/preview?token={token}&slug={slug}&locale={locale}",
    "secret": "32-byte-random-secret"
  }
}

Supported urlPattern placeholders: {hostname}, {token}, {slug}, {locale}. ({entryId} is not supported.)

Tokens are revocable by rotating the site's preview secret.

Click-to-edit overlay​

@krios/react ships KriosPreviewOverlay, a component that activates inspect-mode when the page loads in preview. Click anywhere on a Krios-managed element to jump back to the entry editor at the right field.

import { KriosPreviewOverlay } from "@krios/react";

export default function Page({ children }: { children: React.ReactNode }) {
  return (
    <>
      {children}
      {process.env.NEXT_PUBLIC_PREVIEW === "1" && <KriosPreviewOverlay />}
    </>
  );
}

The overlay reads data-krios-entry-id / data-krios-field attributes that the SDK adds to rendered entries when preview: true is set on the client. Wrap your renderers to forward these attributes onto the DOM.

Preview workflow in the admin UI​

  1. Editor saves a draft (no publish required).
  2. Clicks Preview in the entry editor header.
  3. Krios builds the preview URL using the site's previewConfig.urlPattern.
  4. Browser opens the URL. The frontend is responsible for reading the token and switching to preview mode.

If previewConfig is unset on the site, the Preview button is disabled and shows a tooltip: "Preview URL not configured for this site."