A library for Elm that shows JSON data as an expandable HTML tree
Switch branches/tags
Nothing to show
Clone or download
Latest commit 95c10e2 Aug 27, 2018
Type Name Latest commit message Commit time
Failed to load latest commit information.
example Upgrade to Elm 0.19 (#4) Aug 26, 2018
src Upgrade to Elm 0.19 (#4) Aug 26, 2018
tests Upgrade to Elm 0.19 (#4) Aug 26, 2018
.gitignore init Apr 23, 2018
CONTRIBUTING.md Improve readme Apr 24, 2018
LICENSE init Apr 23, 2018
README.md Improve readme Apr 24, 2018
elm.json Bump version to 2.0.0 Aug 26, 2018


Elm JSON Tree View

This library provides a JSON tree view. You feed it JSON, and it transforms it into interactive HTML.

Try the online demo (source)


  • show JSON as a tree of HTML
  • expand/collapse nodes in the tree
  • expand/collapse the entire tree
  • select scalar values in the tree


See the docs or look at the example app's source code.

But if you really insist on something super simple, here goes:

import JsonTree
import Html exposing (text)

main =
    JsonTree.parseString """[1,2,3]"""
        |> Result.map (\tree -> JsonTree.view tree config JsonTree.defaultState)
        |> Result.withDefault (text "Failed to parse JSON")

config = { onSelect = Nothing, toMsg = always () }

Note that the above example is only meant to give you a taste. It does not wire everything up, which means that some things will be broken (i.e. expand/collapse). See the docs and the example app for more details.


UI based on Gildas Lormeau's JSONView Chrome extension.