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 “/”

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

Method 2: Click “+”

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

Available Block Types

Block	Shortcut	Description
Paragraph	(default)	Regular text content
Heading	/heading or ##	Section headings (H2, H3)
List	/list or –	Bulleted or numbered lists
Quote	/quote	Blockquotes for emphasis
Code	/code	Code snippets
Image	/image	Upload or embed images
Delimiter	/delimiter	Visual separator between sections

Formatting Text

To format text within a paragraph:

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

• B – Bold
• I – Italic
• Link icon – Add hyperlink
• Code icon – Inline code

Adding Images

1. Type /image or click “+” and select Image
2. Click “Select an Image” or drag and drop
3. Choose from your computer
4. Wait for upload to complete
5. 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:

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

To delete a block:

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

Keyboard Shortcuts

Action	Windows/Linux	Mac
Bold	Ctrl + B	Cmd + B
Italic	Ctrl + I	Cmd + I
Link	Ctrl + K	Cmd + K
Undo	Ctrl + Z	Cmd + Z
Redo	Ctrl + Y	Cmd + 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