TypeScript icon, indicating that this package has built-in type declarations

2.0.1 • Public • Published



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

License:MIT npm Size Vulnerabilities Hits Build


A) Try It Out

Interactive online tool to format JSON:

B) Setup

1. Web browser

Load from the CDN:

<link rel=stylesheet href=>
<script src=></script>

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

Or to automatically sense dark mode based on the prefers-color-scheme CSS media feature, use pretty-print-json.prefers.css instead.

2. 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 -- use ES modules instead

C) Usage

1. API

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

2. Example

<pre id=account class=json-container></pre>

Pass data into prettyPrintJson.toHtml(data, options) 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);

3. Options

Name (key) Type Default Description
indent integer 3 Number of spaces for indentation.
lineNumbers boolean false Wrap HTML in an <ol> tag to support line numbers.*
linkUrls boolean true Create anchor tags for URLs.
linksNewTab boolean true Add a target=_blank attribute setting to anchor tags.
quoteKeys boolean false Always double quote key names.
trailingComma boolean true Append a comma after the last item in arrays and objects.

*When setting lineNumbers to true, do not use the <pre> tag as the white-space: pre; styling is applied to each line (<li>).


D) TypeScript Declarations

See the TypeScript declarations at the top of the pretty-print-json.ts file.

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

type FormatOptions = {
   indent?:        number,   //number of spaces for indentation
   lineNumbers?:   boolean,  //add line numbers
   linkUrls?:      boolean,  //create anchor tags for URLs
   linksNewTab?:   boolean,  //add a target=_blank attribute setting to anchor tags
   quoteKeys?:     boolean,  //always double quote key names
   trailingComma?: boolean,  //append a comma after the last item in arrays and objects

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);

E) Build Environment

Check out the package.json file for an interesting approach to managing build tasks.

CLI Build Tools

  • 🎋 add-dist-headerPrepend a one-line banner comment (with license notice) to distribution files
  • 📄 copy-file-utilCopy or rename a file with optional package version number
  • 📂 copy-folder-utilRecursively copy files from one folder to another folder
  • 🔍 replacer-utilFind and replace strings or template outputs in text files
  • 🔢 rev-web-assetsRevision web asset filenames with cache busting content hash fingerprints
  • 🚆 run-scripts-utilOrganize npm scripts into named groups of easy to manage commands
  • 🚦 w3c-html-validatorCheck the markup validity of HTML files using the W3C validator

To see some example HTML results, run npm install, npm test, and then node spec/examples.js.

Feel free to submit questions at:

MIT License | Blog post


npm i pretty-print-json

DownloadsWeekly Downloads






Unpacked Size

35.7 kB

Total Files


Last publish


  • dpilafian