npm package discovery and stats viewer.

Discover Tips

  • General search

    [free text search, go nuts!]

  • Package details

    pkg:[package-name]

  • User packages

    @[username]

Sponsor

Optimize Toolset

I’ve always been into building performant and accessible sites, but lately I’ve been taking it extremely seriously. So much so that I’ve been building a tool to help me optimize and monitor the sites that I build to make sure that I’m making an attempt to offer the best experience to those who visit them. If you’re into performant, accessible and SEO friendly sites, you might like it too! You can check it out at Optimize Toolset.

About

Hi, 👋, I’m Ryan Hefner  and I built this site for me, and you! The goal of this site was to provide an easy way for me to check the stats on my npm packages, both for prioritizing issues and updates, and to give me a little kick in the pants to keep up on stuff.

As I was building it, I realized that I was actually using the tool to build the tool, and figured I might as well put this out there and hopefully others will find it to be a fast and useful way to search and browse npm packages as I have.

If you’re interested in other things I’m working on, follow me on Twitter or check out the open source projects I’ve been publishing on GitHub.

I am also working on a Twitter bot for this site to tweet the most popular, newest, random packages from npm. Please follow that account now and it will start sending out packages soon–ish.

Open Software & Tools

This site wouldn’t be possible without the immense generosity and tireless efforts from the people who make contributions to the world and share their work via open source initiatives. Thank you 🙏

© 2024 – Pkg Stats / Ryan Hefner

renderjson-2

v2.0.1

Published

Render JSON into collapsible HTML

Downloads

1,011

Readme

Renderjson 2

Render JSON into collapsible, themeable HTML. This library aims to be very simple with few options and no external dependencies. It's aimed at debugging but you can use it wherever it is useful.

The code renders the JSON lazily, only building the HTML when the user reveals the JSON by clicking the disclosure icons. This makes it extremely fast to do the initial render of huge JSON objects, since the only thing that renders initially is a single disclosure icon.

Live Example

A live example can be found here.

Example

<div id="test"></div>
<script type="module">
    import renderjson from "./renderjson.mjs"
    document.getElementById("test").appendChild(
        renderjson({ hello: [1,2,3,4], there: { a:1, b:2, c:["hello", null] } })
    );
</script>

Usage

The module exports one entry point, the renderjson() function. It takes in the JSON you want to render as a single argument and returns an HTML element.

Options

There are a couple functions to call to customize the output:

renderjson.set_icons('+', '-');

Call set_icons() to set the disclosure icons to something other than "⊕" and "⊖".

renderjson.set_show_to_level(level);

Call set_show_to_level() to show different amounts of the JSON by default. The default is 0, and 1 is a popular choice. As a special case, if level is the string "all" then all the JSON will be shown by default. This, of course, removes the benefit of the lazy rendering, so it may be slow with large JSON objects.

renderjson.set_max_string_length(length);

Strings will be truncated and made expandable if they are longer than length. As a special case, if length is the string "none" then there will be no truncation. The default is "none".

renderjson.set_sort_objects(sort_bool);

Sort objects by key (default: false)

renderjson.set_replacer(replacer_function)
renderjson.set_property_list(property_list)

These are the equivalent of the JSON.stringify() replacer parameter. Mozilla's documentation has a good description of how this parameter works. See test.html for an example of what these can do.

renderjson.set_collapse_msg(collapse_function);

Accepts a function (len:number):string => {} where len is the length of the object collapsed. Function should return the message displayed when a object is collapsed. The default message is "X items".

These functions are chainable so you may do:

renderjson.set_icons('+', '-')
          .set_show_to_level(2)
        ({ hello: [1,2,3,4], there: { a:1, b:2, c:["hello", null] } })

Theming

The HTML output uses a number of classes so that you can theme it the way you'd like:

.disclosure    ("⊕", "⊖")
.syntax        (",", ":", "{", "}", "[", "]")
.string        (includes quotes)
.number
.boolean
.key           (object key)
.keyword       ("null", "undefined")
.object.syntax ("{", "}")
.array.syntax  ("[", "]")

Copyright and License

License: ISC

Copyright © 2013-2017 David Caldwell <[email protected]>

Permission to use, copy, modify, and/or distribute this software for any purpose with or without fee is hereby granted, provided that the above copyright notice and this permission notice appear in all copies.

THE SOFTWARE IS PROVIDED "AS IS" AND THE AUTHOR DISCLAIMS ALL WARRANTIES WITH REGARD TO THIS SOFTWARE INCLUDING ALL IMPLIED WARRANTIES OF MERCHANTABILITY AND FITNESS. IN NO EVENT SHALL THE AUTHOR BE LIABLE FOR ANY SPECIAL, DIRECT, INDIRECT, OR CONSEQUENTIAL DAMAGES OR ANY DAMAGES WHATSOEVER RESULTING FROM LOSS OF USE, DATA OR PROFITS, WHETHER IN AN ACTION OF CONTRACT, NEGLIGENCE OR OTHER TORTIOUS ACTION, ARISING OUT OF OR IN CONNECTION WITH THE USE OR PERFORMANCE OF THIS SOFTWARE.