Have ideas to improve npm?Join in the discussion! »

pretty-print-jsonTypeScript icon, indicating that this package has built-in type declarations

0.4.3 • Public • Published

pretty-print-json

logo

JavaScript library to pretty-print JSON data to HTML for formatted color display

License:MIT npm Size Vulnerabilities Hits Build

screenshot

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/pretty-print-json@0.4/dist/pretty-print-json.css>
...
<script src=https://cdn.jsdelivr.net/npm/pretty-print-json@0.4/dist/pretty-print-json.min.js></script>

Node.js server

Install package for node:

$ npm install pretty-print-json

Import into your application:

const prettyPrintJson = require('pretty-print-json');

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

Name (key) Type Default Description
indent integer 3 Number of spaces for indentation.
linkUrls boolean true Create anchor tags for URLs.
quoteKeys boolean false Always double quote key names.

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

Install

npm i pretty-print-json

DownloadsWeekly Downloads

1,586

Version

0.4.3

License

MIT

Unpacked Size

17.4 kB

Total Files

9

Last publish

Collaborators

  • avatar