Editor.js

Editor.js is a block-styled editor for rich media stories. It outputs clean data in JSON instead of heavy HTML-markup. And more important thing is that Editor.js is designed to be API extendable and pluggable.<br><br>So there are few key features:<br><br>- Clean data output<br>- API pluggable<br>- Open source<br><br><h3>What does it mean block-styled</h3>In other editors the workspace is provided by single contenteditable element in where you can create different HTML markup. All of us saw permanent bugs with moving text fragments or scaling images, while page parts are jumping and twitches. Or highlighting big parts of text in case when you just want to make few words to be a heading or bold.<br><br>Editor.js workspace consists of separate Blocks: paragraphs, headings, images, lists, quotes, etc. Each of them is an independent contenteditable element (or more complex structure) provided by Plugin and united by Editor's Core.<br>At the same time, most useful features as arrow-navigation, copy &amp; paste, cross block selection and others works almost as in the familiar editors.<br><br><h3>What is clean data</h3>But more interest thing is, as mentioned above, that Editor.js returns clean data instead of HTML-markup. Take a look at the example.<br><br><pre>{
    "time" : 1550476186479,
    "blocks" : [
        {
            "type" : "paragraph",
            "data" : {
                "text" : "The example of text that was written in &lt;b&gt;one of popular&lt;/b&gt; text editors."
            }
        },
        {
            "type" : "header",
            "data" : {
                "text" : "With the header of course",
                "level" : 2
            }
        },
        {
            "type" : "paragraph",
            "data" : {
                "text" : "So what do we have?"
            }
        }
    ],
    "version" : "2.8.1"
}
</pre><br>As you can see, there are only data we need: list of structural Blocks with their content description.<br>You can use this data to easy render in Web, native mobile/desctop application, pass to Audio Readers, create templates for Facebook Instant Articles, AMP, RSS, create chat-bots and many other.<br><br>Also, clean data can be useful for backend processing: sanitizing, validation, injecting an advertising or other stuff, extracting Headings, make covers for social networks from Image Blocks and other.<br><br><h3>API pluggable?</h3>A key value of the Editor is the API. All main functional units of the editor — Blocks, Inline Formatting Tools, Block Tunes — are provided by external plugins that uses Editor's API.<br><br>We decide to extract all this Tools to separate scripts to make Editor's Core more abstract and make API more powerful. Any challenges and tasks you are facing can be implemented by you own plugins using the API. <br>At the same time, API is created to be easy-to-understand and simple-to-use.<br><br><h3>Open Source?</h3>Editor.js is more than just an editor. It is a big open-source community of developers and contributors. Anyone can suggest an improvement or bug fix. Anyone can create new cool API features and plugins.<br><br>We will support each developer of Editor.js plugins: best solutions will be collected to the awesome-lists and promoted to the community. Together we can create a big suite of different Blocks, Inline Tools, Block Tunes that can hit wide spectre of tasks.<br>

Free

<p>Support Editor.js with a small monthly donation and help us continue our work.</p>

<p>Become a Sir Supporter with a monthly donation form $100 and get your logo with a link to your site on the Github README and on front page of our website <a href="https://editorjs.io." rel="nofollow noopener" target="_blank">https://editorjs.io.</a> </p>

Sir 🎩

<p style="">A separate Telegram chat with maintainers will provide you with prioritized direct support. You will have influence on the roadmap, and reported issues will be top-prioritized. If you wish, we can add a special block with your logo on all pages of <a rel="nofollow noopener" target="_blank">editorjs.io</a></p>

Recent posts by Editor.js