Editor.js
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 StartedFree 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: 1696445505677,
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",
} , 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.
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
Become a sponsor
More options 
Thousands of people already write with us.
#1 on Product Hunt
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.