---
title: "Быстрый старт Blok — установка и первый редактор"
description: "Установите пакет, смонтируйте редактор и сохраните JSON. Готовые примеры для JavaScript, React, Vue и Angular."
source: https://blokeditor.com/ru/docs/quick-start/
lastmod: 2026-09-07
---

Фреймворк JavaScript

Начало работы Быстрый старт

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

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

Обновлено 30 июн. 2026 г. [Редактировать на GitHub](https://github.com/JackUait/blok/blob/main/docs/src/components/api/ApiSection.tsx)

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

1

### Установка Blok

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

yarn npm bun

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