Skip to content
A library for Elm that shows JSON data as an expandable HTML tree
Branch: master
Clone or download
Pull request Compare This branch is 3 commits ahead, 1 commit behind microsoft:master.
Fetching latest commit…
Cannot retrieve the latest commit at this time.
Type Name Latest commit message Commit time
Failed to load latest commit information.

!! This is a fork of microsoft/elm-json-tree-view, created because the change of the org name from Microsoft to microsoft was breaking Elm project builds.

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]"""
        |> (\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.

You can’t perform that action at this time.