Skip to content
theManAndHisShadow edited this page Dec 15, 2024 · 2 revisions

Welcome to the json2html wiki!

In this section you can learn about the nuances of working with the 'json2html' library.

About

JSON formatter written in TypeScript. The json2html function transforms a JSON string into a structured, interactive, and visually styled HTML block. This is particularly useful for visualizing complex JSON data in a clear and user-friendly way. It enables developers to explore nested structures with collapsible nodes, making it easier to inspect data without manually formatting or analyzing raw JSON.

The generated HTML block reflects the structure and hierarchy of the JSON object. Each node represents a key-value pair, with nested objects or arrays rendered as expandable/collapsible subnodes. Arrays can display their lengths in the type signature, while large arrays are grouped into manageable chunks for better performance and readability. Primitive values (strings, numbers, booleans, etc.) can optionally show their types as tooltips on hover for enhanced clarity.

This function also supports hyperlink detection, turning URL strings into clickable links. Themes can be applied to customize the appearance, with several predefined styles like dracula, monokai, or github-dark, as well as support for custom user-defined themes. Overall, json2html provides a powerful and convenient way to explore JSON data visually, directly in the browser, with options to tailor its behavior to fit specific use cases.

Clone this wiki locally