Features

| Module | Description | |--------|-------------| | Multi-Column Layout | Notion-style columns with resizable dividers, drag-and-drop, and responsive stacking | | Code Runner | Execute code in-browser with multi-language support (Python via Pyodide, others via Judge0) and syntax highlighting | | Slideshow | Create and present slides with Reveal.js integration and theme support | | Spreadsheet | Embedded spreadsheets powered by Handsontable with formula support (HyperFormula) and charting (ECharts) | | Whiteboard | Freeform drawing and diagramming canvas powered by Excalidraw | | Mentions | @mention support for users and groups with autocomplete suggestions |

Installation

npm install blocknote-layout

Modules

Multi-Column Layout

Create Notion-style multi-column layouts with drag-and-drop and resizable columns.

import { withMultiColumn, getMultiColumnSlashMenuItems } from "blocknote-layout";
// or: import { withMultiColumn } from "blocknote-layout/multicolumn";

Key exports: withMultiColumn, createMultiColumnSchema, ColumnBlock, ColumnListBlock, getMultiColumnSlashMenuItems, createColumnResizeExtension, multiColumnDropCursor

Code Runner

Execute code directly in the browser. Supports Python (via Pyodide/WebAssembly), JavaScript, Java, Go, C++, Rust, PHP, and more (via Judge0).

import { CodeBlock, insertCode, setCodeRunnerConfig } from "blocknote-layout";
// or: import { CodeBlock } from "blocknote-layout/coderunner";

Key exports: CodeBlock, insertCode, insertPythonCode, insertJavaScriptCode, executeCode, setCodeRunnerConfig, getCodeRunnerConfig, LANGUAGES, getSupportedLanguages

Highlights:

• Syntax highlighting via CodeMirror
• Auto-detects and installs Python packages (pandas, numpy, scipy, matplotlib)
• Matplotlib plots rendered as images in the output
• Configurable execution backend

Slideshow

Convert document content into presentation slides with Reveal.js.

import { usePresentation, PresentToolbar, PRESENTATION_THEMES } from "blocknote-layout";
// or: import { usePresentation } from "blocknote-layout/slideshow";

Key exports: usePresentation, PresentationModal, PresentToolbar, generateSlidesFromBlocks, PRESENTATION_THEMES

Highlights:

• Themes: white, black, beige, sky
• Fullscreen presentation modal
• Automatic block-to-slide conversion

Spreadsheet

Embedded spreadsheets with formula support and charting.

import { withSpreadsheet, getSpreadsheetSlashMenuItems } from "blocknote-layout";
// or: import { withSpreadsheet } from "blocknote-layout/spreadsheet";

Key exports: withSpreadsheet, createSpreadsheetSchema, SpreadsheetBlock, getSpreadsheetSlashMenuItems, insertSpreadsheet, SpreadsheetNodeView

Highlights:

• Full spreadsheet editing via Handsontable
• Formula engine powered by HyperFormula
• Charting with ECharts

Whiteboard

Freeform drawing and diagramming canvas.

import { withWhiteboard, getWhiteboardSlashMenuItems } from "blocknote-layout";
// or: import { withWhiteboard } from "blocknote-layout/whiteboard";

Key exports: withWhiteboard, createWhiteboardSchema, WhiteboardBlock, getWhiteboardSlashMenuItems, insertWhiteboard, WhiteboardNodeView

Highlights:

• Powered by Excalidraw
• Sketching, shapes, arrows, text, and more
• Embeds directly in the document

Mentions

@mention support for users and groups with autocomplete.

import { withMentions, getMentionSuggestionMenuItems } from "blocknote-layout";

Key exports: withMentions, getMentionSuggestionMenuItems, createMentionSuggestionMenuItems, insertGroupMention, mentionInlineContentSpec

Subpath Imports

Each module can be imported individually for tree-shaking:

import { withMultiColumn } from "blocknote-layout/multicolumn";
import { CodeBlock } from "blocknote-layout/coderunner";
import { usePresentation } from "blocknote-layout/slideshow";
import { withSpreadsheet } from "blocknote-layout/spreadsheet";
import { withWhiteboard } from "blocknote-layout/whiteboard";

Peer Dependencies

| Package | Version | |---------|---------| | @blocknote/core | 0.47.1 | | @blocknote/mantine | 0.47.1 | | @blocknote/react | 0.47.1 | | @tiptap/core | ^3.0.0 | | @uiw/react-codemirror | ^4.21.0 | | react | ^18.0.0 \|\| ^19.0.0 | | react-dom | ^18.0.0 \|\| ^19.0.0 | | react-icons | ^4.0.0 \|\| ^5.0.0 |

License

See the LICENSE file for details.