Skip to content
A library for Elm that shows JSON data as an expandable HTML tree
Elm
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.
Permalink
Type Name Latest commit message Commit time
Failed to load latest commit information.
example
src
tests
.gitignore
CONTRIBUTING.md
LICENSE
README.md
elm.json

README.md

!! 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)

Features:

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

Usage

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.

Thanks

UI based on Gildas Lormeau's JSONView Chrome extension.

You can’t perform that action at this time.