Repository files navigation

Pretty-print JSON data into HTML to indent and colorize

Source is written in functional TypeScript, andpretty-print-json.min.js (minified) is 2.1 KB.

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

Load from thejsdelivr.com CDN:

<linkrel=stylesheethref=https://cdn.jsdelivr.net/npm/pretty-print-json@3.0/dist/css/pretty-print-json.css>...<scriptsrc=https://cdn.jsdelivr.net/npm/pretty-print-json@3.0/dist/pretty-print-json.min.js></script>

The minified JS file is 2 KB.

Fordark mode, replacepretty-print-json.css withpretty-print-json.dark-mode.css inthe<link> tag.

Or to automatically sensedark mode based on theprefers-color-scheme CSS media feature, usepretty-print-json.prefers.css instead.

Install package for node:

$ npm install pretty-print-json

Import into your application:

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

consthtml=prettyPrintJson.toHtml(data,options?);

<preid=accountclass=json-container></pre>

Pass data intoprettyPrintJson.toHtml(data, options) and display the results.

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

*When settinglineNumbers totrue, do not use the<pre> tag as thewhite-space: pre;styling is applied to each line (<li>).

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

Customize the output of the functionprettyPrintJson.toHtml(data: unknown, options?: FormatOptions)using theoptions parameter.

Theoptions parameter is aFormatOptions object:

typeFormatOptions={indent?:number,//number of spaces for indentationlineNumbers?:boolean,//wrap HTML in an <ol> tag to support line numberslinkUrls?:boolean,//create anchor tags for URLslinksNewTab?:boolean,//add a target=_blank attribute setting to anchor tagsquoteKeys?:boolean,//always double quote key namestrailingCommas?: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';constdata={active:true,mode:'🚃',codes:[48348,28923,39080],city:'London',};constoptions:FormatOptions={linkUrls:true};consthtml:string=prettyPrintJson.toHtml(data,options);

Check out therunScriptsConfig section inpackage.json for aninteresting approach to organizing build tasks.

CLI Build Tools for package.json

• 🎋add-dist-header: Prepend a one-line banner comment (with license notice) to distribution files
• 📄copy-file-util: Copy or rename a file with optional package version number
• 📂copy-folder-util: Recursively copy files from one folder to another folder
• 🪺recursive-exec: Run a command on each file in a folder and its subfolders
• 🔍replacer-util: Find and replace strings or template outputs in text files
• 🔢rev-web-assets: Revision web asset filenames with cache busting content hash fingerprints
• 🚆run-scripts-util: Organize npm package.json scripts into groups of easy to manage commands
• 🚦w3c-html-validator: Check the markup validity of HTML files using the W3C validator

To see some example HTML results, runnpm install,npm test, and thennode spec/examples.js.

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

MIT License |Blog post