Rendering JSON from Editor Js to HTML
If you are here, you probably have known about EditorJs already. But, in case you have not.
EditorJs is a rich text editor you can embed into your applications. It provides a clean polished interface, that feels modern and is customizable. In order to achieve this, EditorJs considers each piece of data as blocks. A block can be an image, a paragraph, a header and even your own personal editor block.
All cool, but the issue however is, EditorJs outputs “JSON” instead of HTML. Now, JSON is good when you have to store it or send it over a network. But, you cannot use on your website unless you parse it into HTML. Sadly, at this point of time EditorJs does not provide a way to display this data on a web page. However on the flipside, you are left with generating HTML, in a way that best fits your project. This sounds best but, still leaves you with writing your own parser.
Now, you have two options, either to write your own parser from scratch or use some pre-built solution. One such solution is editorjs-html. It parses your editorjs generated JSON to HTML.
Benefits of using editorjs-html
- You can use it with any kind of project or framework.
- Parse inside browser, during build time or even on your server.
- Support for Basic HTML Blocks. You can even override this parsing behavior.
- Extend for your own custom blocks, by simply providing a parser function.
- Generate HTML that suits your project, rather making your project suiting the library.
Since, editorjs-html outputs plain HTML, you can style it the way you want.
Using editorjs-html
For this example, we will simply use sample JSON data generated on EditorJS main website.
Sample Data
The data is copied as is from the editorjs website.
Install editorjs-html
$ npm install editorjs-html- For browser, either use CDN or use the pre-built script provided on main repository.
Initialize the parser
Parse your editorjs data to HTML.
Custom Parser Functions
editorjs-html also supports custom parser functions, for your custom editorjs blocks. Just define them and pass them on to editorjsHTML(parserFunctions).
Demo Usage on Browser
Demo Usage on Nodejs
Thank you.
