{"id":15312,"library":"editorjs-html","title":"Editor.js HTML Parser","description":"editorjs-html is a robust, lightweight, and highly customizable utility designed to transform Editor.js's clean JSON output into standard HTML. The current stable version is 4.0.5, which represents a complete rewrite focusing on improved modularity, readability, and modern dependency usage. This library offers flexible integration across various JavaScript environments including plain JavaScript/TypeScript, React, Angular, and Vue. It supports all common Editor.js blocks out-of-the-box and provides a clear mechanism for extending its capabilities to parse custom Editor.js blocks. A key differentiator is its emphasis on strict parsing options and type safety, leveraging Editor.js's own type definitions for development ease. While a specific release cadence isn't explicitly stated, the rapid iteration to v4 suggests active maintenance and responsiveness to the Editor.js ecosystem.","status":"active","version":"4.0.5","language":"javascript","source_language":"en","source_url":null,"tags":["javascript","editorjs","html","parsing","json","editorjs-html","typescript"],"install":[{"cmd":"npm install editorjs-html","lang":"bash","label":"npm"},{"cmd":"yarn add editorjs-html","lang":"bash","label":"yarn"},{"cmd":"pnpm add editorjs-html","lang":"bash","label":"pnpm"}],"dependencies":[],"imports":[{"note":"The main export is a default export, which is a function that returns an instance of the parser.","wrong":"import { edjsHTML } from 'editorjs-html';","symbol":"edjsHTML","correct":"import edjsHTML from 'editorjs-html';"},{"note":"For CommonJS environments, `require` returns the default exported function directly.","wrong":"const { edjsHTML } = require('editorjs-html');","symbol":"edjsHTML","correct":"const edjsHTML = require('editorjs-html');"},{"note":"While not directly used in runtime, type imports are useful for configuring the parser, especially the `strict` option or custom block parsers.","symbol":"ParserOptions","correct":"import type { ParserOptions } from 'editorjs-html';"}],"quickstart":{"code":"import edjsHTML from 'editorjs-html';\n\n// Example Editor.js data\nconst editorjsData = {\n  blocks: [\n    {\n      id: \"qweasd123\",\n      type: \"header\",\n      data: {\n        text: \"Hello Editor.js HTML!\",\n        level: 2\n      }\n    },\n    {\n      id: \"zxcvbnm456\",\n      type: \"paragraph\",\n      data: {\n        text: \"This is an example of parsing Editor.js clean data into HTML using editorjs-html.\"\n      }\n    },\n    {\n      id: \"lkjhgfd789\",\n      type: \"list\",\n      data: {\n        style: \"unordered\",\n        items: [\n          \"First item\",\n          \"Second item\",\n          \"Third item\"\n        ]\n      }\n    }\n  ]\n};\n\nconst edjsParser = edjsHTML();\nconst htmlOutput = edjsParser.parse(editorjsData);\n\nconsole.log(htmlOutput.join('\\n'));\n// Expected output: <h2>Hello Editor.js HTML!</h2><p>This is an example of parsing Editor.js clean data into HTML using editorjs-html.</p><ul><li>First item</li><li>Second item</li><li>Third item</li></ul>","lang":"typescript","description":"Demonstrates initializing the parser and converting a full Editor.js data object into an array of HTML strings, then joining them."},"warnings":[{"fix":"Review the v4 documentation for changes in API, particularly `edjsHTML` instantiation and options. Ensure custom parsers align with the new structure.","message":"Version 4.0.0 introduced a complete rewrite of the library. While API changes are stated as 'minimal', users upgrading from v3 or earlier should review their code, especially around strict mode configuration and custom block parsers.","severity":"breaking","affected_versions":">=4.0.0"},{"fix":"Replace calls to `parseStrict()` and `validate()` with `edjsHTML({}, { strict: true }).parse(data)`. The `parse` method will now return an `Error` instance if strict mode is enabled and an issue occurs.","message":"The `parseStrict()` and `validate()` functions have been removed in version 4.0.0. Strict mode functionality is now controlled via options during parser initialization.","severity":"breaking","affected_versions":">=4.0.0"},{"fix":"Always define parser functions for all expected custom or third-party Editor.js blocks when initializing `edjsHTML(plugins)`. For critical applications, enable strict mode to catch missing parsers as errors.","message":"When a parser function for a specific block type is not available, the default behavior (non-strict mode) is to log a console error. The block will not be parsed into HTML.","severity":"gotcha","affected_versions":">=4.0.0"},{"fix":"When using strict mode, always check the return value of `parse()`: `const HTML = edjsParser.parse(editorjs_data); if (HTML instanceof Error) throw HTML;` and handle the error appropriately.","message":"In strict mode (`strict: true`), if a parser function for an encountered block type is missing, the `parse()` method will throw an `Error` instance instead of returning HTML. This requires explicit error handling.","severity":"gotcha","affected_versions":">=4.0.0"},{"fix":"If you need different parsing behaviors (e.g., strict vs. non-strict, or different sets of custom parsers), create a new `edjsHTML()` instance for each specific configuration.","message":"The `edjsHTML()` function is a factory that returns a new parser instance. Reusing the same parser instance across different configurations (e.g., changing strict mode or adding new custom parsers) is not supported without re-instantiating.","severity":"gotcha","affected_versions":">=1.0.0"}],"env_vars":null,"last_verified":"2026-04-21T00:00:00.000Z","next_check":"2026-07-20T00:00:00.000Z","problems":[{"fix":"Use the `parse` method with the `strict: true` option during parser initialization: `const edjsParser = edjsHTML({}, { strict: true }); const html = edjsParser.parse(data);`","cause":"Attempting to use the `parseStrict` method, which was removed in v4.","error":"TypeError: edjsParser.parseStrict is not a function"},{"fix":"If using a browser-only CDN build, ensure the script is loaded before your code. If using the npm package, `import edjsHTML from 'editorjs-html'` (ESM) or `const edjsHTML = require('editorjs-html')` (CJS).","cause":"The global `edjsHTML` variable is available if using the browser-specific CDN build. If you're using the universal build or the npm package, it's typically an ESM or CJS module.","error":"ReferenceError: edjsHTML is not defined (in browser, from CDN)"},{"fix":"Provide a parser function for 'myCustomBlock' when initializing `edjsHTML`. Example: `const plugins = { myCustomBlock: (block) => `<div class=\"custom\">${block.data.text}</div>` }; const edjsParser = edjsHTML(plugins, { strict: true });`","cause":"In strict mode, the parser encountered a block type ('myCustomBlock') for which no corresponding custom parser function was provided.","error":"Error: Missing parser function for block type 'myCustomBlock'"},{"fix":"Ensure the argument passed to `edjsParser.parse()` is a valid Editor.js data object with a `blocks` array, e.g., `{ blocks: [...] }`.","cause":"The `parse` method was called with `undefined` or a non-object value, or the object passed did not have a `blocks` property, which is expected for Editor.js data.","error":"TypeError: Cannot read properties of undefined (reading 'blocks')"}],"ecosystem":"npm"}