Blok

A modern, open-source visual block editor for React — shipped as a single <Blok /> component. Drag-and-drop canvas, auto-generated forms, slots, keyboard shortcuts, undo/redo, and a layered panel UI. Plus: plugins, comments, versioning, audit log, permissions, presence, and AI authoring actions.

"use client";
import { Blok, type Config } from "@useblok/core";
import "@useblok/core/styles.css";
 
const config: Config = {
  components: {
    Hero: {
      label: "Hero",
      fields: {
        title: { type: "text", label: "Title", required: true },
        subtitle: { type: "textarea", label: "Subtitle", rows: 3 },
      },
      defaultProps: { title: "Hello", subtitle: "" },
      render: ({ title, subtitle }) => (
        <section>
          <h1>{title}</h1>
          <p>{subtitle}</p>
        </section>
      ),
    },
  },
};
 
export default function Page() {
  return <Blok config={config} onSave={(data) => console.log(data)} />;
}

That’s it. You now have a full-screen editor with a drag-and-drop canvas, a block library, an auto-form inspector, undo/redo, and keyboard shortcuts.

Where to go next

What’s in the box

• Canvas — Drag-and-drop authoring with device-framed viewports (desktop, tablet, mobile, fullscreen).
• Auto-forms — 12 field types generate an inspector from a plain config object.
• Slots — Blocks can contain other blocks, at any nesting depth.
• History — Undo / redo with a configurable ring buffer.
• Publishing — onSave, onPublish, onSchedulePublish, onUnpublish callbacks.
• Collaboration — Comments, versions, presence, audit log — all pluggable via bindings.
• Permissions — editor / reviewer / viewer roles with UI-side enforcement.
• Publish gates — SEO check is built-in; require resolved comments or custom gates.
• Plugins — Third-party blocks, custom field types, left-panel tabs, AI actions.
• AI actions — Field-level and block-level authoring with a pluggable completion provider.
• Migrations — Versioned schema evolution for block props.
• Headless — Use BlokStoreProvider + hooks to build a completely custom UI.

Package overview