Skip to content
ФреймворкJavaScript

Запустите Blok за пять минут

Начните работу с Blok за несколько простых шагов.

Обновлено 30 июн. 2026 г.Редактировать на GitHub

Это самый быстрый путь от пустого проекта до работающего редактора — установите пакет, подключите его и сохраните первый блок контента.

1

Установка Blok

Добавьте Blok в свой проект с помощью любимого менеджера пакетов.

yarn add @bloklabs/core
2

Импорт и настройка

Импортируйте редактор и инструменты, затем настройте типы блоков.

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

Сохранение контента

Получайте JSON-данные для сохранения.

TypeScript
await editor.isReady;

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

Если всё сработало, вы увидите пустой редактор с одним абзацем — готовым, чтобы начать печатать.

Ничего не отображается или в консоли ошибка? Чаще всего причина — отсутствующий контейнер: new Blok({ holder: 'editor' }) ожидает, что на странице уже есть <div id="editor"></div>, иначе выбрасывается ошибка element with ID «editor» is missing.