<picture> <source media="(prefers-color-scheme: dark)" srcset="./assets/logo_night.png"> <source media="(prefers-color-scheme: light)" srcset="./assets/logo_day.png"> </picture>

editorjs.io | documentation | changelog

About

Editor.js is an open-source text editor offering a variety of features to help users create and format content efficiently. It has a modern, block-style interface that allows users to easily add and arrange different types of content, such as text, images, lists, quotes, etc. Each Block is provided via a separate plugin making Editor.js extremely flexible.

Editor.js outputs a clean JSON data instead of heavy HTML markup. Use it in Web, iOS, Android, AMP, Instant Articles, speech readers, AI chatbots — everywhere. Easy to sanitize, extend and integrate with your logic.

• 😍 Modern UI out of the box
• 💎 Clean JSON output
• ⚙️ Well-designed API
• 🛍 Various Tools available
• 💌 Free and open source

Installation

It's quite simple:

1. Install Editor.js
2. Install tools you need
3. Initialize Editor's instance

Install using NPM, Yarn, or CDN:

npm i @editorjs/editorjs

Choose and install tools:

• Heading
• Quote
• Image
• Simple Image (without backend requirement)
• Nested List
• Checklist
• Link embed
• Embeds (YouTube, Twitch, Vimeo, Gfycat, Instagram, Twitter, etc)
• Table
• Delimiter
• Warning
• Code
• Raw HTML
• Attaches
• Marker
• Inline Code

See the 😎 Awesome Editor.js list for more tools.

Initialize the Editor:

<div id="editorjs"></div>

import EditorJS from '@editorjs/editorjs'

const editor = new EditorJS({
  tools: {
   // ... your tools
  }
})
`

See details about Installation and Configuration at the documentation.

Saving Data

Call editor.save() and handle returned Promise with saved data.

const data = await editor.save()

Example

Take a look at the example.html to view more detailed examples.

Roadmap

• Unified Toolbars
  • <input checked="" disabled="" type="checkbox"> Block Tunes moved left
  • <input checked="" disabled="" type="checkbox"> Toolbox becomes vertical
  • <input checked="" disabled="" type="checkbox"> Ability to display several Toolbox buttons by the single Tool
  • <input checked="" disabled="" type="checkbox"> Block Tunes become vertical
  • <input checked="" disabled="" type="checkbox"> Block Tunes support nested menus
  • <input checked="" disabled="" type="checkbox"> Block Tunes support separators
  • <input checked="" disabled="" type="checkbox"> Conversion Menu added to the Block Tunes
  • <input checked="" disabled="" type="checkbox"> Unified Toolbar supports hints
  • <input checked="" disabled="" type="checkbox"> Conversion Toolbar uses Unified Toolbar
  • <input checked="" disabled="" type="checkbox"> Inline Toolbar uses Unified Toolbar
• Collaborative editing
  • <input disabled="" type="checkbox"> Implement Inline Tools JSON format
  • <input disabled="" type="checkbox"> Operations Observer, Executor, Manager, Transformer
  • <input disabled="" type="checkbox"> Implement Undo/Redo Manager
  • <input disabled="" type="checkbox"> Implement Tools API changes
  • <input disabled="" type="checkbox"> Implement Server and communication
  • <input disabled="" type="checkbox"> Update basic tools to fit the new API
• Other features
  • <input disabled="" type="checkbox"> Blocks drag'n'drop
  • <input disabled="" type="checkbox"> New cross-block selection
  • <input disabled="" type="checkbox"> New cross-block caret moving
• Ecosystem improvements
  • <input checked="" disabled="" type="checkbox"> CodeX Icons — the way to unify all tools and core icons
  • <input checked="" disabled="" type="checkbox"> New Homepage and Docs
  • <input checked="" disabled="" type="checkbox"> @editorjs/create-tool for Tools bootstrapping
  • <input disabled="" type="checkbox"> Editor.js DevTools — stand for core and tools development
  • <input disabled="" type="checkbox"> Editor.js Design System
  • <input disabled="" type="checkbox"> Editor.js Preset Env
  • <input disabled="" type="checkbox"> Editor.js ToolKit
  • <input disabled="" type="checkbox"> New core bundle system
  • <input disabled="" type="checkbox"> New documentation and guides

<picture> <source width="162px" media="(prefers-color-scheme: dark)" srcset="./assets/support_night.png"> <source width="162px" media="(prefers-color-scheme: light)" srcset="./assets/support_day.png"> </picture>

Like Editor.js?

You can support project improvement and development of new features with a donation to our team.

Donate via OpenCollective \ Donate via Crypto \ Donate via Patreon

Why donate

Donations to open-source products have several advantages for your business:

• If your business relies on Editor.js, you'll probably want it to be maintained
• It helps Editor.js to evolve and get the new features
• We can support contributors and the community around the project. You'll receive well organized docs, guides, etc.
• We need to pay for our infrastructure and maintain public resources (domain names, homepages, docs, etc). Supporting it guarantees you to access any resources at the time you need them.
• You can advertise by adding your brand assets and mentions on our public resources

Sponsors

Support us by becoming a sponsor. Your logo will show up here with a link to your website.

Become a Sponsor

Backers

Thank you to all our backers

Become a Backer

Contributors

This project exists thanks to all the people who contribute.

Need something special?

Hire CodeX experts to resolve technical challenges and match your product requirements.

• Resolve a problem that has high value for you
• Implement a new feature required by your business
• Help with integration or tool development
• Provide any consultation

Contact us via team@codex.so and share your details

Community

• Official Tools
• Awesome Editor.js
• Good First Tasks
• Contributing
• Telegram Chat

About CodeX

CodeX is a team of digital specialists around the world interested in building high-quality open source products on a global market. We are open for young people who want to constantly improve their skills and grow professionally with experiments in cutting-edge technologies.