🎉
Introducing Plate UI, a new CLI and more.

Build your rich-text editor.

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

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

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.
To move canvas, hold mouse wheel or spacebar while dragging
Drawing canvas


Element
Element
Element
Void
Element
Void
Element
Void
Element
Inline
Element
Element
Element
Void
Element
Inline
Void
Element
Element
Element

Leaf
Leaf
Leaf
Style
Style
Style
Leaf
Leaf
Leaf
Leaf
Leaf
Leaf
Leaf

Style
Style
Style
Style

Handler
UI
Handler
UI
Handler
UI
Handler
UI
Handler
Handler
Normalizer
Normalizer
Handler
Handler
Normalizer
Handler
Handler
Normalizer

Handler
Handler
Handler
Handler