Generate HTML Elements From JSON – j2h.js

Preview:

Description:

j2h.js is a simple JSON to HTML library that makes it easier to produce UI elements using JavaScript/JSON.

How to use it:

1. Download and import the j2h.

import j2h from "./dist/j2h.js";
2. Create a JSON to HTML converter.

<div id="root"></div>

let root = j2h.setRoot(document.getElementById("root"));
root.append(
  j2h.element("img", {
      id: "j2h-logo",
      src: "logo.png",
  })
)
  .append(
      j2h.element(
          "p",
          { id: "j2h-description" },
          "JSON2HTML, also known as j2h, is a TypeScript and JavaScript library that used to produce UI components for HTML using JavaScript."
      )
  )
  .append(
      j2h.element(
          "p",
          {},
          "This website was developed using j2h. An example of its own is provided."
      )
  )
  .append(
      j2h.element(
          "p",
          { id: "for-large-screens" },
          "The left example demonstrates how the j2h generates json. The HTML result is seen in the right example."
      )
  )
  .append(
      j2h.element(
          "p",
          { id: "for-small-screens" },
          "The upper example demonstrates how the j2h generates json. The HTML result is seen in the lower example."
      )
  )
  .append(
      j2h.element(
          "a",
          {
              href: "https://github.com/patelka2211/json2html",
              target: "_blank",
          },
          "View j2h on GitHub"
      )
  )
  .append(
      j2h.element("div", { id: "example-container" }, [
          j2h.element("div", { id: "json-input-container" }),
          j2h.element("div", { id: "html-output-container" }),
      ])
  )
  .append(
      j2h.element(
          "a",
          {
              href: "https://www.cssscript.com",
              target: "_blank",
          },
          "Developed in 🇮🇳 with ❤️ by KP"
      )
  );
async function render() {
  root.render();
}
render().then(() => {
  let html_input_container = j2h.setRoot(
      document.getElementById("html-output-container")
  );
  ((list) => {
      list.map((item) => {
          html_input_container.append(j2h.element("pre", {}, item));
      });
      html_input_container.render();
  });
  let json_input_container = j2h.setRoot(
      document.getElementById("json-input-container")
  );
  ((list) => {
      list.map((item) => {
          json_input_container.append(j2h.element("pre", {}, item));
      });
      json_input_container.render();
  })(JSON.stringify(root.list, null, 3).split("\n"));
});

Changelog:

04/24/2023

• Made iife and esm files.