Editor

A powerful block-based editor built on BlockSuite with rich formatting and markdown support

Editor

AFFiNE’s editor is built on BlockSuite, a modular framework that powers rich document editing with an extensible block-based architecture. Create and organize content with powerful formatting tools, markdown shortcuts, and seamless inline editing.

Block Types

AFFiNE supports a wide variety of content blocks to structure your documents:

Text Blocks

• Paragraph: Standard text with rich formatting
• Headings: H1-H6 for document structure
• List: Bulleted, numbered, and todo lists
• Quote: Callout and blockquote styles

Media Blocks

• Image: Inline images with captions
• Attachment: File uploads and downloads
• Bookmark: Rich link previews
• Embed: YouTube, Figma, GitHub, and more

Advanced Blocks

• Code: Syntax highlighting for 100+ languages
• LaTeX: Mathematical equations and formulas
• Database: Structured data with multiple views
• Divider: Visual section separators

Layout Blocks

• Table: Multi-column data tables
• Note: Nested document containers
• Frame: Whiteboard sections
• Embed Doc: Link to other pages

Rich Text Formatting

Format your content with comprehensive styling options:

Text Styles

• Bold (⌘/Ctrl + B)
• Italic (⌘/Ctrl + I)
• Underline (⌘/Ctrl + U)
• Strikethrough (⌘/Ctrl + Shift + S)
• Inline code (`)
• Text colors and highlights
• Font sizes and families

Block Formatting

• Headings: #, ##, ### for H1, H2, H3
• Lists: - or * for bullets, 1. for numbers
• Todo: [] for checkboxes
• Quote: > for blockquotes
• Code: ``` for code blocks
• Divider: --- for horizontal rules

Advanced

• LaTeX: $$ for math blocks, $ for inline
• Links: ⌘/Ctrl + K or [text](url)
• Mentions: @ to reference users or pages
• Slash Commands: / for block menu
• Backlinks: [[page]] for internal links

Markdown Support

AFFiNE provides full markdown syntax support with live preview:

Markdown Shortcuts

Headings:

• # H1, ## H2, ### H3

Text Formatting:

• **bold**, *italic*, ~~strikethrough~~
• `inline code`

Lists:

• - Bullet list, 1. Numbered list, - [ ] Todo

Links & Images:

• [Link text](url), ![Image](url)

Math:

• $inline math$, $$block math$$

Keyboard Shortcuts

Master document editing with these essential shortcuts:

General Editing

Action	macOS	Windows/Linux
Bold	⌘ + B	Ctrl + B
Italic	⌘ + I	Ctrl + I
Underline	⌘ + U	Ctrl + U
Strikethrough	⌘ + Shift + S	Ctrl + Shift + S
Code	⌘ + E	Ctrl + E
Link	⌘ + K	Ctrl + K
Undo	⌘ + Z	Ctrl + Z
Redo	⌘ + Shift + Z	Ctrl + Shift + Z

Block Operations

Action	Shortcut
Slash menu	/
Convert to heading	⌘/Ctrl + Alt + 1-6
Convert to text	⌘/Ctrl + Alt + 0
Convert to list	⌘/Ctrl + Shift + 8
Convert to numbered list	⌘/Ctrl + Shift + 7
Convert to todo	⌘/Ctrl + Shift + 9
Convert to code	⌘/Ctrl + Alt + C
Delete block	Backspace (empty block)

Navigation

Action	Shortcut
Move up/down	Arrow keys
Jump to line start	⌘/Ctrl + ←
Jump to line end	⌘/Ctrl + →
Jump to doc start	⌘/Ctrl + ↑
Jump to doc end	⌘/Ctrl + ↓

Access the complete keyboard shortcuts reference by pressing ⌘/Ctrl + / or through the Help menu.

Code Blocks

AFFiNE’s code blocks support syntax highlighting for over 100 programming languages:

Popular Languages Supported: JavaScript, TypeScript, Python, Java, C++, C#, Go, Rust, PHP, Ruby, Swift, Kotlin, SQL, HTML, CSS, Markdown, JSON, YAML, Shell, and many more.

Code Block Features:

• Automatic syntax detection
• Line numbers
• Copy to clipboard button
• Language selector dropdown
• Theme-aware syntax highlighting
• Wrap long lines option

Tables

Create structured data with rich table blocks:

• Add/remove rows and columns dynamically
• Drag to resize columns
• Rich content in cells (text formatting, links, etc.)
• Header rows with distinct styling
• Copy/paste from Excel or Google Sheets
• Keyboard navigation between cells

Links and Embeds

Internal Links

Link to other pages in your workspace:

• Use @ to search and link to pages
• Use [[page name]] for wiki-style links
• Bidirectional backlinks automatically tracked
• Embed entire pages with “Embed Doc” block

External Embeds

Supported embed types:

Media

• YouTube
• Loom
• Vimeo

Design

• Figma
• Framer

Code

• GitHub Gist
• CodePen
• JSFiddle

LaTeX Support

Write mathematical equations with LaTeX syntax:

Inline Math: Use single dollar signs $E = mc^2$ for inline equations

Block Math: Use double dollar signs for display equations:

$$
\int_{-\infty}^{\infty} e^{-x^2} dx = \sqrt{\pi}
$$

Document Structure

Organize your content effectively:

Best Practices

1. Use headings to create a clear hierarchy (H1 for title, H2 for sections)
2. Add dividers between major sections for visual clarity
3. Use lists for sequential or hierarchical information
4. Embed related docs to create knowledge graphs
5. Add a table of contents for long documents
6. Use callouts to highlight important information

Performance

The editor is optimized for large documents:

• Virtual scrolling for documents with thousands of blocks
• Lazy loading of media and embeds
• Incremental rendering for smooth scrolling
• Background autosave without interrupting typing
• Collaborative editing with conflict-free merging (CRDT-based)

The editor uses Y.js (Yjs) CRDT for conflict-free collaborative editing, ensuring that multiple users can edit simultaneously without data loss.

Next Steps

Whiteboard

Explore visual thinking with the infinite canvas

Database

Structure data with tables, kanban, and gallery views

AI Assistant

Enhance your writing with AI-powered features

Collaboration

Work together in real-time