Block Editor

A composable block-based editor. Content is a flat array of typed blocks — each block type is a regular Svelte component. Supports drag-to-reorder, block type switching, undo/redo, and keyboard navigation between blocks.

Drag the grip handle to reorder blocks. Use the buttons below to add new blocks. Shift+Enter splits a Markdown block, Backspace at the start merges with the previous block. ⌘Z / ⌘⇧Z undo/redo structural changes.

Interactive demo

Undo Redo

Close all Open all

Preview

Heading

H1H2H3

Markdown

Edit Split Preview

This editor supports **Markdown**, tables, diagrams, YouTube embeds, quotes, and dividers. Blocks can be reordered by dragging the grip handle on the left.

This editor supports Markdown, tables, diagrams, YouTube embeds, quotes, and dividers. Blocks can be reordered by dragging the grip handle on the left.

Callout

Edit Split Preview

You can **drag** blocks to reorder them using the grip handle on the left. Press `Shift+Enter` inside a Markdown block to split it.

You can drag blocks to reorder them using the grip handle on the left. Press Shift+Enter inside a Markdown block to split it.

Divider

Heading

H1H2H3

Table

H-RowH-ColΣ RowΣ Col

	A	B	C	D
1	Department	Budget	Spent	Remaining
2	Engineering	$ 120 000	$ 87 400	$ 32 600
3	Design	$ 45 000	$ 38 200	$ 6 800
4	Marketing	$ 60 000	$ 51 000	$ 9 000
5	Total	$ 225 000	$ 176 600	$ 48 400

Divider

Heading

H1H2H3

Diagram

Edit

Divider

Heading

H1H2H3

Code

Open

TypeScriptJavaScriptSveltePythonCSSHTML / XMLBashShellJSONSQLRustGoJavaKotlinSwiftC++MarkdownYAMLPHPDockerfilePlain text

import { defineHandler } from '@atom-forge/rpc'; interface User { id: string; name: string; email: string; role: 'admin' | 'user'; } export const getUser = defineHandler<{ userId: string }, User>( async ({ userId }) => { const user = await db.users.findUnique({ where: { id: userId } }); if (!user) throw new Error('User not found'); return { id: user.id, name: user.name, email: user.email, role: user.role, }; } );

TypeScriptJavaScriptSveltePythonCSSHTML / XMLBashShellJSONSQLRustGoJavaKotlinSwiftC++MarkdownYAMLPHPDockerfilePlain text

import pandas as pd from typing import List, Dict, Optional class DataProcessor: def __init__(self, data: pd.DataFrame): self.data = data self.cache: Dict[str, pd.DataFrame] = {} def filter_by_status(self, status: str) -> pd.DataFrame: """Filter records by status field.""" if status in self.cache: return self.cache[status] result = self.data[self.data['status'] == status].copy() self.cache[status] = result return result def aggregate_metrics(self, group_by: List[str]) -> pd.DataFrame: """Aggregate data by specified columns.""" return self.data.groupby(group_by).agg({ 'revenue': 'sum', 'users': 'count' }).reset_index()

Add file

Divider

Heading

H1H2H3

Divider

Heading

H1H2H3

Link

Official documentation for Svelte 5 — learn about runes, components, reactivity, and more.

svelte.dev

Link

Rapidly build modern websites without ever leaving your HTML with utility-first CSS framework.

tailwindcss.com

Divider

Heading

H1H2H3

YouTube

Svelte 5 Runes Explained

All built-in block components are exported from @atom-forge/ui and can be used individually or combined. Import only the components you need and pass them in the components map.

Shift+Enter — split the current joinable block at the cursor into two.
Backspace at start — merge with the previous block (if same joinable type) or focus it.
Delete at end — merge the next block into the current one.
ArrowUp / ArrowDown at edges — move focus to the previous/next block.
Tab / Shift+Tab — navigate between blocks in Markdown mode.

Any Svelte component with id: string and data: any props can be a block. Call api.register(id, controller) in an $effect to opt into focus management. Use api.updateData(id, newData) to persist changes back to the block array. Import getBlockAPI from @atom-forge/ui and call it during component initialization. Unregister the controller when the block is destroyed.