Editor.js is The Best Modular Open-source Content Block Editor for 2022

There are many WYSIWYG content editors out there, however, this one is not your typical editor, it is a block editor that is similar to WordPress content block editor, and the best part it is free and open-source.

So What is Editor.js?

Editor.js is an open-source content editor library that eases block editing, ordering and customization. Moreover, it returns the data in readable clean JSON format, that it will be easily rendered as clean HTML.

Clean data is faster to load, easier to debug, and improve the over all performance for your project.

Editor.js is currently in active development by a group of open-source developers, who are keeping it updated and maintained.  It is also packed by a strong community of developers.

Why do we love Editor.js?

Before we start displaying the amazing features of this cool library, we would like to say why do we love it, as we do recommend it in your future projects:

1. Clean data output in JSON format
2. Easy to setup, simple to configure, and efficient to use
3. A large set of built-in features, and plugins
4. Supports all popular frameworks, and play well with other programming languages

Features

1. Works well with other JavaScript frameworks: React, Blaze.js, Vue, and Angular.
2. Can be used directly from the CDN
3. The editor organize all data in a structured clean JSON output
4. Developers can customize all tools shortcut
5. Medium like editor for text
6. Developer-friendly plugin API
7. Works well on mobile
8. Works seamlessly on all popular browsers
9. Minimal browser footprint
10. Strong community of developers and a rich ecosystem
11. Editor.js allows users to design and customize their content (page) layout
12. Comes with its in-line tools, such as: hyperlink, marker, style, inline code, tooltips, autocomplete, and more
13. Users can easily edit images within the content using an inline-editor or advanced image editor using a plugin.
14. Built-in support for adding and including file attachments

Plugins

Editor.js offers dozens of ready-to-use plugin that developers can easily add, or "plug" into their Editor.js install. Here is a list of the most important Editor.js plugins that we found:

1. Table plugin: The table plugin offers a rich highly customizable styles, cells, nested fields and more
2. Embed plugin: This one allows user to add embedded media from dozens of social media and services like YouTube, Facebook, Twitter, LinkedIn, Pexels, Amazon, Google snippets, and more.
3. Checklist plugin: Allows users to create a rich to-do or checklists directly into their content without breaking a sweat
4. Nested List plugin: Where users can add multi-leveled lists, simply by pressing Tab and Shift + Tab.
5. Drag-and-Drop plugin: Aids users to visually arrange, organize, and add elements to the page by just simple drag-and-drop
6. Markdown parser plugin: The Markdown Parser Plugin allows the user to import/ export Markdown content
7. Carousel Plugin: Carousel/Gallery Block for the Editor.js
8. Button plugin: Create a button with a link and text.
9. LaTeX plugin: LaTeX block support for EditorJS

Tested clients and browsers

1. Microsoft Edge 12+
2. Mozilla Firefox 18+
3. Google Chrome 49+
4. Apple Safari 10+
5. iOS Safari 10+
6. Opera 36+
7. Brave, Vivaldi, and  Google Chrome/ Chromium based browsers

Supports frameworks and programming languages

1. JavaScript's frameworks: Vue.js, React, Angular and Blaze.
2. PHP
3. Python (Tested with Django and Flask)
4. Ruby
5. Go
6. Swift and Swift UI
7. Kotlin

Editor.js for CMS

• Front Editor - Front Editor plugin for WordPress
• EditorJS - Backend formwidget for OctoberCMS
• Strapi-EditorJS - Replace Strapi default WYSIWYG editor with Editor.js.
• Admin Block Editor - Admin plugin for Pushword CMS (based on symfony)
• Editor.js - Directus Extension - Add an Editor.js interface to Directus

License

Editor.js is released under the Apache-2.0 License.

Resources

• Source Code
• Website