What is the best way to convert EditorJs text editor json to html elements?

Question

I'm trying to convert EditorJs output to Html. EditorJs outputs 'clean' data like this:

{
  "time": 1589987527499,
  "blocks": [
    {
      "type": "embded",
      "data": {
        "service": "youtube",
        "source": "https://www.youtube.com/watch?v=JbqGYgI3XY0",
        "embed": "https://www.youtube.com/embed/JbqGYgI3XY0",
        "width": 580,
        "height": 320,
        "caption": ""
      }
    },
    {
      "type": "image",
      "data": {
        "file": {
          "url": "http://localhost/uploads/images/1.jpg"
        },
        "caption": "",
        "withBorder": false,
        "stretched": false,
        "withBackground": false
      }
    },
    {
      "type": "header",
      "data": {
        "text": "test",
        "level": 2
      }
    }
  ],
  "version": "2.17.0"
}

how can I convert to this to raw HTML? Do I have to convert this manually?

Answer 1

The 'editorjs-html' library can help you parse you Json data to HTML. It provides some basic parser functions, but also allows you to override and define your own parser functions. It is framework independent, so you can use it anywhere.

• https://github.com/pavittarx/editorjs-html

The README repository has some good information, but you can also see some examples here, https://medium.com/@pavittarx/rendering-json-from-editor-js-to-html-bfb615ee78c4