---
title: "Blok Quick Start — Install & Render an Editor"
description: "Install the package, mount an editor, and save JSON output. Copy-paste setup for JavaScript, React, Vue, and Angular."
source: https://blokeditor.com/docs/quick-start/
lastmod: 2026-08-02
---

Framework JavaScript

Getting started Quick Start

# Get started with Blok in five minutes

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

Last updated Jun 30, 2026 [Edit this page on GitHub](https://github.com/JackUait/blok/blob/main/docs/src/components/api/ApiSection.tsx)

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.

1

### Install Blok

Add Blok to your project using your favorite package manager.

yarn npm bun

```
yarn add @bloklabs/core
```

2

### 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,
  },
});
```

3

### 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`.