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
  - React Native
  - Angular
  - Svelte
- 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

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-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
VolgaIgor/editorjs-gallery — Gallery Block with multiloading and sorting
AnatoliyKozlov/editorjs-telegram-post — Telegram Post widget
renanrider/editorjs-audio-player - Simple Audio Tool, works only with pasted URLs with audio src and requires no server-side uploader.

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
ace-code-editorjs — Ace Code Editor block for the Editor.js with language selection.
@rxpm/editor-js-code - Custom Code Plugin adds code examples to articles with a language dropdown.

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
@sotaproject/strikethrough - tool for strikethrough text
editorjs-text-color-plugin - Inline tool for coloring/marking selected text with customized colors
VolgaIgor/editorjs-annotation — Tool for adding an extended annotation to any text in EditorJS blocks

Block Tune 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
editorjs-to-html — editorjs format parser to html with saving editorjs markup format
editor-js-component - an editorjs library that can use Vue and React frameworks

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
editorjs-react — Editor.js React parser to parse Editor.js data to JSX components

React Native

editorjs-viewer-native — A React Native solution to parse outputData generated by Editor.Js

Angular

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

Svelte

sveditorjs — This library provides svelte 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
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
rahmanramsi/filament-editorjs - Editor JS for filamentphp
bumpcore/editor.php - An advanced library for parsing and manipulating Editor.js output using either vanilla PHP or Laravel.
editorjs-simple-html-parser - 2 way parser for Editor.js: JSON to HTML & HTML to JSON

Python

django-editorjs-fields — Editor.js integration for Django
pyEditorJS - A very simple Editor.js parser written in pure Python

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
Cotonti CMF Editor.js plugin - Content editor plugin for Cotonti CMF

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!

IrenSystem - System for business - allows you to work with clients, managers, contractors and suppliers
beemy - Dedicated blog builder to better manage content
Notice.studio - CMS & component editor that blends in your website
Poda — Project planning and roadmaping
Slid - Video note-taking tool for online learners.
Unicorn Platform - Create landing pages and write blogs.
MarsX - AI/NoCode/ProCode builder.
Walkthrough - Write great codelab style tutorials.
Drafts - Web based text editor for writing quick drafts
Cai - AI Writer, Content Generator & Writing Assistant
Chronopin - Track the release dates of your favorite games and interests. Also share, review, and comment on your posts with a like-minded community.
Contractify - Contract management software for e-signing, managing and automating all your contracts online
Tulsk - AI-powered project management tool designed to simplify your workflow.
WebResearcherJS - Firefox extension which allows users to take notes on webpages

Open source projects

frappeframework.com - A meta data based framework which has workspace feature which uses Editor.js
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
enassi - Encryption assistant that encrypts and stores your notes and files.
EvaNotebook - A collaborative peer-to-peer notebook for Web Technologies

Back to top

License

editor-js/awesome-editorjs

About

Topics

Resources

License

Code of conduct

Stars

Watchers

Forks

Contributors 68