FrameworkJavaScript

Get started with Blok in five minutes

Get up and running with Blok in just a few simple steps.

Last updated Jun 30, 2026Edit this page on GitHub

This is the fastest path from an empty project to a working editor — install the package, mount it, and save your first block of content.

Install Blok

Add Blok to your project using your favorite package manager.

yarn add @bloklabs/core

Import and configure

Import the editor and tools, then configure your block types.

HTML

<div id="editor"></div>

TypeScript

import { Blok } from '@bloklabs/core';
import { Header, Paragraph, List } from '@bloklabs/core/tools';

const editor = new Blok({
  holder: 'editor',
  tools: {
    paragraph: Paragraph,
    header: { class: Header, placeholder: 'Enter a heading' },
    list: List,
  },
});

Save content

Extract clean JSON data ready to save anywhere.

TypeScript

await editor.isReady;

const data = await editor.save();
console.log(data.blocks);

If everything worked, you should now see an empty editor with one paragraph block, ready to type into.

Nothing rendering, or a crash in the console? The most common cause is a missing container: new Blok({ holder: 'editor' }) needs a <div id="editor"></div> already on the page, or it throws element with ID «editor» is missing.