JsonTree

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

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

Basic Usage

parseString : String -> Result String Node

Parse a JSON string as a tree.

parseValue : Value -> Result String 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 Float

| TBool 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 : Int -> Node -> State -> State

Collapses any nodes deeper than maxDepth.

Modules

JsonTree

Microsoft/elm-json-tree-view/1.0.0

JsonTree

Basic Usage

Types

Expand/Collapse

Modules