dmackdev / egui_json_tree

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

egui_json_tree

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

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 {
        bool_color: Color32::YELLOW,
        ..Default::default()
    })
    .default_expand(DefaultExpand::All)
    .abbreviate_root(true) // Show {...} when the root object is collapsed.
    .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);

See demo.rs and run the examples for more 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.

Supported JSON Types

JsonTree can visualise any type that implements value::ToJsonTreeValue.

See the table of crate features below for provided implementations.

Feature	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.

Run Examples

cargo run --example=demo

egui_json_tree's Issues

Auto expand all & Search

Is there a way to use defaultexpand:All and the searchfunctionality as well? I'd like the json tree to be fully expanded when the gui opens instead of collapsed, but im not sure if i can enable both

Editing the JSON tree

Hey, I've recently found this library, thank you for the reasonable design and nice maintenance.

As far as I understand, the displayed JSON tree is read-only. Do you have plans to enable editing the JSON tree? If not, do you maybe have any estimates about the magnitude of effort that implementation would require?

I think that support for changing field names and values or adding/removing array items or object fields could be really useful. With editing enabled, this library could be easily used as a generic UI for any serde::De/Serialize type without the need of any derive macros. I've seen egui_struct, enum2egui, egui_inspect and others but they are much more limited in possibilities and code quality.

Improve vertical alignment

Keys and open/close delimiters should probably be horizontally aligned.

Empty arrays/objects should not be expandable

I suggest that these are not rendered as "collapsing" and don't show the ....

Cache `LayoutJob` construction

node::render_key and node::render_value both construct LayoutJob for rendering.

These operations can be cached using egui cache.

How to expand the JSON object by default when setting it to this value, defaultExpand:: SearchResults