@useblok/sdk

Pluggable persistence, AI, comments, versions, audit, and presence for Blok — swap the storage layer without touching the editor.

Install

npm install @useblok/sdk @useblok/core

Quickstart

import { Blok } from "@useblok/core";
import { createLocalStorageAdapter, useBlokDocument } from "@useblok/sdk";

const storage = createLocalStorageAdapter();

function Editor({ id }: { id: string }) {
  const { data, loading, handleSave } = useBlokDocument(storage, id);
  if (loading) return null;
  return <Blok config={config} data={data ?? undefined} onSave={handleSave} />;
}

Adapters

| Factory | Use case | | ------------------------------- | ----------------------------------------- | | createLocalStorageAdapter() | Browser-only, no backend. | | createRestAdapter({ baseUrl })| Any REST API (GET/PUT/DELETE per id). |

Roll your own by implementing BlokStorageAdapter — four async methods.

Hook

useBlokDocument(adapter, id, options?) handles:

• Loading on mount and when the id changes
• Debounced auto-save (default 800ms) — wire directly to <Blok onSave>
• dirty, saving, and lastSavedAt flags for UI affordances
• Manual save() and reload() escape hatches
• Error surfacing via onError or the returned error field