Editor.js Parser and Renderer for React.js or Next.js
The package lets you render the content of Editor.js and lets you extend the functionality easily.

Install the package
Run
npm install @mobtakr/editorjs-parser
Editor.js Output
Editor.js is a great block-styled editor. It lets you embed a text editor in your application.
The output of Editor.js is a JSON Object like below:
{
"time": 1664376861686,
"blocks": [
{
"id": "9xynmGdBTA",
"type": "paragraph",
"data": {
"text": "I am a text generated from Editor.js"
}
},
{
"id": "IF6QCbnQQz",
"type": "paragraph",
"data": {
"text": "I am a text generated from Editor.js"
}
},
{
"id": "l4frEHcq2o",
"type": "list",
"data": {
"style": "ordered",
"items": [
"I am item one,",
"and I am two",
"three ",
"four"
]
}
}
],
"version": "2.23.2"
}
How to use Editor.js parser?
Below is an example of how you can integrate Editor.js Parser into your React.js or Next.js application.
First install the npm package
npm install @mobtakr/editorjs-parser
Then create a component to render the content
import { EditorContent } from "@mobtakr/editorjs-parser";
export const PostContent = (props: { content: string }) => {
const content = JSON.parse(props.content);
const blocks = content.blocks;
return (<EditorContent blocks={blocks} sanitizeHtmlOptions={} />);
};
In the example above you first, parse the JSON object
Finally, pass a blocks prop <EditorContent />
component.
Optional you can pass sanitizeHtmlOptions, See https://www.npmjs.com/package/sanitize-html
Styling and the Style Object
Each Editor.js block has a type and an id.
{
"id": "9xynmGdBTA",
"type": "paragraph",
"data": {
"text": "I am a text generated from Editor.js"
}
}
For type paragraph
you can style it like this
.paragraph {
font-size: 1rem;
margin: 10px 0;
}
Besides that, each block has another class which is block
.
So you can add some shared styles to your blocks.
.block {
position: relative;
margin-block: 10px;
}
Supported blocks
Package currently supports following blocks:
✅ editorjs/checklist (official)
✅ editorjs/code (official)
✅ editorjs/header (official)
✅ editorjs/image (official)
✅ editorjs/list (official)
✅ editorjs/paragraph (official)
✅ editorjs/quote (official)
✅ editorjs/table (official)
✅ editorjs-youtube-embed (unofficial)
Add support for additional blocks
You can extend the functionality or override a default block by passing the block as a prop to EditorContent.
For each block, you can pass a prob where the key is the type of the block and the value is a function that accepts
- The block data.
- An optional sanitize html option.
and returns ReactNode or JSX.
Example
import { EditorContent, BlockFactory } from "@mobtakr/editorjs-parser";
type ParagraphFactoryProps = {
data: {
text?: string;
};
};
export const ParagraphFactory: BlockFactory = (
block: ParagraphFactoryProps,
sanitizeHtmlOptions?: IOptions
) => {
const html = sanitizeHtml(block?.data?.text || "", sanitizeHtmlOptions);
if (!html) return null;
return (
<React.Fragment>
<p>{html}</p>
</React.Fragment>
);
};
export const PostContent = (props: { content: string }) => {
const content = JSON.parse(props.content);
const blocks = content.blocks;
return (<EditorContent blocks={blocks} sanitizeHtmlOptions={} paragraph={ParagraphFactory}/>);
};