![\"Blok](\"./static/blok.png\")
\n \n\n \n \n \n
\n ![\"@bloklabs/core](\"https://img.shields.io/npm/v/%40bloklabs%2Fcore?style=flat-square&logo=npm&logoColor=white&label=%40bloklabs%2Fcore&color=CB3837\")
![\"@bloklabs/react](\"https://img.shields.io/npm/v/%40bloklabs%2Freact?style=flat-square&logo=npm&logoColor=white&label=%40bloklabs%2Freact&color=CB3837\")
![\"@bloklabs/vue](\"https://img.shields.io/npm/v/%40bloklabs%2Fvue?style=flat-square&logo=npm&logoColor=white&label=%40bloklabs%2Fvue&color=CB3837\")
![\"@bloklabs/angular](\"https://img.shields.io/npm/v/%40bloklabs%2Fangular?style=flat-square&logo=npm&logoColor=white&label=%40bloklabs%2Fangular&color=CB3837\")
![\"@bloklabs/presets](\"https://img.shields.io/npm/v/%40bloklabs%2Fpresets?style=flat-square&logo=npm&logoColor=white&label=%40bloklabs%2Fpresets&color=CB3837\")
![\"@bloklabs/cli](\"https://img.shields.io/npm/v/%40bloklabs%2Fcli?style=flat-square&logo=npm&logoColor=white&label=%40bloklabs%2Fcli&color=CB3837\")
![\"@bloklabs/server](\"https://img.shields.io/npm/v/%40bloklabs%2Fserver?style=flat-square&logo=npm&logoColor=white&label=%40bloklabs%2Fserver&color=CB3837\")
\n ![\"Blok.Server](\"https://img.shields.io/nuget/v/Blok.Server?style=flat-square&logo=nuget&logoColor=white&label=Blok.Server&color=004880\")
![\"Blok.Server.AspNetCore](\"https://img.shields.io/nuget/v/Blok.Server.AspNetCore?style=flat-square&logo=nuget&logoColor=white&label=Blok.Server.AspNetCore&color=004880\")
A block-based editor.
'\n```\n\n\n \n ![\"The](\"./static/editor-screenshot.png\")
\n \n
A block-based editor.
'\nblocksToPlainText(data); //=> 'Hello\\n\\nA block-based editor.'\n```\n\nShip `@bloklabs/core/view.css` alongside it to match the editor's own look, or style the output yourself.\n\n---\n\n## Styling and theming\n\nYou can customize Blok's chrome with public `--blok-*` CSS custom properties. Pass them as `style.tokens` in the constructor config, or swap them at runtime with `editor.tokens.set()`. They recolor popovers, surfaces, selection, headings, lists, and block rhythm. The full token list is in the [API reference](https://blokeditor.com).\n\nLayout hooks are CSS-only. The most commonly overridden one is the **editor gutter**. Blok reserves `--blok-editor-gutter-start: 56px` in edit mode for the floating +/⠿ block controls, and collapses it automatically in read-only mode. Don't hand-roll wrapper padding for those controls. To change or remove the gutter, declare the token on the wrapper element itself:\n\n```css\n[data-blok-interface] {\n --blok-editor-gutter-start: 0px; /* or any width; --blok-editor-gutter-end also exists */\n}\n```\n\nBlok declares its defaults at zero specificity via `:where()`, so any host declaration wins. The gutter tokens are state-dependent, so `style.tokens` / `tokens.set()` rejects them. Set them in CSS as above.\n\n---\n\n## Other entry points\n\n- **`@bloklabs/core/markdown`** — `markdownToBlocks(md)` imports Markdown (GFM, optional math) as Blok data.\n- **`@bloklabs/core/migrate`** — data migrations: upgrade your own block shapes between versions, and convert saved Editor.js documents to Blok's format.\n- **`@bloklabs/core/locales`** — locale data, if you'd rather load it yourself.\n- **`@bloklabs/core/icons`** — the editor's icon set as SVG strings.\n- **`npx migrate-from-editorjs`** — a codemod that rewrites Editor.js imports and config in your source.\n\n---\n\n## Documentation\n\nFull docs live at [blokeditor.com](https://blokeditor.com): API reference, an interactive demo, usage guides, and a migration guide if you're coming from Editor.js.\n\n## Community\n\nThere's a Telegram channel at [t.me/that_ai_guy](https://t.me/that_ai_guy) for updates and questions about Blok and related projects.\n\n## Contributing\n\nContributions are welcome — issues, discussions and pull requests alike. Read [CONTRIBUTING.md](./CONTRIBUTING.md) first. It covers how to propose a change before you build it, the code style, and what tests and docs a PR needs.\n\n```bash\nyarn install\nyarn serve # dev playground (add --no-server to skip the collaboration backend)\nyarn test # unit tests\nyarn lint # ESLint + TypeScript\n```\n\n## License and attribution\n\nBlok is licensed under the [Apache License 2.0](./LICENSE). See [NOTICE](./NOTICE) for attribution.\n\nBlok was forked from [Editor.js](https://github.com/codex-team/editor.js) by [CodeX](https://codex.so/) in November 2025 and reworked heavily since. The original Editor.js code remains © CodeX under Apache-2.0. Blok-specific changes are © JackUait, also under Apache-2.0.\n","readmeFilename":"README.md"}