GitHub - yogthos/json-html: Provide EDN/JSON and get a DOM node with a human representation of the data

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

author

Mariano Guerra <mariano@marianoguerra.org>

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

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

License

MIT