How to render JSON types into HTML elements?

[Deri-Kurniawan]

How do I convert these JSON output types into HTML elements for content? Is there a library to render these nodes or do I have to create my own function to render JSON type nodes as html elements?

{
  "type": "doc",
  "content": [
    {
      "type": "heading",
      "attrs": {
        "level": 2
      },
      "content": [
        {
          "type": "text",
          "text": "Role:"
        }
      ]
    },
    {
      "type": "paragraph",
      "content": [
        {
          "type": "text",
          "text": "Full Stack Web Developer"
        }
      ]
    },
    {
      "type": "heading",
      "attrs": {
        "level": 2
      },
      "content": [
        {
          "type": "text",
          "marks": [
            {
              "type": "textStyle",
              "attrs": {
                "color": "rgba(0, 0, 0, 0.9)"
              }
            }
          ],
          "text": "Contributions:"
        }
      ]
    },
    {
      "type": "bulletList",
      "attrs": {
        "tight": true
      },
      "content": [
        {
          "type": "listItem",
          "content": [
            {
              "type": "paragraph",
              "content": [
                {
                  "type": "text",
                  "marks": [
                    {
                      "type": "textStyle",
                      "attrs": {
                        "color": "rgba(0, 0, 0, 0.9)"
                      }
                    }
                  ],
                  "text": "Fully responsible for building front-end and back-end dashboard systems with 3 roles as well as integration with google analytics and providing graphical data for metrics monitoring."
                }
              ]
            }
          ]
        },
        {
          "type": "listItem",
          "content": [
            {
              "type": "paragraph",
              "content": [
                {
                  "type": "text",
                  "marks": [
                    {
                      "type": "textStyle",
                      "attrs": {
                        "color": "rgba(0, 0, 0, 0.9)"
                      }
                    }
                  ],
                  "text": "Involved in adding Open Graph (OG) as well as updating Search Engine Optimization (SEO)."
                }
              ]
            }
          ]
        },
        {
          "type": "listItem",
          "content": [
            {
              "type": "paragraph",
              "content": [
                {
                  "type": "text",
                  "marks": [
                    {
                      "type": "textStyle",
                      "attrs": {
                        "color": "rgba(0, 0, 0, 0.9)"
                      }
                    }
                  ],
                  "text": "Lorem Ipsum"
                }
              ]
            }
          ]
        }
      ]
    },
    {
      "type": "heading",
      "attrs": {
        "level": 2
      },
      "content": [
        {
          "type": "text",
          "text": "Period:"
        }
      ]
    },
    {
      "type": "paragraph",
      "content": [
        {
          "type": "text",
          "text": "June 2023 - November 2023 (6 Month)"
        }
      ]
    },
    {
      "type": "heading",
      "attrs": {
        "level": 3
      },
      "content": [
        {
          "type": "text",
          "text": "Link:"
        }
      ]
    },
    {
      "type": "paragraph",
      "content": [
        {
          "type": "text",
          "text": "https://example.com"
        }
      ]
    }
  ]
}

thank you for your attention

[Deri-Kurniawan]

To render json as html is to use @tiptap/html with the required extension like the following code:

import Bold from "@tiptap/extension-bold";
import BulletList from "@tiptap/extension-bullet-list";
import Document from "@tiptap/extension-document";
import Heading from "@tiptap/extension-heading";
import Link from "@tiptap/extension-link";
import ListItem from "@tiptap/extension-list-item";
import Paragraph from "@tiptap/extension-paragraph";
import Text from "@tiptap/extension-text";
import { generateHTML } from "@tiptap/html";
import { useMemo } from "react";

export default function ContentRenderer({ json }: { json: any }) {
  const output = useMemo(() => {
    return generateHTML(json, [
      Bold,
      BulletList,
      Document,
      Heading,
      Link,
      Paragraph,
      ListItem,
      Text,
    ]);
  }, [json]);

  return (
    <pre>
      <code>{output}</code>
    </pre>
  );
}