Quickstart

We’ll build a minimal editor page with one block type (a hero) and a save handler.

Prerequisites

A Next.js 14+ or 15+ app (App Router is easiest). If you don’t have one:
```
pnpm create next-app@latest my-cms
cd my-cms
```
Node 18+.

Install Blok


pnpm add @useblok/core

Import the stylesheet

app/layout.tsx


import "@useblok/core/styles.css";
 
export default function RootLayout({ children }) {
  return (
    <html lang="en">
      <body>{children}</body>
    </html>
  );
}

Create the editor page

app/editor/page.tsx


"use client";
 
import { Blok, type Config, type Data } from "@useblok/core";
 
const config: Config = {
  components: {
    Hero: {
      label: "Hero",
      description: "Big banner with a headline and subtitle.",
      accent: "#6366f1",
      fields: {
        title: { type: "text", label: "Title", required: true },
        subtitle: { type: "textarea", label: "Subtitle", rows: 3 },
      },
      defaultProps: { title: "Hello, world", subtitle: "" },
      render: ({ title, subtitle }) => (
        <section style={{ padding: 48, textAlign: "center" }}>
          <h1 style={{ fontSize: 48, margin: 0 }}>{title}</h1>
          {subtitle && <p style={{ opacity: 0.7 }}>{subtitle}</p>}
        </section>
      ),
      getSummary: (props) => props.title as string,
    },
  },
};
 
export default function EditorPage() {
  return (
    <Blok
      config={config}
      title="Landing page"
      onSave={async (data: Data) => {
        await fetch("/api/save", {
          method: "POST",
          body: JSON.stringify(data),
        });
      }}
    />
  );
}

Run


pnpm dev

Open http://localhost:3000/editor . You should see a full-screen editor. Click + on the canvas, pick the Hero block, and type into the inspector on the right.

The Blok component fills its container. By default, the page above is full-screen. Wrap it in a fixed-height container if you want something smaller.

What you just got

Drag-and-drop canvas — insert, move, nest, and delete blocks.
Auto-form inspector — fields render from your config; no form code needed.
Layers panel — hierarchical tree of the document.
Undo / redo — 100-step ring buffer, ⌘/Ctrl+Z.
Save shortcut — ⌘/Ctrl+S fires onSave with the current document.
Device viewports — preview at desktop / tablet / mobile / fullscreen.
SEO panel — live readiness check on the current document.

Pick where you want to go:

If you are…	Go to
A content editor, using Blok to build pages	For Editors
A developer integrating Blok into your app	For Developers → Blok component
Wiring up versions / comments / realtime	Advanced → Real-time bindings