Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/yogthos/json-html
Provide EDN/JSON and get a DOM node with a human representation of the data
https://github.com/yogthos/json-html
clojure html
Last synced: 9 days ago
JSON representation
Provide EDN/JSON and get a DOM node with a human representation of the data
- Host: GitHub
- URL: https://github.com/yogthos/json-html
- Owner: yogthos
- License: mit
- Created: 2014-03-20T02:42:18.000Z (over 10 years ago)
- Default Branch: master
- Last Pushed: 2020-05-30T16:06:14.000Z (over 4 years ago)
- Last Synced: 2024-10-23T03:29:21.572Z (16 days ago)
- Topics: clojure, html
- Language: Clojure
- Homepage:
- Size: 56.6 KB
- Stars: 162
- Watchers: 8
- Forks: 15
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
- Funding: .github/FUNDING.yml
- License: LICENSE
Awesome Lists containing this project
- awesome-clojurescript - json-html
README
## json-html
Generates a DOM node with a human representation of the JSON/EDN encoded data. Based on the [json.human.js](http://marianoguerra.github.io/json.human.js/) library.
## Installation
The library provides support for Clojure/Script.
#### Leiningen
[](http://clojars.org/json-html)
## Usage
```clojure
(use 'json-html.core)
(edn->html {:foo [1 2 3] :bar "baz"})
```
barbazfoo011223
```clojure
(json->html "{\"foo\": [1, 2, 3], \"bar\": \"baz\"}")
```
barbazfoo011223
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](http://holmsand.github.io/reagent/).
A default CSS is provided in `resources/json.human.css` and can be included as follows:
```clojure
(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 `UUID`s in the same way you would render its backing string, add this snippet in your code:
```clj
(extend-protocol json-html.core/Render
cljs.core/UUID
(render [u]
[:span.jh-type-string (str u)]))
```
## Example:
### Input JSON:
```javascript
{
"name": "json.human",
"description": "Convert\n JSON to human readable\r HTML",
"author": "Mariano Guerra ",
"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 & and some html "
}
}
```
### Output HTML
authorMariano Guerra <[email protected]>bugsurlhttp://github.com/marianoguerra/json.human.js/issuesconfigbooltruecustomization?0customize the css prefix1change the css fileemptyArray
emptyObject
emptyStringfloat12.3how?0add json.human.js1add json.human.css2???3profit!htmlEntities <- trailing <em> & </em> and some html integer42what?this object is just to show some extra stuffcontributors
dependenciescrel1.0.0descriptionConvert
JSON to human readable
HTMLlicenseMITmainjson.human.jsnamejson.humanrepositorytypegiturlgit://github.com/marianoguerra/json.human.js.gittags0DOM1HTML2JSON3Pretty Printversion0.1.0
## License
[MIT](http://opensource.org/licenses/MIT)