Skip to content

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

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

H1
1234

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

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

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

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

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

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

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

Хук 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} />;
}

Та же структура, что и в React: useBlok управляет редактором, а <BlokContent> монтирует его. Vue 3.

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>

Добавьте <blok-editor> и привяжите инструменты. Standalone-компонент, Angular 20+.

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;
}

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

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

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

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

ВозможностьBlokEditor.jsTipTapLexical
Формат выводаTyped JSONJSONHTML / JSONJSON
Всё — это блокFlatNodesNodes
Встроенные блоки19 built-inParagraph onlyBasics onlyPrimitives
Поддержка MarkdownBuilt-inPluginAdd-onAdd-on
TypeScript в первую очередь
Адаптеры фреймворковReact / Vue / AngularCommunityReact / Vue / SvelteReact
i18n и RTL69 localesManualManualManual
ДоступностьBuilt-inLimitedDIYFirst-class

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

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

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

Начать с Blok
  • 25+Стран присутствия
  • 1800+Заведений по миру

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

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

Написать в TelegramНаписать на почту

Миграция с EditorJS

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

Руководство по миграцииСмотреть кодмод