estøkad

Visual edit

Click a field in the rendered preview, edit it inline, see the structured field on the left of the Studio update. The overlay protocol works with any framework that can render a server-side preview against the Estokad API.

How it works

Three actors coordinate:

  • The Studio opens an iframe to your preview URL with a short-lived preview token.
  • The overlay script (apps/overlay, served from cdn.estokad.com/overlay.js) injects into the preview, listens for clicks on data-attributed elements, and posts edit events back to the Studio over postMessage.
  • The framework adapter (@estokad/next, @estokad/nuxt, @estokad/svelte) auto-tags rendered components with the data-estokad-* attributes the overlay reads.

The auto-tagging is build-time. You write your preview pages as normal SSR components fetching from the SDK; the adapter rewrites them to attach the data attributes.

Setup

In a Next.js app:

pnpm add @estokad/next

In app/preview/[...slug]/page.tsx:

import { draftMode } from 'next/headers'
import { getEstokad, withVisualEdit } from '@estokad/next'

export default withVisualEdit(async function PreviewPage({ params }) {
  const { isEnabled } = await draftMode()
  if (!isEnabled) {
    return <p>Open from the Studio's preview button.</p>
  }
  const cms = getEstokad({ draft: true })
  const { slug } = await params
  const article = await cms.entry('article', slug.join('/')).fetch()
  return (
    <article>
      <h1>{article.title}</h1>
      <div>{article.body}</div>
    </article>
  )
})

withVisualEdit does two things: it injects the overlay script tag in dev/preview builds, and it wraps every JSX element with the data attributes that point back to the source content type and field.

Preview tokens

Every iframe embed signs a short-lived JWT scoped to one entry (or one preview path). The token expires after ten minutes and is bound to the user's session in the Studio. Mint tokens via /v1/<workspace>/management/preview-tokens if you need to embed previews in your own tooling.

Configuring per-space preview URLs

The Studio asks each space for its preview URL once, in /settings/spaces. You can use template tokens:

https://staging.your-site.com/preview/{type}/{slug}?lang={locale}

The placeholders are filled per-entry on the server side before the iframe opens.

What it does not do

The overlay does not let editors arrange page layout, drag widgets, or compose stories. Estokad is headless — pages are composed via references, not free-form blocks. The overlay edits content, not layout. If a customer asks for layout-builder features, they want Storyblok, not Estokad.