Editor
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 snippetsfunction 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.
Click on any heading in the table of contents to smoothly scroll to that section.
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.
- 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 January 1, 2024 or Today.
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
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
EditorStatic
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 snippetsfunction 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.
Click on any heading in the table of contents to smoothly scroll to that section.
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.
- 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
January 1, 2024
or Today
.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
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