FrameworkJavaScript
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 StartGet up and running with Blok in a few steps.
- Build your first editorMount an editor, write some content, and save it as JSON you can load back.
- Everything is a blockThe one idea behind Blok: every piece of content is a block.
- Create a custom block toolBuild a callout block from scratch that renders, edits, and saves like a built-in one.
- Tab syncKeep one document live across the tabs of one browser, with no server.
Core
- Blok ClassThe main editor class that creates an instance and exposes every API namespace.
- ConfigurationEvery option you can pass to the Blok constructor, and which ones can change live.
- BlocksCreate, delete, update, and reorder blocks in the editor.
- BlockAPIWork with a single block returned by the Blocks API.
- SaverSave and export editor content.
- View rendererRender saved documents to HTML or plain text without loading an editor.
Editing
- CaretMove the cursor and control where it sits inside the editor.
- SelectionWork with text selection inside the editor.
- MarksApply and remove inline marks across a range when building formatting tools.
- StylesUse Blok class names and CSS custom properties to style tools and the editor.
- HistoryControl undo and redo for editor operations.
Interface
- ToolbarOpen and close the block toolbar, its settings menu, and the toolbox.
- InlineToolbarControl the inline formatting toolbar.
- UIReach Blok interface elements and their state.
- NotifierShow notifications to users, or plug in your own renderer.
- TooltipShow tooltip hints on interface elements.
- ThemeRead and switch the editor color theme at runtime.
- WidthSwitch the editor between narrow and full-width content.
- PlaceholderRead and change the empty-editor placeholder without recreating the editor.
Extending & system
- ToolsInspect and manage the tools registered in the editor.
- UploaderUpload a file through the pipeline that owns its kind of asset.
- EventsSubscribe to editor lifecycle events.
- ListenersAdd and remove DOM event listeners with automatic cleanup.
- ViewStateKeep personal per-block state in this browser, outside the saved document.
- SanitizerClean HTML content to keep unsafe markup out of the editor.
- ReadOnlyTurn editing on and off at runtime.
- I18nTranslate interface strings and switch the language at runtime.
- Dev override seamHow the development override in every published entry works, and how to remove it.
Data types
Framework adapters
Block Tools
- ParagraphThe default text block with bold, italic, links, and color.
- HeaderHeadings from H1 to H6, each with a # shortcut.
- ListBulleted, numbered, and checklist items with unlimited nesting.
- TableA table where every cell is its own small block editor.
- ToggleA collapsible block that hides its child blocks behind an arrow.
- CalloutA highlighted box with an emoji icon and custom colors.
- DatabaseA database block with typed properties and board or list views.
- Database RowOne row of a database, created and managed by its parent database block.
- DividerA horizontal line that separates sections of content.
- SpacerAn adjustable vertical gap for lining up content.
- Table of contentsA live list of the page headings that jumps to each one.
- QuoteA block quote in two sizes, default and large.
- CodeA code block with syntax highlighting, a language picker, and a copy button.
- ImageAdd an image by URL, by upload, or by pasting a file.
- ColumnsA layout block that places its children side by side in columns.
- ColumnA single column inside a columns block.
- TabsA block that splits content into tabs, one open at a time.
- TabA single tab inside a tabs block, with a title and its own content.
- EmbedA live embed for YouTube, Figma, CodePen, and over 100 other services.
- BookmarkA link preview card with title, description, and image.
- PageA block that owns a nested page whose content lives in your app.
- Page linkA link to an existing page in your app that does not own it.
- FileAn attachment card with file name, size, and a download button.
- AudioAn audio player with a waveform scrubber and playback controls.
- VideoA video player with custom controls for playback and fullscreen.
Inline Tools
- BoldMake selected text bold with Cmd/Ctrl+B.
- ItalicMake selected text italic with Cmd/Ctrl+I.
- LinkAdd, edit, or remove a link on selected text with Cmd/Ctrl+K.
- MarkerColor the selected text or its background.
- UnderlineUnderline selected text with Cmd/Ctrl+U.
- StrikethroughStrike through selected text with Cmd/Ctrl+Shift+S.
- Inline CodeMark selected text as inline code with Cmd/Ctrl+E.
- EquationWrite inline math in LaTeX, rendered with KaTeX.
- Clear FormatRemove inline formatting from selected text and keep links.
- Superscript & SubscriptTurn selected text into superscript or subscript.