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

    1.1.2 • Public • Published

    pretty-print-json

    logo

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

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

    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,   //number of spaces for indentation
       linkUrls?:  boolean,  //create anchor tags for URLs
       quoteKeys?: boolean,  //always double quote key names
       };

    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

    2,851

    Version

    1.1.2

    License

    MIT

    Unpacked Size

    20 kB

    Total Files

    10

    Last publish

    Collaborators

    • dpilafian