editor-js / awesome-editorjs

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

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

• @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
• editorjs-aitext - ai suggestions tool based on paragraph tool and openai node lib
• title-editorjs - Provides Title (headings) Blocks for the Editor.js with various settings like H1...H6, colors (red, pink, purple...) and text-align. It is compatible with react and typescript, without causing typing errors.

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.
• sureshHARDIYA/flipboxplus - Configurable carousel that allows to add, edit, delete slides. Slides are configured to display as flipbox.
• image-with-link - upload image with link. forked by official image plugin

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
• editorjs-comment - Tool that allows you to add comment to editorjs

Block Tune Tools

• @editorjs/text-variant-tune — Block Tune for text variants: Call-out, Citation, Details
• editorjs-alignment-blocktune — Add text alignment to any Block Tools.
• VolgaIgor/editorjs-anchor — Add anchor field to any Block Tools
• VolgaIgor/editorjs-notice — Highlight or hide with caption any Editor.js block
• editorjs-indent-tune - Block Tune for indenting any type of block

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

awesome-editorjs's Issues

Impossible to disable server search

How to implement Editor.js in nextjs?

I tried to implement Editor.js in Nextjs but I failed to do it.

Here is my code.

import EditorJS from '@editorjs/editorjs';
import { useState, useEffect } from 'react';
import styles from '../styles/Home.module.css';

export default function Home() {
  const [editor, setEditor] = useState();
  useEffect(() => {
    setEditor(new EditorJS());
  }, []);
  return <div className={styles.container}></div>;
}

Error:

Server Error
ReferenceError: window is not defined
This error happened while generating the page. Any console logs will be displayed in the terminal window.

Can someone help me to implement EditorJs in NextJs?

Code: https://stackblitz.com/edit/nextjs-editorjs?devtoolsheight=33&file=pages/index.js

.hidden class is interfering with Tailwindcss

I my project I am using TailwindCSS for frontend, I noticed elements on my page disappeard on pages with editorjs.

The hidden elements were using classes like 'hidden lg:block'

I create an audio tool

How i can add an audio tool in the list?

https://www.npmjs.com/package/editorjs-audio-player

Element not defined

Hello:)
I have built a nextjs website using the awesome editors libraries, but there is an error occurring while deploying, I think it is originated from one of the editorjs lib.
I hope you can fix it. I really like the lib
error:

