Build your rich-text editor

Framework · Plugins · Components · Themes
Get StartedGitHub
An AI editor

Playground

Table of Contents

The Table of Contents (TOC) feature allows you to create an automatically updated overview of your document's structure.
How to use the Table of Contents:
  • Type "/toc" and press Enter to create the TOC.
  • The TOC updates automatically when you modify headings in the document.


Example Content

This is an example of content that would be reflected in the Table of Contents.

Subsection

Adding or modifying headings in your document will automatically update the TOC.

Benefits of Using TOC

A Table of Contents improves document navigation and provides a quick overview of your content structure.

AI

AI Menu

Generate and refine content with AI.
Access the AI menu in many ways:
  1. Press "⌘ + J".
  1. Select text and click "Ask AI" in the floating toolbar
  1. Right-click a block and select "Ask AI"
  1. Press space in an empty block. Try it out:
  • 
Once opened, you can:
  • Search commands in the input field:
  • Use arrow keys to navigate, Enter to select
Generating commands:
  • Continue writing
  • Add a summary
  • Explain
Generating suggestions:
  • Accept
  • Discard
  • Try again
Editing commands:
  • Improve writing
  • Make it longer or shorter
  • Fix spelling & grammar
  • Simplify language
Editing suggestions:
  • Replace the selection
  • Insert below
  • Discard
  • Try again
Note: chat history is preserved until the menu is closed.

Copilot

  1. Position your cursor at the end of a paragraph where you want to add or modify text.
  1. Press Control + Space to trigger Copilot
  1. Copilot will automatically suggest completions as you type.
  1. Choose from the suggested completions:
  • Tab:Accept the entire suggested completion
  • Command + Right Arrow: Complete one character at a time
  • Escape: Cancel the Copilot

Nodes

Blocks

Easily create headings of various levels, from H1 to H6, to structure your content and make it more organized.
Create blockquotes to emphasize important information or highlight quotes from external sources.
// Use code blocks to showcase code snippets
function greet() {
  console.info('Hello World!');
}

Marks

Add style and emphasis to your text using the mark plugins, which offers a variety of formatting options.
Make text bold, italic, underlined, or apply a combination of these styles for a visually striking effect.
Add strikethrough to indicate deleted or outdated content.
Write code snippets with inline code formatting for easy readability.
Each block is a React component in which you can manage the state:
    Create a "banana language" translation plugin
    Create a "detect sarcasm" plugin (good luck with that)
    Create an AI auto-complete plugin

Link

Add hyperlinks within your text to reference external sources or provide additional information using the Link plugin.
Effortlessly create hyperlinks using the toolbar or by pasting a URL while selecting the desired text.

Horizontal Rule

Add horizontal rules to visually separate sections and content within your document.


Table

Create customizable tables with resizable columns and rows, allowing you to design structured layouts.
Plugin
Element
Inline
Void
Heading


No
Image
Yes
No
Yes
Mention
Yes
Yes
Yes

Image

Add images by either uploading them or providing the image URL:

Customize image captions and resize images.

Upload

Our editor supports various media types for upload, including images, videos, audio, and files.
sample.pdf

  • Real-time upload status and progress tracking

  • Configurable file size limits and batch upload settings

  • Clear error messages for any upload issues
  • Try it now - drag an image from your desktop or click the upload button in the toolbar

Embed

Embed various types of content, such as videos and tweets:


Column

Create column and the border will hidden when viewing
left
right

Mention

Mention and reference other users or entities within your text using @-mentions.
Try mentioning
BB-8
or
Boba Fett
.

Date

Insert and display dates within your text using inline date elements. These dates can be easily selected and modified using a calendar interface.
Try selecting

or

.

Emoji

Express yourself with a touch of fun 🎉 and emotion 😃.
Pick from the toolbar or type a colon to open the combobox.

Colors

Add multiple font and background colors to create vibrant and eye-catching text.
Highlight important information for better clarity.
Press ⌘ + B to apply bold mark or ⌘ + I for italic mark.

Comments

Add comments to your content to provide additional context, insights, or collaborate with others

Layout

Alignment

Align text within blocks to create visually appealing and balanced layouts.

Center

Create clean and balanced layouts by justifying block text, providing a professional and polished look.

Line Height

Control the line height of your text to improve readability and adjust the spacing between lines.
Choose the ideal line height to ensure comfortable reading and an aesthetically pleasing document.

