Hooks API

Every hook must be called inside a <Blok> or <BlokStoreProvider>.

Document

useData()

Returns the current Data document.

const data = useData();

useConfig()

Returns the full Config (components, root, categories).

const config = useConfig();

useDirty()

true if the document has changed since the last successful save.

const dirty = useDirty();

Selection & editing

useSelection()

const { selectedId, select } = useSelection();
select("block-id");  // or select(null)

useEditing()

Returns the BlockInstance whose Edit form is currently open (null if none).

useDrillPath()

Breadcrumb path when drilled into an array item or slot. Empty array at the top level.

Viewport & panels

useViewport()

const { viewport, setViewport } = useViewport();
// viewport: "desktop" | "tablet" | "mobile" | "fullscreen"

useEditMode()

Visual vs. form-only mode.

useLeftPanel() / useRightPanel()

Which tab is active in the left / right rail.

const { panel, setPanel } = useLeftPanel();

History

useHistory()

const { canUndo, canRedo } = useHistory();

useClipboard()

const { copy, paste, hasContent } = useClipboard();

Actions

useActions()

One object with every document mutation:

const {
  addBlock,        // addBlock({ type, index, zone, props? })
  removeBlock,     // removeBlock(id)
  duplicateBlock,  // duplicateBlock(id)
  moveBlock,       // moveBlock(id, index, zone?)
  updateBlock,     // updateBlock(id, propsPatch)
  setRootProps,    // setRootProps(patch)
  undo,
  redo,
} = useActions();

Keyboard

useKeyboardShortcuts({ onSave })

Registers the full default set: ⌘S, ⌘Z, ⌘⇧Z, ⌘D, arrow nav, Delete, Esc.

useKeyboardShortcuts({ onSave: () => saveDraft(useData()) });

SEO

useSeoReadiness()

The live SEO readiness report for the current document.

const { score, issues } = useSeoReadiness();

Collaboration

useComments()

const { threads, createThread, replyTo, resolve } = useComments();

useCommentsForBlock(blockId)

Threads attached to a specific block.

useCommentsForField(blockId, fieldName)

Threads attached to a specific field.

useUnresolvedThreadCountForBlock(blockId) / useUnresolvedThreadCountForField(blockId, fieldName)

Badge numbers for the Layers tree and field rows.

useVersions()

const { versions, saveVersion, restoreVersion, diff } = useVersions();

useAuditLog()

const { events, append } = useAuditLog();

usePresence()

const { peers, myFocus, setFocus } = usePresence();

usePeersOnBlock(blockId)

Peers currently focused on the given block.

Permissions

useRole()

Returns "editor" | "reviewer" | "viewer".

useCan(action)

useCan("publish") // boolean

Settings

useAiSettings() / useModuleSettings() / useSettingsActions()

Read/write the user-scoped settings stored in localStorage.

Plugins

usePlugins()

The full BlokPlugin[] registered on the current editor.

usePluginFieldRenderer(type)

Look up a plugin-provided field renderer by type string. Returns null if none.

usePluginLeftPanels()

All plugin-contributed left-rail tabs, ordered.

AI

useAiProvider()

The AiCompletionProvider passed to <Blok> (or null).

useFieldAiActions(field, block) / useBlockAiActions(block)

The list of applicable AI actions for a given field or block.

Direct store access

For less common cases:

useBlokStore(selector)

Zustand-style selective subscription.

const count = useBlokStore((s) => s.data.content.length);

useBlokStoreApi()

The raw store API — useful for reading state inside callbacks.

const api = useBlokStoreApi();
const onClick = () => console.log(api.getState().data);