Crate egui_json_tree

Expand description

An interactive JSON tree visualiser for egui, with search and highlight functionality.

See the demo source code and webpage for detailed use cases, including:

Automatic expansion of arrays/objects and highlighting, based on search term matches.
Copying JSON paths and values to the clipboard.
A JSON editor UI.

§Usage

let value = serde_json::json!({ "foo": "bar", "fizz": [1, 2, 3]});

// Simple:
JsonTree::new("simple-tree", &value).show(ui);

// Customised:
let response = JsonTree::new("customised-tree", &value)
    .style(
      JsonTreeStyle::new()
          .abbreviate_root(true) // Show {...} when the root object is collapsed.
          .toggle_buttons_state(ToggleButtonsState::VisibleDisabled)
          .visuals(JsonTreeVisuals {
              bool_color: Color32::YELLOW,
              ..Default::default()
          }),
    )
    .default_expand(DefaultExpand::All)
    .on_render(|ui, ctx| {
        // Customise rendering of the JsonTree, and/or handle interactions.
        match ctx {
            RenderContext::Property(ctx) => {
                ctx.render_default(ui).context_menu(|ui| {
                    // Show a context menu when right clicking
                    // an array index or object key.
                });
            }
            RenderContext::BaseValue(ctx) => {
                // Show a button after non-recursive JSON values.
                ctx.render_default(ui);
                if ui.small_button("+").clicked() {
                    // ...
                }
            }
            RenderContext::ExpandableDelimiter(ctx) => {
                // Render array brackets and object braces as normal.
                ctx.render_default(ui);
            }
        };
    })
    .show(ui);

// Reset the expanded state of all arrays/objects to respect the `default_expand` setting.
response.reset_expanded(ui);

§Supported JSON Types

JsonTree can visualise any type that implements ToJsonTreeValue. See the table of crate features below for provided implementations.

Feature/Dependency	JSON Type	Default
`serde_json`	`serde_json::Value`	Yes
`simd_json`	`simd_json::owned::Value`	No

If you wish to use a different JSON type, see the value module, and disable default features in your Cargo.toml if you do not need the serde_json dependency.

Modules§

delimiters: Tokens for array brackets and object braces used during rendering.
pointer: A JSON Pointer implementation for identifying specific values within a JSON document.
render: Rendering implementation for a JsonTree.
value: Representation of JSON values for presentation purposes.

Structs§

JsonTree: An interactive JSON tree visualiser.
JsonTreeResponse: The response from showing a JsonTree.
JsonTreeStyle: Styling configuration to control the appearance of the JsonTree.
JsonTreeVisuals: Colors for JSON syntax highlighting, and search match highlighting.
JsonTreeWrapping: Text wrapping configuration. Largely follows the same semantics as egui::text::TextWrapping.
JsonTreeWrappingConfig: Container for text wrapping configurations of JSON elements in various scenarios and visual states.

Enums§

DefaultExpand: Configuration for how a JsonTree should expand arrays and objects by default.
JsonTreeMaxWidth: Options for controlling the max width of JSON elements.
ToggleButtonsState: Setting for the visibility and interactivity of the toggle buttons for expanding/collapsing objects and arrays.