Build your rich-text editor.

Plugin system & primitive component library.
CLI for styled components. Customizable. Open Source.

🌳 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!');
}

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.

🌱 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.

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.

＠ Mention

Mention and reference other users or entities within your text using @-mentions.

Try mentioning

BB-8

Boba Fett

🙂 Emoji's

Express yourself with a touch of fun 🎉 and emotion 😃.

Pick from the toolbar or type a colon to open the combobox.

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

Roman 1

Decimal 11

Decimal 111

Decimal 112

Decimal 12

Decimal 13

Roman 2

Decimal 11

Decimal 12

Roman 3

Roman 4

Horizontal Rule

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

📸 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:

🏓 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

🌻 Column

Create column and the border will hidden when viewing

left

right

🦚 Toggle

Create toggles with multiple levels of indentation

Level 1 toggle

Inside level 1 toggle

Level 2 toggle

Inside level 2 toggle

After toggles

🏃‍♀️ 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 > 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 H2 sub-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

Try here ⌘⏎

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.

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.

💬 Comments

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

Deserialize HTML

By default, when you paste content into the Slate editor, it will utilize the clipboard's 'text/plain'data. While this is suitable for certain scenarios, there are times when you want users to be able to paste content while preserving its formatting. To achieve this, your editor should be capable of handling 'text/html'data.

To experience the seamless preservation of formatting, simply copy and paste rendered HTML rich text content (not the source code) from another website into this editor. You'll notice that the formatting of the pasted content is maintained.

Deserialize Markdown

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

Deserialize Docx

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

Deserialize CSV

Copy and paste CSV content into a table.

Trailing Block

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

Excalidraw

Unleash your creativity with the Excalidraw plugin, which enables you to embed and draw diagrams directly within your editor.