JSON to HTML toolkit 🥳

Description

Tiny library/tool to print out or insert a json object into the dom 🤘

Features

• No dependencies 🥹
• Flexible and customizable 💪

Installation

To install json2html-toolkit, you can use npm:

npm install json2html-toolkit

Or copy the source. It's tiny, just one file! 🤫 (But please give it some ⭐️ if you do 🥹)

Usage

To print out as an html string, use toHTMLString. Here's an example:

import { toHTMLString } from "json2html-toolkit";

const jsonData = {
  /* Your JSON data */
};

const result = toHTMLString(jsonData);

console.log(result);

The output is customizable. For example, you can pass a styling object with the configuration:

import { toHTMLString } from "json2html-toolkit";

// Style like how chat gpt prints out json 🤘
const styling = {
  properties: "#df3079",
  number: "#df3079",
  string: "#00a67d",
  null: "#2e95d3",
  boolean: "#2e95d3",
  braces: "#d9d9e3",
  brackets: "#d9d9e3",
  comma: "#d9d9e3",
  semi: "#d9d9e3",
};

const result = toHTMLString(jsonData, { styling });

Change spacing:

const result = toHTMLString(jsonData, { styling, space: 4 }); // Default is 2

You can also use CSS variables. By default, the variables are named --json2dom-<styling-property>. For example, to change the color of number types, you would target --json2dom-number variable. If you want a different prefix, you can change it using prefixCssVariables:

const result = toHTMLString(jsonData, {
  styling,
  prefixCssVariables: "my-custom-prefix",
});

To insert directly into the DOM, you can use insertAt. Here's an example:

import { insertAt } from "json2html-toolkit";

const jsonData = {
  /* Your JSON data */
};

insertAt("some-target-selector", jsonData);

insertAt uses document.querySelector under the hood, so you can use #some-id or .some-class, any selector you want.

json2html-toolkit is fully written in typescript and exports the following:

export type JSONValue =
  | string
  | number
  | boolean
  | null
  | JSONObject
  | JSONArray;

// Do we need any more here? 🤔
export type Styling = {
  properties?: string;
  number?: string;
  string?: string;
  null?: string;
  boolean?: string;
  braces?: string;
  brackets?: string;
  semi?: string;
  comma?: string;
};

export type Config = {
  space?: number;
  styling?: Styling;
  prefixCssVariables?: string;
};

export function toHtmlString(json: JSONValue, config?: Config): string;

export function insertAt(
  selector: string,
  json: JSONValue,
  config?: Config
): void;

License

This project is licensed under the MIT License - see the LICENSE file for details.

Acknowledgements

This project was inspired by the great work done at highlightjs, prismjs and other similar libraries! 🍻

Support

If you have any questions or issues, please open an issue on GitHub.