Awesome Editor.js

A curated list of awesome Editor.js tools, libraries and resources.

Inspired by the awesome list. Feel free to improve this list by contributing!

Contents

• Tools
  • Block Tools
    • Text and typography
    • Lists
    • Media & Embed
    • Table
    • Code
    • Button
    • Layout
  • Inline Tools
  • Block Tune Tools
  • Plugins
• Libraries
  • JavaScript
    • Vue.js
    • React
    • Angular
  • PHP
  • Python
  • Ruby
  • Go
  • Swift
  • Kotlin
  • Plugins for CMS
• Tutorials and sources
• Projects Using Editor.js
  • Open source projects

Tools

Block Tools

Text and typography

• @editorjs/paragraph — text block base tool
• @editorjs/header — header block
• @editorjs/quote — tool for quotes
• @editorjs/warning — warning tool can be used as editorials notifications or appeals
• @editorjs/delimiter — delimiter tool
• editorjs-alert - tool for adding colorful alert messages
• header-with-alignment - header block base tool with alignment control
• paragraph-with-alignment - text block base tool with alignment control. FYI editorjs-alignment-blocktune
• header-with-anchor - header block with the ability to set an anchor text
• editorjs-toggle-block - tool for nesting blocks in a toggleable element

Lists

• @editorjs/list — ordered or unordered (bulleted) lists
• @editorjs/nested-list — Multi-leveled lists
• @editorjs/checklist — checklists for your texts
• @calumk/editorjs-nested-checklist — Nested Checklists for your texts

Media & Embed

• @editorjs/image — image block
• @editorjs/simple-image — add images to article by pasting image URLs. no server-side uploader required
• @editorjs/link — link with preview
• @editorjs/attaches — attach files to your article
• @editorjs/embed — pasted patterns handling and inserts iframe with embedded content
• simple-image-editorjs — fork of the SimpleImage repository. It adds in extra functionality such as a toolbar to add images (rather than just drag and drop) and uses blob URL's to improve memory usage
• editorjs-github-gist-plugin — add Github Gists to Editor.js
• editorjs-social-post-plugin — embed uploaded posts from different social media platforms to Editor.js
• editorjs-inline-image — embed images from image files, URLs or Unsplash
• mr8bit/carousel-editorjs — Carousel/Gallery Block for the Editor.js
• mdgaziur/EditorJS-LaTeX — LaTeX block support for EditorJS
• rodrigoodhin/editorjs-image-gallery — image gallery block
• naduma/editorjs-mermaid — Mermaid Block for Editor.js

Table

• @editorjs/table — table constructor tool
• editorjs-table - Table contructor tool with great editing row/column options.

Code

• @editorjs/code — tools for code examples
• @editorjs/raw — include raw HTML code to your article
• editor-js-code — a fork of Code Tool for the Editor.js that allows to include code examples along with language codes that are supported by PrismJs in your articles
• editorjs-codemirror — Code Mirror for the Editor.js allows to include code examples in your articles.
• @bomdi/codebox — code syntax highlighting tool for Editor.js
• @calumk/editorjs-codeflask — Beautiful code highlighting, with linenumbers, and language support. Powered by Codeflask + PrismJs

Button

• editorjs-button — Create a button with a link and text.

Layout

• editorjs-layout — Layout block tool for Editor.js.
• @calumk/editorjs-columns — Multi-Column Layout tool, using nested editorJs Instances

Inline Tools

• @editorjs/marker — tool for highlighting text-fragments
• @editorjs/inline-code — tool for marking monospace code-fragments
• @editorjs/underline — underlining text fragments
• @editorjs/link-autocomplete — an upgraded version of base inline link tool with your server's search
• editorjs-hyperlink — a tool link with target & rel attribute for Editor.js
• editorjs-inline-spoiler-tool — inline text spoiler
• editorjs-inline-tool — create an inline tool for (editorjs.io) with text formatting tags (eg. bold, strong, em, u, ...)
• editorjs-inline — Inline-Editor.js Tool for Editor.js
• editorjs-inline-template — Inline-template Tool for Editor.js
• editorjs-style — Inline-style Tool for Editor.js
• editorjs-change-case — change case Tool for the Editor.js
• editorjs-tooltip — Tool for adding tooltips in EditorJS

Block Tune Tools

• editorjs-alignment-blocktune — Add text alignment to any Block Tools.
• editorjs-anchor — Add anchor field to any Block Tools

Plugins

• editorjs-drag-drop — Drag/Drop feature for Editor.js
• editorjs-undo — Undo/Redo feature for Editor.js
• editorjs-markdown-parser - Two plugins which allow you to export/import Markdown file

Libraries

JavaScript

• editorjs-parser — a library to parse Editorjs clean data to HTML in Node and Browser
• editorjs-html — a utility to parse editorjs clean data to HTML

Vue.js

• vue-editor-js — editor.js for Vue users

React

• react-editor-js — the unofficial editor-js component for React
• @stfy/react-editor.js — React wrapper component for Editor.js
• editorjs-blocks-react-renderer - React component to render blocks to semantic HTML5 tags

Angular

• @tinynodes/ngx-editorjs — This library provides Angular support for EditorJS.

PHP

• editorjs-php — server-side data validation, HTML sanitization and convertation output JSON to the Block objects
• orchid-editorjs-field
• yii2-editorjs-widget — Editor.js widget for Yii 2
• EditorjsBundle — Symfony bundle for Editor.js
• editorjs2html — Convert blocks of editorjs into html. The parser has been written in php
• nova-editor-js — Editor JS field for Laravel Nova
• codex-to-html — Converter EditorJS JSON to HTML
• magento2-editorjs — Editor.js module for Magento 2
• editorjs-symfony-parser-bundle — Editor.js-Bundle for Symfony to parse blocks created with Editor.js

Python

• django-editorjs-fields — Editor.js integration for Django

Ruby

• editor_js — it validates, parses, and renders content from editorjs
• render_editorjs — A modular and customizable Ruby renderer for Editor.js

Go

• micheleriva/editorjs-go — Fast markdown/HTML generator for Editor.js
• davidscottmills/goeditorjs - An extensible HTML/markdown generator for editorjs.
• rodrigoodhin/go-editorjs-parser — A Golang library which converts Editor.js JSON output to pure Markdown or HTML.

Swift

• editor.js-kit-ios - iOS framework for parsing and rendering blocks

Kotlin

• editor.js-kit-android - Android framework for parsing and rendering blocks

Plugins 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

Tutorials and sources

• editorjs.io — offical docs
• Tutorial: Integrating Editor.js into your react application
• Tutorial: Creating a custom editorjs block tool with React
• editorjs-examples — Examples of using Editor.js

Projects Using Editor.js

👉 Add your project!

• Notice.studio - CMS & component editor that blends in your website
• ⟑ djit.su — hyper-reactive notebook interface
• Appunti - Simple notes and actions to help organise your daily life
• Poda — Project planning and roadmaping
• Slid - Video note-taking tool for online learners.
• Unicorn Platform - Create landing pages and write blogs.
• Walkthrough - Write great codelab style tutorials.

Open source projects

• automad.org — a flat-file content management system and template engine
• CodeX Docs — documentation engine
• CodeX Media — platform for building modern website for educational or media organizations
• CodeX Notes — crossplatform desktop notes application based on Electron and Editor.js
• Noter - A State of the Art realtime and collaborative note taking platform
• OmniaWrite.com — a text editor engineered for creative writing

Back to top