Editor.js Guide

Editor.js is the modern, block-based editor for creating rich content. It provides a clean, distraction-free writing experience similar to Notion or Medium.

What You’ll Learn

How to write with Editor.js Available block types Adding images and media Keyboard shortcuts

Getting Started

When you open the post creation form with Editor.js enabled, you’ll see a clean writing area. Just start typing to create your first paragraph.

Adding Blocks

Editor.js uses “blocks” for different content types. You can add blocks in two ways:

Method 1: Type “/”

Start a new line Type “/” (forward slash) See a menu of available blocks Click or type to select

Method 2: Click “+”

Hover at the left of any block Click the “+” button that appears Select a block type from the menu

Available Block Types

BlockShortcutDescriptionParagraph(default)Regular text contentHeading/heading or ##Section headings (H2, H3)List/list or -Bulleted or numbered listsQuote/quoteBlockquotes for emphasisCode/codeCode snippetsImage/imageUpload or embed imagesDelimiter/delimiterVisual separator between sections

Formatting Text

To format text within a paragraph:

Select the text you want to format A toolbar appears above the selection Click formatting buttons:

B - Bold I - Italic Link icon - Add hyperlink Code icon - Inline code

Adding Images

Type /image or click “+” and select Image Click “Select an Image” or drag and drop Choose from your computer Wait for upload to complete Add a caption (optional)

Image tips:

Use high-quality images (1200px+ width recommended) Keep file sizes reasonable for fast loading Add descriptive captions for context

Creating Headings

Headings help organize your content. Two ways to create them:

Markdown style:

Type ## for H2 heading Type ### for H3 heading

Block menu:

Type /heading and select level

Creating Lists

Bulleted lists:

Type - (hyphen) followed by space Or type /list

Numbered lists:

Type 1. followed by space Numbers increment automatically

Moving and Deleting Blocks

To move a block:

Click on the block Use the drag handle (six dots) on the left Drag to new position

To delete a block:

Click on the block Press Backspace/Delete when block is empty Or use the block settings menu (three dots)

Keyboard Shortcuts

ActionWindows/LinuxMacBoldCtrl + BCmd + BItalicCtrl + ICmd + ILinkCtrl + KCmd + KUndoCtrl + ZCmd + ZRedoCtrl + YCmd + Shift + Z

Best Practices

Use headings - Break up long content into sections Add images - Visual content increases engagement Keep paragraphs short - Easier to read on screens Preview your post - Check formatting before submitting

Related Docs

TinyMCE Classic Editor Guide - Traditional editor option Medium Editor Guide - Distraction-free alternative Creating Your First Post - Step-by-step posting guide