Standalone viewer

The core of Structile is one self-contained HTML file — no build step, no server, no dependencies. Anyone can open it directly in a browser and start working with structured data, with nothing else installed.

Get the file

structile-6.0.1.html — download it and double-click (or file:// it) to open. It starts empty; load data from there. This is the same viewer the Python library and VS Code extension both build on, packaged as a single file for zero-install use.

Loading data

  • Load data… / drag-and-drop / paste a file or JSON text.
  • XML (HTML included — it’s just markup too), or any other text format (INI/TOML/YAML/CSV/…): drop or paste the data together with a companion interpreter .js file that describes it — see Writing and distributing interpreters. Any other extension keeps loading as plain JSON/text, same as always.

Working with the graph

  • Double-click a value to edit it in place; double-click a dict’s title (including a chain like telemetry/exporter/otlp) to rename it.
  • A table cell can itself hold a dict or table — shown as a small {n}/[n] symbol instead of raw JSON text; click it to open that value as a detached side panel, the same way a table’s own ⧉ detach button does — works recursively too. Toggle it off in Settings -> Table windows to show raw JSON text instead (on by default).
  • Undo/redo (with a history dropdown), search (with regex/case options), and dirty-state dots track unsaved changes per field/ container.
  • Save asks for a destination and writes a new data file via the File System Access API where supported (with a filename prompt + download fallback elsewhere), in whichever format the data was loaded as (JSON, Python-repr, or XML via the interpreter’s serializeXML). It then opens the saved content in a clean viewer tab.
  • Settings (gear icon) controls the packing layout (column/row counts, truncation widths, etc.) and can be saved/loaded as a .settings.json file; a full view (settings + which boxes are collapsed/expanded/detached) can be saved/loaded as a .view.json sidecar file.

Big integers (anything beyond JavaScript’s ±2^53 safe range) are kept exact end-to-end — parsing, editing, saving, and search all use the original value, not a rounded display form.

Comparing two files

Diff… (appears once real data is loaded) compares two files right in the browser — no install needed on either side. Click it and pick a file for the other side, or drag two files onto the page at once (which one lands on the left vs. right follows drop/selection order, shown in the diff header); the two files don’t even have to be the same format — a .json against an .xml + interpreter starts a cross-format diff too. Once open, ⇄ swaps sides, and clicking a Left:/Right: name replaces just that side. The i badge next to Diff is an in-app reference for the Split/Unified × Full/Compact/Ultracompact scopes.

Current limitations

  • The drag-and-drop/paste/file-picker pairing UX recognizes a small, fixed set of extensions beyond JSON/Python (.xml/.html/.htm/ .ini/.toml/.yaml/.yml/.csv) — a custom extension outside that list dropped directly onto the page falls back to plain JSON/text instead of offering interpreter pairing (the Python library and VS Code extension don’t have this restriction, since they attach an interpreter explicitly rather than through drag-and-drop).
  • The paste textarea only recognizes XML-shaped raw text (no filename to infer a format from) — pairing any other format’s data always goes through a file, never a paste.
This site uses Just the Docs, a documentation theme for Jekyll.