--- title: "Blok Docs — Block Editor for React, Vue & Angular" description: "Guides, API reference, and 35 built-in block and inline tools for Blok. Start in five minutes." source: https://blokeditor.com/docs/ lastmod: 2026-10-06 --- Framework JavaScript Select section # Blok documentation Guides, the full API reference, and every built-in block and inline tool. New here? Start with the quick start and have an editor running in five minutes. ## Getting started - [Quick Start Get up and running with Blok in a few steps.](https://blokeditor.com/docs/quick-start/) - [Build your first editor Mount an editor, write some content, and save it as JSON you can load back.](https://blokeditor.com/docs/tutorial/) - [Everything is a block The one idea behind Blok: every piece of content is a block.](https://blokeditor.com/docs/concepts/) - [Create a custom block tool Build a callout block from scratch that renders, edits, and saves like a built-in one.](https://blokeditor.com/docs/custom-block-tool/) - [Tab sync Keep one document live across the tabs of one browser, with no server.](https://blokeditor.com/docs/tab-sync/) ## Core - [Blok Class The main editor class that creates an instance and exposes every API namespace.](https://blokeditor.com/docs/core/) - [Configuration Every option you can pass to the Blok constructor, and which ones can change live.](https://blokeditor.com/docs/config/) - [Blocks Create, delete, update, and reorder blocks in the editor.](https://blokeditor.com/docs/blocks-api/) - [BlockAPI Work with a single block returned by the Blocks API.](https://blokeditor.com/docs/block-api/) - [Saver Save and export editor content.](https://blokeditor.com/docs/saver-api/) - [View renderer Render saved documents to HTML or plain text without loading an editor.](https://blokeditor.com/docs/view-api/) ## Editing - [Caret Move the cursor and control where it sits inside the editor.](https://blokeditor.com/docs/caret-api/) - [Selection Work with text selection inside the editor.](https://blokeditor.com/docs/selection-api/) - [Marks Apply and remove inline marks across a range when building formatting tools.](https://blokeditor.com/docs/marks-api/) - [Styles Use Blok class names and CSS custom properties to style tools and the editor.](https://blokeditor.com/docs/styles-api/) - [History Control undo and redo for editor operations.](https://blokeditor.com/docs/history-api/) ## Interface - [Toolbar Open and close the block toolbar, its settings menu, and the toolbox.](https://blokeditor.com/docs/toolbar-api/) - [InlineToolbar Control the inline formatting toolbar.](https://blokeditor.com/docs/inline-toolbar-api/) - [UI Reach Blok interface elements and their state.](https://blokeditor.com/docs/ui-api/) - [Notifier Show notifications to users, or plug in your own renderer.](https://blokeditor.com/docs/notifier-api/) - [Tooltip Show tooltip hints on interface elements.](https://blokeditor.com/docs/tooltip-api/) - [Theme Read and switch the editor color theme at runtime.](https://blokeditor.com/docs/theme-api/) - [Width Switch the editor between narrow and full-width content.](https://blokeditor.com/docs/width-api/) - [Placeholder Read and change the empty-editor placeholder without recreating the editor.](https://blokeditor.com/docs/placeholder-api/) ## Extending & system - [Tools Inspect and manage the tools registered in the editor.](https://blokeditor.com/docs/tools-api/) - [Uploader Upload a file through the pipeline that owns its kind of asset.](https://blokeditor.com/docs/uploader-api/) - [Events Subscribe to editor lifecycle events.](https://blokeditor.com/docs/events-api/) - [Listeners Add and remove DOM event listeners with automatic cleanup.](https://blokeditor.com/docs/listeners-api/) - [ViewState Keep personal per-block state in this browser, outside the saved document.](https://blokeditor.com/docs/view-state-api/) - [Sanitizer Clean HTML content to keep unsafe markup out of the editor.](https://blokeditor.com/docs/sanitizer-api/) - [ReadOnly Turn editing on and off at runtime.](https://blokeditor.com/docs/readonly-api/) - [I18n Translate interface strings and switch the language at runtime.](https://blokeditor.com/docs/i18n-api/) - [Dev override seam How the development override in every published entry works, and how to remove it.](https://blokeditor.com/docs/dev-override-seam/) ## Data types - [OutputData The data structure that saving the editor returns.](https://blokeditor.com/docs/output-data/) - [BlockData The shape of each block in the saved blocks array.](https://blokeditor.com/docs/block-data/) ## Framework adapters - [BlokEditor component The ready-made editor component for React, Vue, and Angular.](https://blokeditor.com/docs/blok-editor/) - [useBlocks A live view of the block tree with methods to change it, for framework adapters.](https://blokeditor.com/docs/use-blocks/) - [useBlokReady Know when the editors inside a part of the page are ready to use.](https://blokeditor.com/docs/use-blok-ready/) ## Block Tools - [Paragraph The default text block with bold, italic, links, and color.](https://blokeditor.com/docs/paragraph/) - [Header Headings from H1 to H6, each with a # shortcut.](https://blokeditor.com/docs/header/) - [List Bulleted, numbered, and checklist items with unlimited nesting.](https://blokeditor.com/docs/list/) - [Table A table where every cell is its own small block editor.](https://blokeditor.com/docs/table/) - [Toggle A collapsible block that hides its child blocks behind an arrow.](https://blokeditor.com/docs/toggle/) - [Callout A highlighted box with an emoji icon and custom colors.](https://blokeditor.com/docs/callout/) - [Database A database block with typed properties and board or list views.](https://blokeditor.com/docs/database/) - [Database Row One row of a database, created and managed by its parent database block.](https://blokeditor.com/docs/database-row/) - [Divider A horizontal line that separates sections of content.](https://blokeditor.com/docs/divider/) - [Spacer An adjustable vertical gap for lining up content.](https://blokeditor.com/docs/spacer/) - [Table of contents A live list of the page headings that jumps to each one.](https://blokeditor.com/docs/table_of_contents/) - [Quote A block quote in two sizes, default and large.](https://blokeditor.com/docs/quote/) - [Code A code block with syntax highlighting, a language picker, and a copy button.](https://blokeditor.com/docs/code/) - [Image Add an image by URL, by upload, or by pasting a file.](https://blokeditor.com/docs/image/) - [Columns A layout block that places its children side by side in columns.](https://blokeditor.com/docs/column_list/) - [Column A single column inside a columns block.](https://blokeditor.com/docs/column/) - [Tabs A block that splits content into tabs, one open at a time.](https://blokeditor.com/docs/tabs/) - [Tab A single tab inside a tabs block, with a title and its own content.](https://blokeditor.com/docs/tab/) - [Embed A live embed for YouTube, Figma, CodePen, and over 100 other services.](https://blokeditor.com/docs/embed/) - [Bookmark A link preview card with title, description, and image.](https://blokeditor.com/docs/bookmark/) - [Page A block that owns a nested page whose content lives in your app.](https://blokeditor.com/docs/page/) - [Page link A link to an existing page in your app that does not own it.](https://blokeditor.com/docs/page-link/) - [File An attachment card with file name, size, and a download button.](https://blokeditor.com/docs/file/) - [Audio An audio player with a waveform scrubber and playback controls.](https://blokeditor.com/docs/audio/) - [Video A video player with custom controls for playback and fullscreen.](https://blokeditor.com/docs/video/) ## Inline Tools - [Bold Make selected text bold with Cmd/Ctrl+B.](https://blokeditor.com/docs/bold/) - [Italic Make selected text italic with Cmd/Ctrl+I.](https://blokeditor.com/docs/italic/) - [Link Add, edit, or remove a link on selected text with Cmd/Ctrl+K.](https://blokeditor.com/docs/link/) - [Marker Color the selected text or its background.](https://blokeditor.com/docs/marker/) - [Underline Underline selected text with Cmd/Ctrl+U.](https://blokeditor.com/docs/underline/) - [Strikethrough Strike through selected text with Cmd/Ctrl+Shift+S.](https://blokeditor.com/docs/strikethrough/) - [Inline Code Mark selected text as inline code with Cmd/Ctrl+E.](https://blokeditor.com/docs/inlineCode/) - [Equation Write inline math in LaTeX, rendered with KaTeX.](https://blokeditor.com/docs/equation/) - [Clear Format Remove inline formatting from selected text and keep links.](https://blokeditor.com/docs/clearFormat/) - [Superscript & Subscript Turn selected text into superscript or subscript.](https://blokeditor.com/docs/supSub/)