Registry / serialization / editorjs-html

editorjs-html

library4.0.5jsnpmunverified

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.

serialization

npm install editorjs-html

package ↗

INSTALL

IMPORT

SIG · EDITORJS-HTML

editorjs-html

serializationjavascriptv4.0.5

Install

—

Import

—

Disk

—

Pass rate

0/ 6

Env Coverage0 / 6

glibc

18–22

musl

18–22

Install & Compatibility

Where this runs

tested against v? · npm install

Install × environment matrix

Each cell = how many times install + import succeeded across repeated harness runs. Partial = flaky.
glibc = Debian/Ubuntu slim · musl = Alpine Linux

musl

node 18–226 runs

build_error

glibc

node 18–226 runs

build_error

Code

Verified usage

Verified import paths — ran on the pinned version, not inferred.

edjsHTML

✓ import edjsHTML from 'editorjs-html';

✗ import { edjsHTML } from 'editorjs-html';

The main export is a default export, which is a function that returns an instance of the parser.

edjsHTML

✓ const edjsHTML = require('editorjs-html');

✗ const { edjsHTML } = require('editorjs-html');

For CommonJS environments, `require` returns the default exported function directly.

ParserOptions

✓ import type { ParserOptions } from 'editorjs-html';

While not directly used in runtime, type imports are useful for configuring the parser, especially the `strict` option or custom block parsers.

Demonstrates initializing the parser and converting a full Editor.js data object into an array of HTML strings, then joining them.

import edjsHTML from 'editorjs-html'; // Example Editor.js data const editorjsData = { blocks: [ { id: "qweasd123", type: "header", data: { text: "Hello Editor.js HTML!", level: 2 } }, { id: "zxcvbnm456", type: "paragraph", data: { text: "This is an example of parsing Editor.js clean data into HTML using editorjs-html." } }, { id: "lkjhgfd789", type: "list", data: { style: "unordered", items: [ "First item", "Second item", "Third item" ] } } ] }; const edjsParser = edjsHTML(); const htmlOutput = edjsParser.parse(editorjsData); console.log(htmlOutput.join('\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>

Debug

Known issues

breakingVersion 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.

fix

Review the v4 documentation for changes in API, particularly `edjsHTML` instantiation and options. Ensure custom parsers align with the new structure.

affects: >=4.0.0

breakingThe `parseStrict()` and `validate()` functions have been removed in version 4.0.0. Strict mode functionality is now controlled via options during parser initialization.

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.

affects: >=4.0.0

gotchaWhen 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.

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.

affects: >=4.0.0

gotchaIn 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.

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.

affects: >=4.0.0

gotchaThe `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.

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.

affects: >=1.0.0

Errors

Common errors & fixes

TypeError: edjsParser.parseStrict is not a function

Attempting to use the `parseStrict` method, which was removed in v4.

fix

Use the `parse` method with the `strict: true` option during parser initialization: `const edjsParser = edjsHTML({}, { strict: true }); const html = edjsParser.parse(data);`

ReferenceError: edjsHTML is not defined (in browser, from CDN)

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.

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).

Error: Missing parser function for block type 'myCustomBlock'

In strict mode, the parser encountered a block type ('myCustomBlock') for which no corresponding custom parser function was provided.

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 });`

TypeError: Cannot read properties of undefined (reading 'blocks')

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.

fix

Ensure the argument passed to `edjsParser.parse()` is a valid Editor.js data object with a `blocks` array, e.g., `{ blocks: [...] }`.

Upgrade

Version history

4.0.5latest on npm

Audit

Dependencies

No dependency data recorded yet.

Agent activity

8 hits · last 30 days

node

Resources

packagehttps://www.npmjs.com/package/editorjs-html ↗