Free block-style editor with a universal JSON output
Editor.js provides maximum power for developers and products staying focused on the end-user experience
Get Started
Free and open-source
Improves by the whole world. You can join.
Clean UI/UX
Modern look. Customizable. Out of the box.
Simple API driven
Simple but powerful. Create any tool. Lots of already created.
Powered by CodeX
The team of senior developers loving Open Source

Clean JSON Output

Use it in Web, iOS, Android, AMP, Instant Articles, speech readers — everywhere. Easy to sanitize, extend and integrate with your logic. Developers will thank you.
{
time: 1706461919332,
blocks: [
{
id: "mhTl6ghSkV",
type: "paragraph",
data: {
text: "Hey. Meet the new Editor. On this picture you can see it in action. Then, try a demo 🤓",
}
,
}
,
{
id: "l98dyx3yjb",
type: "header",
data: {
text: "Key features",
level: 3,
}
,
}
,
{
id: "os_YI4eub4",
type: "list",
data: {
type: "unordered",
items: [
"It is a block-style editor",
"It returns clean data output in JSON",
"Designed to be extendable and pluggable with a <a href="https://editorjs.io/creating-a-block-tool">simple API</a>",
]
,
}
,
}
,
{
id: "1yKeXKxN7-",
type: "header",
data: {
text: "What does it mean «block-styled editor»",
level: 3,
}
,
}
,
{
id: "TcUNySG15P",
type: "paragraph",
data: {
text: "Workspace in classic editors is made of a single contenteditable element, used to create different HTML markups. Editor.js workspace consists of separate Blocks: paragraphs, headings, images, lists, quotes, etc. Each of them is an independent <sup data-tune="footnotes">1</sup> contenteditable element (or more complex structure) provided by Plugin and united by Editor's Core.",
}
,
tunes: {
footnotes: [
"It works more stable then in other WYSIWYG editors. Same time it has smooth and well-known arrow navigation behavior like classic editors.",
]
,
}
,
}
,
{
id: "M3UXyblhAo",
type: "header",
data: {
text: "What does it mean clean data output?",
level: 3,
}
,
}
,
{
id: "KOcIofZ3Z1",
type: "paragraph",
data: {
text: "There are dozens of ready-to-use Blocks and a simple API <sup data-tune="footnotes">2</sup> for creating any Block you need. For example, you can implement Blocks for Tweets, Instagram posts, surveys and polls, CTA buttons, and even games.",
}
,
tunes: {
footnotes: [
"Just take a look at our Creating Block Tool guide. You'll be surprised.",
]
,
}
,
}
,
{
id: "ksCokKAhQw",
type: "paragraph",
data: {
text: "Classic WYSIWYG editors produce raw HTML-markup with both content data and content appearance. On the contrary, <mark class="cdx-marker">Editor.js outputs JSON object</mark> with data of each Block.",
}
,
}
,
{
id: "XKNT99-qqS",
type: "attaches",
data: {
file: {
url: "https://drive.google.com/user/catalog/my-file.pdf",
size: 12902,
name: "file.pdf",
extension: "pdf",
}
,
title: "My file",
}
,
}
,
{
id: "7RosVX2kcH",
type: "paragraph",
data: {
text: "Given data can be used as you want: render with HTML for Web clients, render natively for mobile apps, create the markup for Facebook Instant Articles or Google AMP, generate an audio version, and so on.",
}
,
}
,
{
id: "eq06PsNsab",
type: "paragraph",
data: {
text: "Clean data is useful to sanitize, validate and process on the backend.",
}
,
}
,
{
id: "hZAjSnqYMX",
type: "image",
data: {
file: {
url: "assets/codex2x.png",
}
,
withBorder: false,
withBackground: false,
stretched: true,
caption: "CodeX Code Camp 2019",
}
,
}
,
]
,
}
Show the whole example

API is the feature

Each Block is provided via a plugin. It's easy to create your own. Dozens of created. Same with Inline Formatting and Block Tunes.
Picture if Editor.js Toolbox, Inline Toolbar and Block Tunes menu

Sponsors

Editor.js is free and open source. If you rely on it, you may be interested in supporting its maintenance and evolution.
Gold
Silver
Backers

Global WYSIWYG ecosystem

Editor.js is not just an editor. It is a large community of developers around the world creating new tools, integrations, building new products and features. And we really need your star to support the community's growth.
Thousands of people already write with us.
Product Of The Day medalProduct Of The Week Medal Product Of The Month medal
#1 on Product Hunt
CodeX logo

Join us

Editor.js is made by CodeX — a non-profit team of passionate talents around the world interested in making high-quality open-source products. We're open to people who want to constantly improve their skills and grow professionally with experiments in cutting-edge technologies.
Join CodeX