Awesome

json-html

Generates a DOM node with a human representation of the JSON/EDN encoded data. Based on the json.human.js library.

Installation

The library provides support for Clojure/Script.

Leiningen

Usage

(use 'json-html.core)

(edn->html {:foo [1 2 3] :bar "baz"})

(json->html "{\"foo\": [1, 2, 3], \"bar\": \"baz\"}")

The ClojureScript version has additional functions called edn->hiccup and json->hiccup, these can be used to generate Hiccup forms for use with other libraries such as Reagent.

A default CSS is provided in resources/json.human.css and can be included as follows:

(ns foo
  (:use json-html.core hiccup.page))

(spit "formatted.html"
     (html5
      [:head [:style (-> "json.human.css" clojure.java.io/resource slurp)]]
      (edn->html [:foo "bar" :baz [1 2 3]])))

Custom data types and render functions

To render data types that are not covered but the library (i.e. cljs.core/UUID) or redefine how already covered data types are rendered, extend the json-html.core/IRenderHTML protocol for your type. For example, to render UUIDs in the same way you would render its backing string, add this snippet in your code:

(extend-protocol json-html.core/Render
  cljs.core/UUID
  (render [u]
    [:span.jh-type-string (str u)]))

Example:

Input JSON:

{
  "name": "json.human",
  "description": "Convert\n JSON to human readable\r HTML",
  "author": "Mariano Guerra <mariano@marianoguerra.org>",
  "tags": ["DOM", "HTML", "JSON", "Pretty Print"],
  "version": "0.1.0",
  "main": "json.human.js",
  "license" : "MIT",
  "dependencies": {
      "crel": "1.0.0"
  },
  "repository": {
    "type": "git",
    "url": "git://github.com/marianoguerra/json.human.js.git"
  },
  "bugs": {
    "url": "https://github.com/yogthos/json-html/issues"
  },
  "contributors": [],
  "config": {
    "what?": "this object is just to show some extra stuff",
    "how?": ["add json.human.js", "add json.human.css", "???", "profit!"],
    "customization?": ["customize the css prefix", "change the css file"],
    "integer": 42,
    "float": 12.3,
    "bool": true,
    "emptyString": "",
    "emptyArray": [],
    "emptyObject": {},
    "htmlEntities": "   <- trailing <em>   & </em> and some html   "
  }
}

Output HTML

License

MIT