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"})

bar	baz
foo	0 1 1 2 2 3

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

bar	baz
foo	0 1 1 2 2 3

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 <[email protected]>",
  "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

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

License

MIT