Indentation

Easily control the indentation of specific blocks to highlight important information and improve visual structure.
For instance, this paragraph looks like it belongs to the previous one.

Indent List

Create indented lists with multiple levels of indentation and customize the list style type for each level.
    Todo 1
    🚀
    Icon 1
    🔥
    Icon 2
    Todo 2
  1. Roman 1
  1. Decimal 11
  1. Decimal 111
  1. Decimal 112
  1. Decimal 12
  1. Decimal 13
  1. Roman 2
  1. Decimal 11
  1. Decimal 12
  1. Roman 3
  1. Roman 4

Toggle

Create toggles with multiple levels of indentation
Level 1 toggle
Inside level 1 toggle
Level 2 toggle
Inside level 2 toggle
After toggles

Functionality

Slash Command

The slash menu provides quick access to various formatting options and content types.
  • Type '/' anywhere in your document to open the slash menu.
  • Start typing to filter options or use arrow keys to navigate.
  • Press Enter or click to select an option.
  • Press Escape to close the menu without selecting.
Available options include:
  • Headings: Heading 1, Heading 2, Heading 3
  • Lists: Bulleted list, Numbered list
  • Inline Elements: Date

Block Selection

Block selection allows you to select multiple blocks at once.You can initiate a selection by clicking and dragging from the editor padding.
Key features of block selection:
  • Select multiple blocks.
  • Keep pressing Shift to keep the previous selection. That way, you can select non-contiguous blocks.
  • Perform bulk actions on selected blocks

Block Menu

Open the block menu:
  • Right-click any unselected block to open the context menu. If you right-click within a selected block, you'll see the browser's native context menu instead.
Available options in the block menu:
  • Ask AI to edit the block.
  • Delete the block.
  • Duplicate the block.
  • Turn the block type into another block type.

Autoformat

Empower your writing experience by enabling autoformatting features. Add Markdown-like shortcuts that automatically apply formatting as you type.
While typing, try these mark rules:
  • Type ** or __ on either side of your text to add **bold* mark.
  • Type * or _ on either side of your text to add *italic mark.
  • Type ` on either side of your text to add `inline code mark.
  • Type ~~ on either side of your text to add ~~strikethrough~ mark.
  • Note that nothing happens when there is a character before, try on:*bold
  • We even support smart quotes, try typing "hello" 'world'.
At the beginning of any new block or existing block, try these (block rules):
  • Type *, - or +followed by space to create a bulleted list.
  • Type 1. or 1) followed by spaceto create a numbered list.
  • Type [],or [x]followed by space to create a todo list.
  • Type > followed by space to create a block quote.
  • Type ``` to create a code block.
  • Type --- to create a horizontal rule.
  • Type # followed by space to create an H1 heading.
  • Type ### followed by space to create an H3 sub-heading.
  • Type #### followed by space to create an H4 sub-heading.
  • Type ##### followed by space to create an H5 sub-heading.
  • Type ###### followed by space to create an H6 sub-heading.

Soft Break

Customize how soft breaks (line breaks within a paragraph) are handled using configurable rules
  • hotkey – Use hotkeys like ⇧⏎ to insert a soft break anywhere within a paragraph.
  • query – Define custom rules to limit soft breaks to specific block types.
Try here ⏎
And here ⏎ as well.

Exit Break

Configure how exit breaks (line breaks between blocks) behave using simple rules:
  • hotkey – Use hotkeys like ⌘⏎ to move the cursor to the next block
  • query – Specify block types where exit breaks are allowed.
  • before – Choose whether the cursor exits to the next or previous block
And in the middle ⌘⏎ of a block.
Exit breaks also work within nested blocks:
Plugin
Element
Inline
Void
Heading


No
Image
Yes
No
Yes
Mention
Yes
Yes
Yes

Cursor Overlay

Try to drag over text: you will see a colored cursor on the drop target: color and other styles are customizable!
You can also try clicking the "Ask AI" button - the selection will stay visible while focusing the another input, and will be updated while streaming.

Trailing Block

Always have a trailing paragraph at the end of your editor.

Deserialization

Markdown

Copy and paste Markdown content from popular Markdown editors like markdown-it.github.io/ into the editor for easy conversion and editing.

Docx

Easily import content from Microsoft Word documents by simply copying and pasting the Docx content into the editor.

CSV

Copy and paste CSV content into a table.