pretty-print-json

Pretty-print JSON data into HTML to indent and colorize (written in TypeScript)

1) Try it out

Interactive online tool to format JSON:
https://pretty-print-json.js.org

2) Setup

Web browser

Load from the jsdelivr.com CDN:

<link rel=stylesheet href=https://cdn.jsdelivr.net/npm/[email protected]/dist/pretty-print-json.css>
...
<script src=https://cdn.jsdelivr.net/npm/[email protected]/dist/pretty-print-json.min.js></script>

For dark mode, replace pretty-print-json.css with pretty-print-json.dark-mode.css in the <link> tag.

Node.js server

Install package for node:

$ npm install pretty-print-json

Import into your application:

import { prettyPrintJson } from 'pretty-print-json';

Or for older CommonJS/UMD environments:

const { prettyPrintJson } = require('pretty-print-json');  //deprecated

3) Usage

API

const html = prettyPrintJson.toHtml(data[, options]);

Example

HTML:

<pre id=account></pre>

JavaScript:

Pass data into prettyPrintJson.toHtml() and display the results.

const data = { active: true, mode: '🚃', codes: [48348, 28923, 39080], city: 'London' };
const elem = document.getElementById('account');
elem.innerHTML = prettyPrintJson.toHtml(data);

Options

4) TypeScript declarations

The TypeScript Declaration File file is pretty-print-json.d.ts in the dist folder.

The output of the prettyPrintJson.toHtml(thing: unknown, options?: FormatOptions) function is configured with a FormatOptions object:

type FormatOptions = {
   indent?:    number,
   linkUrls?:  boolean,
   quoteKeys?: boolean;
   };

Example TypeScript usage with explicit types:

import { prettyPrintJson, FormatOptions } from 'pretty-print-json';

const data = { active: true, mode: '🚃', codes: [48348, 28923, 39080], city: 'London' };
const options: FormatOptions = { linkUrls: true };
const html: string = prettyPrintJson.toHtml(data, options);

5) Contributor notes

To be a contributor, fork the project and run the commands npm install and npm test on your local clone.  Make your edits and rerun the tests.  Pull requests welcome.

Feel free to submit questions at:
github.com/center-key/pretty-print-json/issues

MIT License | Blog post