---
title: "Blok — Headless Block-Based Rich Text Editor"
description: "Blok is a headless block-based rich text editor for React, Vue, and Angular that stores content as typed JSON instead of HTML."
source: https://blokeditor.com/
lastmod: 2026-08-07
---

# Build beautiful block-based editors

A production-ready, extensible rich text editor that brings Notion-like block-based editing to your app. Customizable, themeable, and battle-tested.

[Get Started](https://blokeditor.com/docs) [Try it out](https://blokeditor.com/demo)

[H1 1 2 3 4](https://blokeditor.com/demo)

## Built for developers, designed for users

Everything you need to ship a modern block editor: clean JSON, a full block library, and a deep, typed API.

### Typed JSON, never HTML

### Every block, built in

### Bring your own blocks

### Type / to add anything

### Spreadsheet-grade tables

### Embed 100+ services

### Conflict-free undo & redo

### 69 locales, RTL-ready

### Image, video & audio

## Drop Blok into your stack

A framework-agnostic core with a fully typed API, first-class React, Vue, and Angular adapters, and a zero-build CDN script. Pick whichever fits your project.

### Vanilla JS / TypeScript Framework-agnostic core

Point Blok at any DOM node and go. Fully typed, no framework needed.

JavaScript

```
import { Blok, defaultTools } from '@bloklabs/core/full';

new Blok({
  holder: 'editor',
  tools: defaultTools,
});
```

### React A hook and a component

The useBlok hook owns the editor lifecycle; <BlokContent> mounts it. React 18 and 19.

JSX

```
import { useBlok, BlokContent } from '@bloklabs/react';
import { defaultTools } from '@bloklabs/core/full';

function Editor() {
  const editor = useBlok({ tools: defaultTools });
  return <BlokContent editor={editor} />;
}
```

### Vue A composable and a component

Same shape as React: useBlok drives the editor, <BlokContent> mounts it. Vue 3.5+.

Vue

```
<script setup>
import { useBlok, BlokContent } from '@bloklabs/vue';
import { defaultTools } from '@bloklabs/core/full';

const editor = useBlok({ tools: defaultTools });
</script>

<template>
  <BlokContent :editor="editor" />
</template>
```

### Angular A standalone component

Add <blok-editor> and bind your tools. Standalone component, Angular 20–22.

TypeScript

```
import { Component } from '@angular/core';
import { BlokEditorComponent } from '@bloklabs/angular';
import { defaultTools } from '@bloklabs/core/full';

@Component({
  selector: 'app-editor',
  standalone: true,
  imports: [BlokEditorComponent],
  template: `<blok-editor [tools]="tools" />`,
})
export class EditorComponent {
  tools = defaultTools;
}
```

### CDN No bundler required

Add one script tag and use the BlokEditor global. Good for prototypes and no-build pages.

HTML

```
<div id="editor"></div>
<script src="https://unpkg.com/@bloklabs/core@1.10.0/dist/blok.iife.js"></script>
<script>
  new BlokEditor.Blok({
    holder: 'editor',
    tools: BlokEditor.defaultTools,
  });
</script>
```

## Why Blok over the alternatives

Most editors hand you a bare core and a long plugin shopping list. Blok comes with the batteries included: typed JSON output, a full block library, and a deep API, all working out of the box.

| Capability | Blok | Editor.js | TipTap | Lexical |
| --- | --- | --- | --- | --- |
| Output format | Typed JSON | JSON | HTML / JSON | JSON |
| Everything is a block |  | Flat | Nodes | Nodes |
| Built-in blocks | 20 built-in | Paragraph only | Basics only | Primitives |
| Markdown support | Built-in | Plugin | Add-on | Add-on |
| TypeScript-first |  |  |  |  |
| Framework adapters | React / Vue / Angular | Community | React / Vue / Svelte | React |
| i18n & RTL | 69 locales | Manual | Manual | Manual |
| Accessibility | Built-in | Limited | DIY | First-class |

## Companies that trust us

Global QSR leader

> Blok powers the internal knowledge base behind one of the world's largest pizza chains. Thousands of authors, one block model.

[Build with Blok](https://blokeditor.com/demo)

- 25+ Countries served
- 1,800+ Stores worldwide

### Bringing Blok to your team?

We'll help you set it up and adapt it to exactly what you need.

[Chat on Telegram](https://t.me/jackuait) [Email us](mailto:jackuait@gmail.com?subject=Blok%20for%20our%20team)

## Migrate from EditorJS

Already using EditorJS? Our automated codemod handles most of the transition — just run it, review the changes, and ship.

[View Migration Guide](https://blokeditor.com/migration) [View Codemod](https://github.com/jackuait/blok/tree/main/codemod)