Sign Up for Free

RunKit +

Try any Node.js package right in your browser

This is a playground to test code. It runs a full Node.js environment and already has all of npm’s 400,000 packages pre-installed, including kapok with all npm packages installed. Try it out:

kapok lists no main file and has no index.js, so it can't be directly required. If this is a mistake, please let us know. It may however contain internal files that you can require manually:

// require("kapok/[??]")

This service is provided by RunKit and is not affiliated with npm, Inc or the package authors.

kapok v0.0.4

HTML/CSS3 collapsible tree viewer for JS objects

Build Status devDependency Status

Overview

Kapok is a simple, static(ish) collapsible tree generator for JS objects (and by extension, JSON). It aims to be easy to use for both developers and end-users, but reasonably flexible where applicable.

It looks something like this:

screenshot

It was written in about a week while recovering from an expensive appendectomy, because I needed something like it and couldn't find anything satisfactory from the googles. As such it is a bit immature and probably has holes here and there, but it has tested stable on most modern browsers.

Installation

The recommended way to use Kapok is to simply drop kapok.js and kapok-full.css into your source tree and include them however you please.

If you don't like the default styling or cannot override it to your satisfaction, use kapok-core.css instead, which has the bare minimum CSS for expand/collapse behaviour.

Usage

var someObject = {foo: 'bar'};
document.body.appendChild(kapok.render(someObject));

Server-side use is not supported as a DOM is assumed.

Kapok does not make use of UMD, AMD, or any other MD. Instead it takes a steaming dump on best practices and sticks its functionality into the global scope, because that's one less thing that might break a year from now when all the cool kids are using BBQMD instead. If you have a global var kapok that you don't want trampled, you should rename this module's references to it. Yes, all three of them.

Acknowledgments

This CSS Ninja guide served as a reference for this project. I used Keith Elias's fiddle as a starting point for styling.

Metadata

RunKit is a free, in-browser JavaScript dev environment for prototyping Node.js code, with every npm package installed. Sign up to share your code.
Sign Up for Free