Visual editor

Editors see your real website next to the form, update it live while they type, and click blocks to edit them.

1. In Settings → Preview, add your site's preview URL (e.g. https://www.example.com or http://localhost:4000).
2. Mark blocks: spread editable(block) (React), v-editable (Vue) or use:editable (Svelte) on each block's root element.
3. Use useLiveEntry / liveEntry so unsaved changes show up immediately.
4. Verify the editor ticket on your server and switch to draft content with a preview token:

import { verifyEditorTicket } from "@blokcms/client";

const editor = await verifyEditorTicket(request.url, process.env.BLOKCMS_PREVIEW_SECRET);
const client = editor
  ? blok.with({ token: PREVIEW_TOKEN, draft: !editor.release, release: editor.release ?? undefined })
  : blok;

The preview secret (Settings → Preview) signs short-lived tickets, so a leaked preview link stops working after a few minutes. The page runs inside an iframe: allow the admin origin in your frame-ancestors.

Not using a framework? Load https://docs.blokcms.app/bridge/v1.js and call BlokBridge.initBridge({ onUpdate }).