`<Blok />` component

The single entry point for the editor.


import { Blok, type Config, type Data } from "@useblok/core";
import "@useblok/core/styles.css";
 
<Blok config={config} data={initialData} onSave={handleSave} />

Blok is a client component. It wraps the rest of the editor in its providers (store, plugins, AI, versions, comments, audit, presence, permissions, publish gates) and mounts the top bar, rails, and canvas.

Props

Core

Prop	Type	Default	Description
`config`	`Config`	—	Required. Component library, root, categories.
`data`	`Data`	empty document	Initial document. Treated as the initial state — don’t drive it as a controlled prop.
`historyLimit`	`number`	`100`	Undo ring-buffer size.

Chrome

Prop	Type	Description
`title`	`string`	Shown in the top bar.
`slug`	`string`	Shown under the title.
`previewUrl`	`string`	Preview icon in the viewport bar.
`publishedUrl`	`string`	URL opened by “Open Published”.
`publishedData`	`Data`	Enables the “Published JSON” menu item.
`templatesUrl`	`string`	Shows a “Templates” link in the top bar.

Save & publish

Prop	Type	Description
`onSave`	`(data: Data) => void`	Fired by ⌘/Ctrl+S or the Save button.
`onPublish`	`(data: Data) => void`	Fired by the Publish button.
`onSchedulePublish`	`(data: Data) => void`	Fired by Publish → Schedule.
`onUnpublish`	`() => void`	Fired by Publish → Unpublish.

Plugins

Prop	Type	Description
`plugins`	`BlokPlugin[]`	See Plugin API.

AI

Prop	Type	Description
`aiProvider`	`AiCompletionProvider \| null`	Completion backend (OpenAI proxy, mock, etc).
`aiActions`	`AiAction[]`	Extra actions registered outside of plugins.

Collaboration bindings

Prop	Type	Description
`versions`	`VersionsBinding \| null`	Enables the Versions modal.
`comments`	`CommentsBinding \| null`	Enables the Comments panel.
`commentAuthor`	`CommentAuthor`	Identity used when posting comments.
`audit`	`AuditBinding \| null`	Enables the Audit log modal.
`auditActor`	`AuditActor`	Actor stamped on emitted audit events.
`presence`	`PresenceBinding \| null`	Enables the peer-presence avatars.
`presenceIdentity`	`PresenceIdentity`	Identity announced to peers.

See Real-time bindings for how to build or import bindings (the @useblok/sdk package ships ready-made ones).

Access control

Prop	Type	Default	Description
`role`	`"editor" \| "reviewer" \| "viewer"`	`"editor"`	Session role. UI-side only — enforce server-side too.
`publishGates`	`PublishGatesConfig`	—	Pre-publish validation. See permissions.

Minimal


<Blok config={config} />

Common


<Blok
  config={config}
  data={initialData}
  title="Landing page"
  slug="marketing/home"
  previewUrl="/preview?slug=home"
  role={currentUser.role}
  onSave={handleSave}
  onPublish={handlePublish}
/>

With collaboration


import { useBlokDocument } from "@useblok/sdk";
 
function EditorPage() {
  const doc = useBlokDocument({ adapter, documentId });
  return (
    <Blok
      config={config}
      data={doc.initialData}
      versions={doc.versions}
      comments={doc.comments}
      presence={doc.presence}
      audit={doc.audit}
      commentAuthor={currentUser}
      onSave={doc.save}
      onPublish={doc.publish}
    />
  );
}

See Real-time bindings for the full SDK flow.

<Blok /> component