Microsoft / elm-json-tree-view / JsonTree

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

Features:

Basic Usage

parseString : String -> Result Json.Decode.Error Node

Parse a JSON string as a tree.

parseValue : Json.Decode.Value -> Result Json.Decode.Error Node

Parse a JSON value as a tree.

view : Node -> Config msg -> State -> Html msg

Show a JSON tree.

Types


type alias Config msg =
{ onSelect : Maybe (KeyPath -> msg)
, toMsg : State -> msg 
}

Configuration of the JSON tree view. It describes how to map events in the tree view into events that your app understands.

Since the Config contains functions, it should never be held in your model. It should only appear in your view code.

onSelect should be set to Nothing for most users. However, if you want to make the tree's leaf nodes selectable, you should provide a function that takes the selected KeyPath and acts on it.

toMsg provides an updated State to your application which you should use to overwrite the previous state.


type State

The state of the JSON tree view. Note that this is just the runtime state needed to implement things like expand/collapse--it is not the tree data itself.

You should store the current state in your model.

defaultState : State

Initial state where the entire tree is fully expanded.


type alias Node =
{ value : TaggedValue
, keyPath : KeyPath 
}

A node in the tree


type TaggedValue
    = TString String
    | TFloat Basics.Float
    | TBool Basics.Bool
    | TList (List Node)
    | TDict (Dict String Node)
    | TNull

A tagged value


type alias KeyPath =
String

The path to a piece of data in the tree.

Expand/Collapse

expandAll : State -> State

Expand all nodes

collapseToDepth : Basics.Int -> Node -> State -> State

Collapses any nodes deeper than maxDepth.