ComfyUI Node

JSON Tree Viewer

The tree view that makes an unreadable metadata blob actually readable

By TakkunRed·Created 5 months ago·Updated 5 months ago· 1
JSON Tree Viewer
    • STRING
    json_string

    Extract PNG Metadata hands you one giant JSON string with everything from file timestamps to the full embedded workflow. That string is technically readable and practically useless - a thousand-line blob of node graphs and settings that your eyes will bounce off. JSON Tree Viewer is the output node that turns that blob into something you can actually navigate: a foldable tree rendered right on the canvas, with the parts that look like prompts highlighted so your eye lands on the good stuff first.

    How it works

    It's deliberately dumb on the Python side and smart on the frontend side. The node takes a json_string input, parses it with json.loads, and pushes the parsed object back to the UI through the json_data widget payload. If the string isn't valid JSON you get {"error": "Invalid JSON"} in the tree instead of a crash - handy when you're wiring it to something that isn't an extractor.

    The tree itself is drawn by the pack's bundled frontend (web/js/json_viewer.js) after every execution. It walks the object recursively and:

    • renders each nested object as a collapsible branch with an arrow, so you can fold a giant workflow down to its top-level keys;
    • annotates nodes that carry a class_type with their node name - this is how you recognize "oh, that's a KSampler" at a glance;
    • highlights any string longer than 50 characters in a yellow box - in a metadata dump those long strings are almost always prompts, and the orange label + [★Prompt] marker on keys that contain them is the pack's "potential prompt areas in orange" from the README;
    • lets you click any value to copy it to your clipboard.

    The inputs and outputs

    One input, json_string - a STRING with forceInput set, which is a polite way of saying you must wire it from another node. There's no text box to type into; you can't hand-edit JSON here. You could theoretically connect any string output, but the intended wiring is metadata_json from Extract PNG Metadata into this.

    The output is a single STRING that passes your original json_string straight through untouched. So you can chain the visualizer into a Save Text node and write the raw metadata to disk while still getting the pretty tree on screen. It's an output node, which is ComfyUI's way of saying it's a display node - it exists to show you things, not to compute them.

    Installing it

    The node ships in the Metadata-Inspector pack, so installation is the pack install:

    cd ComfyUI/custom_nodes
    git clone https://github.com/TakkunRed/ComfyUI-Metadata-Inspector.git
    

    then restart ComfyUI. Or find "ComfyUI-Metadata-Inspector" in Manager. No extra dependencies, no models, and the frontend comes bundled in the pack's web/ folder - no separate download.

    Common gotchas

    • Nothing appears until you queue. The tree is drawn in onExecuted, so if you drop the node and stare at it before running, it's just an empty shell. Hit queue.
    • It needs a wired string, not typed text - if you expected to paste a workflow JSON in and browse it, you'll be disappointed. That's what the forceInput flag enforces.
    • Only handles JSON. If you feed it a plain-text prompt (an A1111 parameters chunk that Extract PNG Metadata chose not to JSON-parse), json.loads fails and you get the error object. The fix is to look at the raw string with a Show Text node instead.

    One honest caveat: this is a small pack from a small author, so the tree is functional but basic - no search, no light/dark polish, and the copy-to-clipboard uses a browser alert() that gets old fast. For one-off "what did I actually generate this with" questions it's perfect. For heavy workflow forensics you'd outgrow it. It's free, it's zero-dependency, and it turns an unusable dump into something you can read in ten seconds - that's the whole pitch.

    Categoryui/visualizer

    Inputs (1)

    NameTypeDefaultDescription
    json_stringSTRING

    Outputs (1)

    NameTypeDescription
    STRINGSTRING