egui_json_tree 0.13.0

An interactive JSON tree visualiser for egui, with search and highlight functionality.
Documentation 
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86

# egui_json_tree

[![Latest version](https://img.shields.io/crates/v/egui_json_tree.svg)](https://crates.io/crates/egui_json_tree)
[![Documentation](https://docs.rs/egui_json_tree/badge.svg)](https://docs.rs/egui_json_tree)
[![Build Status](https://github.com/dmackdev/egui_json_tree/workflows/CI/badge.svg)](https://github.com/dmackdev/egui_json_tree/actions?workflow=CI)
[![MIT](https://img.shields.io/badge/license-MIT-blue.svg)](https://github.com/dmackdev/egui_json_tree/blob/master/LICENSE-MIT)
[![Apache](https://img.shields.io/badge/license-Apache-blue.svg)](https://github.com/dmackdev/egui_json_tree/blob/master/LICENSE-APACHE)

An interactive JSON tree visualiser for [`egui`](https://github.com/emilk/egui), with search and highlight functionality.

<p align="center">
  <img src="./media/search_example.gif" alt="Search Example"/>
</p>

See the demo [source code](./examples/demo) and [webpage](https://dmackdev.github.io/egui_json_tree) 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

```rust
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 `value::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.

## Run Examples

```bash
cargo run --example=demo
```