[11:17:03.861] Running build in Washington, D.C., USA (East) – iad1 (Hive)
[11:17:03.974] Cloning github.com/Bashamega/webdesignertool (Branch: main, Commit: 84c549b)
[11:17:03.983] Skipping build cache, deployment was triggered without cache.
[11:17:05.051] Cloning completed: 1.077s
[11:17:05.474] Running "vercel build"
[11:17:06.337] Vercel CLI 32.1.0
[11:17:06.593] Installing dependencies...
[11:17:14.727] 
[11:17:14.728] added 227 packages in 8s
[11:17:14.728] 
[11:17:14.728] 30 packages are looking for funding
[11:17:14.728]   run `npm fund` for details
[11:17:14.747] Detected Next.js version: 13.4.19
[11:17:14.749] Detected `package-lock.json` generated by npm 7+...
[11:17:14.749] Running "npm run build"
[11:17:15.163] 
[11:17:15.163] > [email protected] build
[11:17:15.163] > next build
[11:17:15.163] 
[11:17:15.680] Attention: Next.js now collects completely anonymous telemetry regarding usage.
[11:17:15.680] This information is used to shape Next.js' roadmap and prioritize features.
[11:17:15.680] You can learn more, including how to opt-out if you'd not like to participate in this anonymous program, by visiting the following URL:
[11:17:15.680] https://nextjs.org/telemetry
[11:17:15.681] 
[11:17:15.769] - info Creating an optimized production build...
[11:17:27.801] - info Compiled successfully
[11:17:27.802] - info Linting and checking validity of types...
[11:17:27.983] - info Collecting page data...
[11:17:38.364] - info Generating static pages (0/4)
[11:17:38.484] - info Generating static pages (1/4)
[11:17:38.556] ReferenceError: Element is not defined
[11:17:38.556]     at /vercel/path0/.next/server/chunks/767.js:45:381
[11:17:38.556]     at /vercel/path0/.next/server/chunks/767.js:45:38
[11:17:38.556]     at 9168 (/vercel/path0/.next/server/chunks/767.js:45:45)
[11:17:38.556]     at __webpack_require__ (/vercel/path0/.next/server/webpack-runtime.js:25:43)
[11:17:38.556]     at 3404 (/vercel/path0/.next/server/app/page.js:326:76)
[11:17:38.556]     at __webpack_require__ (/vercel/path0/.next/server/webpack-runtime.js:25:43)
[11:17:38.556]     at M (/vercel/path0/node_modules/next/dist/compiled/react-server-dom-webpack/cjs/react-server-dom-webpack-client.edge.production.min.js:24:46)
[11:17:38.556]     at ma (/vercel/path0/node_modules/next/dist/compiled/react-server-dom-webpack/cjs/react-server-dom-webpack-client.edge.production.min.js:28:324)
[11:17:38.557]     at Object.<anonymous> (/vercel/path0/node_modules/next/dist/compiled/react-server-dom-webpack/cjs/react-server-dom-webpack-client.edge.production.min.js:31:63)
[11:17:38.557]     at JSON.parse (<anonymous>)
[11:17:38.598] 
[11:17:38.598] Error occurred prerendering page "/". Read more: https://nextjs.org/docs/messages/prerender-error
[11:17:38.598] ReferenceError: Element is not defined
[11:17:38.598]     at /vercel/path0/.next/server/chunks/767.js:45:381
[11:17:38.599]     at /vercel/path0/.next/server/chunks/767.js:45:38
[11:17:38.599]     at 9168 (/vercel/path0/.next/server/chunks/767.js:45:45)
[11:17:38.599]     at __webpack_require__ (/vercel/path0/.next/server/webpack-runtime.js:25:43)
[11:17:38.599]     at 3404 (/vercel/path0/.next/server/app/page.js:326:76)
[11:17:38.599]     at __webpack_require__ (/vercel/path0/.next/server/webpack-runtime.js:25:43)
[11:17:38.599]     at M (/vercel/path0/node_modules/next/dist/compiled/react-server-dom-webpack/cjs/react-server-dom-webpack-client.edge.production.min.js:24:46)
[11:17:38.599]     at ma (/vercel/path0/node_modules/next/dist/compiled/react-server-dom-webpack/cjs/react-server-dom-webpack-client.edge.production.min.js:28:324)
[11:17:38.599]     at Object.<anonymous> (/vercel/path0/node_modules/next/dist/compiled/react-server-dom-webpack/cjs/react-server-dom-webpack-client.edge.production.min.js:31:63)
[11:17:38.599]     at JSON.parse (<anonymous>)
[11:17:38.599] - info Generating static pages (2/4)
[11:17:38.644] - info Generating static pages (3/4)
[11:17:38.676] - info Generating static pages (4/4)
[11:17:38.678] 
[11:17:38.678] > Export encountered errors on following paths:
[11:17:38.678] 	/page: /
[11:17:38.722] Error: Command "npm run build" exited with 1

This is the link for the source code: https://github.com/Bashamega/webdesignertool

styles don't work if using with tailwind css

editorjs editor and renderer both have no style if using in nextjs with tailwind css

Error: The Parser function of type "table" is not defined.

The parser can not parse table. How do you parse table? I am using remix js with ts and tailwind css.

import { OutputData } from "@editorjs/editorjs";
import editorJsHtml from "editorjs-html";

const EditorJsToHtml = editorJsHtml();

type Props = {
data: OutputData;
};
type ParsedContent = string | JSX.Element;

export default function EJ_Renderer({ data }: Props) {
const html = EditorJsToHtml.parse(data) as ParsedContent[];
console.log("🚀 ~ EJ_Renderer ~ html:", html); // 👈 this is where error comes from

return (

{/* {html.map((item, index) => {
if (typeof item === "string") {
return (
<div dangerouslySetInnerHTML={{ __html: item }} key={index}>

);
}
return item;
})} */} 👈 this code block destroys everything. Sometimes work though.

);
}

Is there any way to convert HTML to block data?

I have one large set of HTML data and won't use Editors js, but how can I convert HTML to data blocks, is there any workaround available?

Broken link

For this item.
editorjs-social-post-plugin — embed uploaded posts from different social media platforms to Editor.js

Thanks for this great service, and softwrae.

Hover triggers onChange

When any part of the table is in focus, for example if the cursor is in a cell, onChange() gets called whenever you hover/move over any part of the table. Thus simply dragging the mouse over different parts of the table, without ever clicking, will fire multiple onChange events.

In my case, I have embedded EditorJS in a macOS app WKWebView (Safari) and signal the app for changes through this event so I can do work in the app. The excessive calls makes it impossible to know when a true change actually occurs.

Is there a way to have a placeholder ONLY in the first block? (Please see the image).

I'd like to avoid this:

Every time user clicks enter a new block spawns and every new block has a place holder. Would be awesome if place holder followed the cursor like in Notion instead of just appearing inside every block.

.gif support

Hey guys,

We're huge fans of editor js, we have it installed in our app https://tickr.co.uk

Just wondering, how can we support .gif functionality with editor js? I can't seem to find a plugin for this.

Would we need to build one ourselves?

Thanks

Can we use Editor.js in react native?