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!');
}
🌱 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.
🔗 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.
＠ Mention
Mention and reference other users or entities within your text using @-mentions.
Try mentioning R2-D2﻿
 or Mace Windu﻿
.
🙂 Emoji's
Express yourself with a touch of fun 🎉 and emotion 😃.
Pick from the toolbar or write after the 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.
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
Yes
No
No
Image
Yes
No
Yes
Mention
Yes
Yes
Yes
This table is an example of rendering a table spanning multiple columns:
Heading
Cell 1
Cell 2
With Slate you can build complex block types that have their own embedded content and behaviors, like rendering checkboxes inside check list items!
Slide to the left.
Slide to the right.
Criss-cross.
Criss-cross.
Cha cha real smooth…
Let's go to work!
🏃‍♀️ 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
Yes
No
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.
💬 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.
﻿
﻿
Plugin	Element	Inline	Void
Heading	Yes	No	No
Image	Yes	No	Yes
Mention	Yes	Yes	Yes
Plugin	Element	Inline	Void
Heading	Yes	No	No
Image	Yes	No	Yes
Mention	Yes	Yes	Yes