klazuka / 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 =
{ colors : Colors
, 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.

colors may be defaultColors, or another color set

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.

Customizing Colors


type alias Colors =
{ string : String
, number : String
, bool : String
, null : String
, selectable : String 
}

The colors to be used when showing elements of the JSON Tree. The strings must be valid CSS colors (e.g. "red", "#ff0000").

defaultColors : Colors

The defaults colors, which are suitable for a light background.

Uncommon/Advanced Stuff

Note: These are rarely needed, but they are there if you need it.

stateToJson : State -> Json.Encode.Value

Encodes the state of a tree into JSON.

stateFromJson : Json.Decode.Decoder State

Decode the state of a tree from JSON.