Layout and utility extensions for BlockNote — the open-source block-based rich text editor.

---

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.