base on A block-style editor with clean JSON output <p align="center"> <a href="https://editorjs.io/"> <picture> <source media="(prefers-color-scheme: dark)" srcset="./assets/logo_night.png"> <source media="(prefers-color-scheme: light)" srcset="./assets/logo_day.png"> <img alt="Editor.js Logo" src="./assets/logo_day.png"> </picture> </a> </p> <p align="center"> <a href="https://editorjs.io/">editorjs.io</a> | <a href="https://editorjs.io/base-concepts/">documentation</a> | <a href="https://github.com/codex-team/editor.js/blob/next/docs/CHANGELOG.md">changelog</a> </p> <p align="center"> <a href="https://www.npmjs.com/package/@editorjs/editorjs"> <img src="https://flat.badgen.net/npm/v/@editorjs/editorjs?icon=npm" alt="npm"/> </a> <a href="https://www.npmjs.com/package/@editorjs/editorjs"> <img src="https://flat.badgen.net/bundlephobia/minzip/@editorjs/editorjs?color=green" alt="Minzipped size"/> </a> <a href="https://github.com/codex-team/editor.js#backers"> <img src="https://opencollective.com/editorjs/backers/badge.svg" alt="Backers on Open Collective"/> </a> <a href="https://github.com/codex-team/editor.js#sponsors"> <img src="https://opencollective.com/editorjs/sponsors/badge.svg" alt="Sponsors on Open Collective"/> </a> </p> ## 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 <picture> <img alt="Editor.js Overview" src="./assets/overview.png"> </picture> ## 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](https://www.jsdelivr.com/package/npm/@editorjs/editorjs): ```bash npm i @editorjs/editorjs ``` Choose and install tools: - [Heading](https://github.com/editor-js/header) - [Quote](https://github.com/editor-js/quote) - [Image](https://github.com/editor-js/image) - [Simple Image](https://github.com/editor-js/simple-image) (without backend requirement) - [Nested List](https://github.com/editor-js/nested-list) - [Checklist](https://github.com/editor-js/checklist) - [Link embed](https://github.com/editor-js/link) - [Embeds](https://github.com/editor-js/embed) (YouTube, Twitch, Vimeo, Gfycat, Instagram, Twitter, etc) - [Table](https://github.com/editor-js/table) - [Delimiter](https://github.com/editor-js/delimiter) - [Warning](https://github.com/editor-js/warning) - [Code](https://github.com/editor-js/code) - [Raw HTML](https://github.com/editor-js/raw) - [Attaches](https://github.com/editor-js/attaches) - [Marker](https://github.com/editor-js/marker) - [Inline Code](https://github.com/editor-js/inline-code) See the [😎 Awesome Editor.js](https://github.com/editor-js/awesome-editorjs) list for more tools. Initialize the Editor: ```html <div id="editorjs"></div> ``` ```javascript import EditorJS from '@editorjs/editorjs' const editor = new EditorJS({ tools: { // ... your tools } }) ```` See details about [Installation](https://editorjs.io/getting-started/) and [Configuration](https://editorjs.io/configuration/) at the documentation. ### Saving Data Call `editor.save()` and handle returned Promise with saved data. ```javascript const data = await editor.save() ``` ### Example Take a look at the [example.html](example/example.html) to view more detailed examples. ## Roadmap <img align="right" width="342" src="./assets/roadmap.png" style="margin-left: 30px"> - Unified Toolbars - [x] Block Tunes moved left - [x] Toolbox becomes vertical - [x] Ability to display several Toolbox buttons by the single Tool - [x] Block Tunes become vertical - [x] Block Tunes support nested menus - [x] Block Tunes support separators - [x] Conversion Menu added to the Block Tunes - [x] Unified Toolbar supports hints - [x] Conversion Toolbar uses Unified Toolbar - [x] Inline Toolbar uses Unified Toolbar - Collaborative editing - [ ] Implement Inline Tools JSON format - [ ] Operations Observer, Executor, Manager, Transformer - [ ] Implement Undo/Redo Manager - [ ] Implement Tools API changes - [ ] Implement Server and communication - [ ] Update basic tools to fit the new API - Other features - [ ] Blocks drag'n'drop - [ ] New cross-block selection - [ ] New cross-block caret moving - Ecosystem improvements - [x] CodeX Icons — the way to unify all tools and core icons - [x] New Homepage and Docs - [x] @editorjs/create-tool for Tools bootstrapping - [ ] Editor.js DevTools — stand for core and tools development - [ ] Editor.js Design System - [ ] Editor.js Preset Env - [ ] Editor.js ToolKit - [ ] New core bundle system - [ ] New documentation and guides <a href="https://opencollective.com/editorjs/donate" target="_blank"> <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"> <img width="162px" alt="Support Editor.js" src="./assets/support_day.png"> </picture> </a> <br> ## Like Editor.js? You can support project improvement and development of new features with a donation to our team. [Donate via OpenCollective](https://opencollective.com/editorjs) \ [Donate via Crypto](https://codex.so/donate) \ [Donate via Patreon](https://www.patreon.com/editorjs) ### 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. <p> <a href="https://www.mister-auto.com/" target="_blank"> <img src="https://opencollective-production.s3.us-west-1.amazonaws.com/5131a030-5672-11ec-be79-1d003d12ec5f.png" width="50" alt="Mister Auto"> </a> <a href="https://www.uplucid.com/" target="_blank"> <img src="https://logo.clearbit.com/uplucid.com" width="50" alt="UPLUCID, K.K."> </a> <a href="https://www.contentharmony.com/" target="_blank"> <img src="https://opencollective-production.s3.us-west-1.amazonaws.com/89edb1b0-7d82-11ed-b99e-ab6e6f9cb69f.png" width="50" alt="Kane Jamison"> </a> <a href="https://www.contentharmony.com/product/" target="_blank"> <img src="https://logo.clearbit.com/contentharmony.com" width="50" alt="Content Harmony"> </a> </p> [Become a Sponsor](https://opencollective.com/editorjs/contribute/sir-8679/checkout) ### Backers Thank you to all our backers <a href="https://opencollective.com/editorjs#backers" target="_blank"><img src="https://opencollective.com/editorjs/backers.svg?width=890&avatarHeight=34"></a> [Become a Backer](https://opencollective.com/editorjs/contribute/backer-8632/checkout) ### Contributors This project exists thanks to all the people who contribute. <p><img src="https://opencollective.com/editorjs/contributors.svg?width=890&button=false&avatarHeight=34" /></p> ### 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 [email protected] and share your details ## Community - [Official Tools](https://github.com/editor-js) - [Awesome Editor.js](https://github.com/editor-js/awesome-editorjs) - [Good First Tasks](https://github.com/codex-team/editor.js/issues?q=is%3Aopen+is%3Aissue+label%3A%22good+first+task%22) - [Contributing](https://editorjs.io/contributing/) - [Telegram Chat](https://t.me/codex_editor) # About CodeX <img align="right" width="120" height="120" src="https://codex.so/public/app/img/codex-logo.svg" hspace="50"> 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](https://codex.so/join) for young people who want to constantly improve their skills and grow professionally with experiments in cutting-edge technologies. | 🌐 | Join 👋 | Twitter | Instagram | | -- | -- | -- | -- | | [codex.so](https://codex.so) | [codex.so/join](https://codex.so/join) |[@codex_team](http://twitter.com/codex_team) | [@codex_team](http://instagram.com/codex_team/) | ", Assign "at most 3 tags" to the expected json: {"id":"355","tags":[]} "only from the tags list I provide: [{"id":39,"name":"3d-generation","display_name":"3D generation","slug":"3d-generation"},{"id":3,"name":"ai-agent","display_name":"AI agent","slug":"ai-agent"},{"id":8,"name":"ai-coding","display_name":"AI coding assistant","slug":"ai-coding"},{"id":5,"name":"ai-image","display_name":"AI image generation","slug":"ai-image"},{"id":9,"name":"ai-infrastructure","display_name":"AI infrastructure","slug":"ai-infrastructure"},{"id":10,"name":"ai-memory","display_name":"AI memory","slug":"ai-memory"},{"id":11,"name":"ai-skills","display_name":"AI skills","slug":"ai-skills"},{"id":12,"name":"ai-translation","display_name":"AI translation","slug":"ai-translation"},{"id":6,"name":"ai-video","display_name":"AI video generation","slug":"ai-video"},{"id":4,"name":"ai-voice","display_name":"AI voice","slug":"ai-voice"},{"id":7,"name":"ai-workflow","display_name":"AI workflow","slug":"ai-workflow"},{"id":22,"name":"audio-processing","display_name":"Audio processing","slug":"audio-processing"},{"id":29,"name":"authentication","display_name":"Authentication","slug":"authentication"},{"id":51,"name":"bundler","display_name":"Bundler","slug":"bundler"},{"id":41,"name":"chatbot","display_name":"Chatbot","slug":"chatbot"},{"id":27,"name":"cloud-native","display_name":"Cloud native","slug":"cloud-native"},{"id":1,"name":"computer-vision","display_name":"Computer vision","slug":"computer-vision"},{"id":37,"name":"crypto-trading","display_name":"Crypto trading","slug":"crypto-trading"},{"id":57,"name":"curated-list","display_name":"Curated list","slug":"curated-list"},{"id":54,"name":"data-streaming","display_name":"Data streaming","slug":"data-streaming"},{"id":35,"name":"data-visualization","display_name":"Data visualization","slug":"data-visualization"},{"id":16,"name":"database-backup","display_name":"Database backup","slug":"database-backup"},{"id":49,"name":"design-system","display_name":"Design system","slug":"design-system"},{"id":38,"name":"digital-human","display_name":"Digital human","slug":"digital-human"},{"id":34,"name":"document-processing","display_name":"Document processing","slug":"document-processing"},{"id":44,"name":"ecommerce","display_name":"E-commerce","slug":"ecommerce"},{"id":45,"name":"emulator","display_name":"Emulator","slug":"emulator"},{"id":46,"name":"file-management","display_name":"File management","slug":"file-management"},{"id":32,"name":"fintech","display_name":"Fintech","slug":"fintech"},{"id":31,"name":"game-development","display_name":"Game development","slug":"game-development"},{"id":24,"name":"headless-browser","display_name":"Headless browser","slug":"headless-browser"},{"id":52,"name":"headless-cms","display_name":"Headless CMS","slug":"headless-cms"},{"id":36,"name":"home-automation","display_name":"Home automation","slug":"home-automation"},{"id":20,"name":"image-editing","display_name":"Image editing","slug":"image-editing"},{"id":28,"name":"iot","display_name":"IoT","slug":"iot"},{"id":13,"name":"local-llm","display_name":"Local LLM","slug":"local-llm"},{"id":17,"name":"mcp","display_name":"MCP","slug":"mcp"},{"id":47,"name":"monitoring","display_name":"Monitoring","slug":"monitoring"},{"id":2,"name":"nlp","display_name":"NLP","slug":"nlp"},{"id":26,"name":"observability","display_name":"Observability","slug":"observability"},{"id":40,"name":"pentesting","display_name":"Pentesting","slug":"pentesting"},{"id":48,"name":"programming-examples","display_name":"Programming examples","slug":"programming-examples"},{"id":42,"name":"proxy","display_name":"Proxy","slug":"proxy"},{"id":14,"name":"rag","display_name":"RAG","slug":"rag"},{"id":56,"name":"resume-building","display_name":"Resume building","slug":"resume-building"},{"id":33,"name":"robotics","display_name":"Robotics","slug":"robotics"},{"id":30,"name":"search","display_name":"Search","slug":"search"},{"id":43,"name":"self-hosted","display_name":"Self-hosted","slug":"self-hosted"},{"id":50,"name":"static-analysis","display_name":"Static analysis","slug":"static-analysis"},{"id":18,"name":"synthetic-data","display_name":"Synthetic data","slug":"synthetic-data"},{"id":19,"name":"text-to-speech","display_name":"Text to speech","slug":"text-to-speech"},{"id":53,"name":"ui-components","display_name":"UI components","slug":"ui-components"},{"id":15,"name":"vector-database","display_name":"Vector database","slug":"vector-database"},{"id":21,"name":"video-editing","display_name":"Video editing","slug":"video-editing"},{"id":25,"name":"web-scraping","display_name":"Web scraping","slug":"web-scraping"},{"id":55,"name":"webassembly","display_name":"WebAssembly","slug":"webassembly"},{"id":23,"name":"workflow-automation","display_name":"Workflow automation","slug":"workflow-automation"}]" returns me the "expected json"