---
title: "Blok — блочный редактор для React, Vue и Angular"
description: "Blok — headless блочный редактор текста для React, Vue и Angular: контент хранится как типизированный JSON, а не как HTML."
source: https://blokeditor.com/ru/
lastmod: 2026-09-07
---

# Создавайте красивые блочные редакторы

Готовый к production расширяемый редактор с блочным редактированием в стиле Notion. Настраиваемый, с поддержкой тем и проверенный в деле.

[Начать](https://blokeditor.com/ru/docs/) [Попробовать](https://blokeditor.com/ru/demo/)

## Для разработчиков, удобный для пользователей

Всё, что нужно для современного блочного редактора: чистый JSON, полная библиотека блоков и глубокий типизированный API.

### Типизированный JSON, не HTML

### Все блоки из коробки

### Свои блоки и инструменты

### Введите /, чтобы добавить что угодно

### Таблицы как в Excel

### Встраивание 100+ сервисов

### Бесконфликтная отмена и повтор

### 69 локалей и поддержка RTL

### Картинки, видео и аудио

## Встройте Blok в свой стек

Независимое от фреймворков ядро с полностью типизированным API, первоклассные адаптеры для React, Vue и Angular и CDN-скрипт без сборки. Выбирайте то, что подходит вашему проекту.

### Vanilla JS / TypeScript Ядро без привязки к фреймворку

Создавайте Blok на любом DOM-узле. Полностью типизировано, фреймворк не нужен.

JavaScript

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

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

### React Хук и компонент

Хук useBlok управляет жизненным циклом редактора, а <BlokContent> монтирует его. React 18 и 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 Композабл и компонент

Та же структура, что и в React: useBlok управляет редактором, а <BlokContent> монтирует его. 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 Standalone-компонент

Добавьте <blok-editor> и привяжите инструменты. Standalone-компонент, 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 Без сборщика

Подключите один тег script и используйте глобальный объект BlokEditor. Подходит для прототипов и страниц без сборки.

HTML

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

## Почему Blok лучше альтернатив

Другие редакторы дают минимальное ядро и список плагинов для установки. Blok из коробки приносит всё: типизированный JSON, полную библиотеку блоков и глубокий API.

| Возможность | Blok | Editor.js | TipTap | Lexical |
| --- | --- | --- | --- | --- |
| Формат вывода | Типизированный JSON | JSON | HTML / JSON | JSON |
| Всё — это блок |  | Плоский | Узлы | Узлы |
| Встроенные блоки | 20 встроенных | Только абзац | Только базовые | Примитивы |
| Поддержка Markdown | Встроен | Плагин | Дополнение | Дополнение |
| TypeScript в первую очередь |  |  |  |  |
| Адаптеры фреймворков | React / Vue / Angular | Силами сообщества | React / Vue / Svelte | React |
| i18n и RTL | 69 локалей | Вручную | Вручную | Вручную |
| Доступность | Встроен | Ограниченная | Своими силами | На первом месте |

## Компании, которые нам доверяют

Мировой лидер QSR

> Blok лежит в основе внутренней базы знаний одной из крупнейших пиццерийных сетей мира. Тысячи авторов, единая блочная модель.

[Начать с Blok](https://blokeditor.com/ru/demo/)

- 25+ Стран присутствия
- 1800+ Заведений по миру

### Внедряете Blok в команде?

Поможем настроить редактор и адаптировать его под ваши задачи.

[Написать в Telegram](https://t.me/jackuait) [Написать на почту](mailto:jackuait@gmail.com?subject=Blok%20for%20our%20team)

## Миграция с EditorJS

Уже используете EditorJS? Наш автоматический кодмод берёт на себя большую часть перехода — просто запустите, проверьте изменения и выпускайте.

[Руководство по миграции](https://blokeditor.com/ru/migration/) [Смотреть кодмод](https://github.com/jackuait/blok/tree/main/codemod)