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

---

Features

Module	Description
Code Runner	Execute code in-browser with multi-language support (via Judge0 or custom handlers) and syntax highlighting
Slideshow	Create and present slides with Reveal.js integration and theme support
Whiteboard	Freeform drawing and diagramming canvas powered by Excalidraw
Genius	AI assistant block with configurable node views
Mentions	@mention support for users and groups with autocomplete suggestions

---

Installation

Every block ships as its own package — install only what you need:

pnpm add blocknote-layout-slideshow

Or install the umbrella package, which re-exports every block:

pnpm add blocknote-layout

Package	Contents
blocknote-layout	Umbrella — re-exports all blocks
blocknote-layout-extensions	Whiteboard + slideshow + mentions in one package
blocknote-layout-coderunner	Code runner block
blocknote-layout-slideshow	Slideshow presentations
blocknote-layout-whiteboard	Whiteboard block
blocknote-layout-genius	Genius AI block
blocknote-layout-mentions	Mention inline content (+ React-free server entry)
blocknote-layout-core	Shared utilities

---

Modules

Code Runner

Execute code directly in the browser. Supports Python, JavaScript, Java, Go, C++, Rust, PHP, and more (via Judge0 or custom handlers).

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

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

Highlights:

• Syntax highlighting via CodeMirror
• Configurable execution backend

---

Slideshow

Convert document content into presentation slides with Reveal.js.

import { usePresentation, PresentToolbar, PRESENTATION_THEMES } from "blocknote-layout";
// or standalone: 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

---

Whiteboard

Freeform drawing and diagramming canvas.

import { withWhiteboard, getWhiteboardSlashMenuItems } from "blocknote-layout";
// or standalone: 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

---

Selective Installs

Every block is a standalone package — depend on it directly and skip the rest (and their dependencies):

import { CodeBlock } from "blocknote-layout-coderunner";
import { usePresentation } from "blocknote-layout-slideshow";
import { withWhiteboard } from "blocknote-layout-whiteboard";

If you use the umbrella package, its subpath imports (blocknote-layout/coderunner, blocknote-layout/slideshow, …) keep working.

---

Peer Dependencies

Package	Version
@blocknote/core	0.51.4
@blocknote/mantine	0.51.4
@blocknote/react	0.51.4
@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.