EditorJS Tab

Create rich, structured documents in your workspace using the block-based EditorJS editor, with support for text, images, videos, maps, and Mermaid diagrams.

EditorJS Tab

The EditorJS tab provides a block-based rich text editor that lets you build structured documents by combining different content types. Each paragraph, image, video, or diagram lives in its own block, making it easy to organise and rearrange content visually.

Opening an EditorJS Tab

Click the "+" button in the tab bar and select EditorJS. A new blank document opens with a single empty text block.

Adding Blocks

Click the "+" icon that appears to the left of any block, or press Enter at the end of a block to insert a new one. A block menu appears with the following options:

Block Type Description
Text A standard paragraph of text with inline formatting support
Heading Section headings at H1, H2, or H3 level
Image Upload an image from your device or paste an image URL
Video Embed a video by URL (YouTube, Vimeo, and direct links supported)
Map Embed an interactive Google Maps location by entering an address or coordinates
Mermaid Diagram Render flowcharts, sequence diagrams, and other diagrams from Mermaid syntax

Reordering Blocks

To move a block, hover over it and grab the drag handle (six-dot icon) that appears to its left. Drag the block up or down to the desired position. The layout updates immediately.

Inline Formatting

Within a text or heading block, select any text to reveal an inline toolbar with options for bold, italic, underline, strikethrough, inline code, and hyperlinks.

Embedded Content

The Image, Video, and Map blocks all support embedded content from external sources. When you insert a Map block, type an address into the search field and press Enter to generate the embedded view. For videos, paste a URL and the block automatically fetches a preview.

Saving Your Work

The editor saves your document automatically after each change. You can see the save status in the tab header.

For plain-text Markdown writing, see the Markdown Tab. For a full list of tabs, visit the Tab System Overview.