License Source —» Website npm
MPL CircleCI jsonrep


This Guide is best viewed at using a Modern Browser.

Use jsonrep to present JSON Documents beautifully and easily!

jsonrep is a JavaScript library for use in the Browser and on the Server (for pre-compiling) to mark up JSON Documents for Visualization and Interaction using JavaScript Representations (rep[s]).

An Annotated JSON Document using URL-referenced JavaScript Renderers which may be nested arbitrarily looks like this:

    "@dist/div": {
        "style": {
            "padding": "5px",
            "border": "1px solid black"
        "innerHTML": {
            "@dist/io.shields.img": {
                "subject": "jsonrep",
                "status": "Rocks!",
                "color": "green"
{ "@dist/div": { "style": { "padding": "5px", "border": "1px solid black" }, "innerHTML": { "@dist/io.shields.img": { "subject": "jsonrep", "status": "Rocks!", "color": "green" } } } }

Treat this format as a compile target capable of holding just-in-time linked nested data structures.



Load the jsonrep library into a HTML page using:

<script src=""></script>
    const JSONREP = window.jsonrep;

When used in a HTML page, jsonrep marks up any DOM elements tagged using a renderer="jsonrep" attribute:

<div renderer="jsonrep">{"message": "Hello World!"}</div>
{"message": "Hello World!"}

The DOM is automatically marked up on the DOMContentLoaded document event. Marking up can be re-triggered (in case new tags have been added) using:


CommonJS Environment

jsonrep can also be loaded into a CommonJS Environment using:

const JSONREP = require("jsonrep");

When loaded into a CommonJS Environment (which has a global exports object available) only the jsonrep API is exported WITHOUT marking up a DOM that may also be present in the environment.





JavaScript Primitives

The default reps for JavaScript Primitives.

    [ "item" ],
    { "key": "value" }
[ null, "string", 0, 1.2, [ "item" ], { "key": "value" } ]

Golden Layout

A rep for the multi-screen layout manager.

    "@dist/golden-layout": {
        "content": [ {
            "type": "row",
            "content": [
                    "type": "component",
                    "componentName": "example",
                    "title": "Default Rendering",
                    "componentState": { "text": "Component 1" }
                }, {
                    "type": "component",
                    "componentName": "example",
                    "title": "Custom Rep",
                    "componentState": {
                        "@dist/io.shields.img": {
                            "subject": "jsonrep",
                            "status": "Rocks!",
                            "color": "blue"
        } ]
{ "@dist/golden-layout": { "content": [ { "type": "row", "content": [ { "type": "component", "componentName": "example", "title": "Default Rendering", "componentState": { "text": "Component 1" } }, { "type": "component", "componentName": "example", "title": "Custom Rep", "componentState": { "@dist/io.shields.img": { "subject": "jsonrep", "status": "Rocks!", "color": "blue" } } } ] } ] } }


Original Source Logic under Mozilla Public License 2.0 by Christoph Dorn since 2017.

Mozilla Public License 2.0

You are free to:
    Commercial Use, Modify, Distribute, Sublicense, Place Warranty, Use Patent Claims

Under the following terms:
    Include Copyright, Include License, Disclose Source, Include Original

You cannot:
    Use Trademark, Hold Liable

Well-crafted Contributions are Welcome.

INTENDED USE: The Logic and Code contained within forms a Developer Tool and is intended to operate as part of a Web Software Development Toolchain on which a Production System operates indirectly. It is NOT INTENDED FOR USE IN HIGH-LOAD ENVIRONMENTS as there is little focus on Runtime Optimization in order to maximize API Utility, Compatibility and Flexibility. The logic & code HAS NOT BEEN VALIDATED BY A SECURITY AUDIT and is NOT GUARANTEED TO KEEP PRIVATE INFORMATION NOR YOUR IDENTITY SECURE!

If you need more than what is contained within, study the Code, understand the Logic, and build your Own Implementation that is API Compatible. Share it with others who follow the same Logic and API Contract specified within. This Community of Users will likely want to use Your Work in their own Software Development Toolchains.