Build your rich-text editor

Framework · Plugins · Components · Themes
Get StartedGitHub

Playground


Click on any heading in the table of contents to smoothly scroll to that section.

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.

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 Menu

The slash menu provides quick access to various formatting options and content types.
How to use the slash menu:
  • 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 left or right padding of the editor.
Key features of block selection:
  • Select multiple blocks by dragging from the editor's padding
  • Try using Shift + drag after the first block selection to select multiple non-contiguous blocks.
  • Easily manipulate groups of blocks
  • Perform bulk actions on selected blocks
  • Intuitive and efficient way to manage content
  • Enhances productivity for complex document structures

Block Menu

The Block Menu provides quick access to actions for individual blocks. You can open this menu by right-clicking on any block in the editor.
Key features of the Block Context Menu:
  • Right-click on any block to open the menu
  • Try using block selection to select multiple blocks, then open the menu for the selected blocks.
  • When you try to right-click the block at the cursor's location, the default menu will open.This allows users to use browser extensions or paste plain text, etc.
  • Options to duplicate, delete, or other what you want
  • Transform blocks into different types

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 black cursor on the drop target: color and other styles are customizable!

Tabbable

Ensure a smooth tab navigation experience within your editor with the Tabbable plugin.
Properly handle tab orders for void nodes, allowing for seamless navigation and interaction. Without this plugin, DOM elements inside void nodes come after the editor in the tab order.

This is a void element.



This is a void element.


Place your cursor here and try pressing tab or shift+tab.
  • List item 1
  • List item 2
  • List item 3
if (true) {
// <- Place cursor at start of line and press tab
}
In this example, the plugin is disabled when the cursor is inside a list or a code block. You can customise this using the query option.

This is a void element.


When you press tab at the end of the editor, the focus should go to the button below.

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.