DEV Community

Cover image for BracketView 0.1.3: node view, table view, and a local Windows JSON workspace ✨
Jameel Shaikh
Jameel Shaikh

Posted on AI-assisted

BracketView 0.1.3: node view, table view, and a local Windows JSON workspace ✨

A collapsible tree is a correct rendering of JSON. It is not always a useful one. 🌳

If the payload is an API response, you usually want one of two things: relationships (this object points at that list) or records (this array should be columns). BracketView already had Monaco text, a virtualized tree, and a graph. This release adds the two shapes that were missing, plus a few tools that used to live in another tab.

Node and table views are free. You do not need Pro to click them. βœ…


πŸ”— Node view

Node view is a canvas of linked cards, not a force-directed hairball of every key.
Node view β€” JSON as linked cards. Nested objects get their own nodes. Arrays of objects land as tables on the canvas. Pan, zoom, search β€” no more expanding twenty tree levels.

  • Nested objects become their own nodes.
  • Arrays of objects render as tables on the canvas.
  • Edges carry the parent β†’ child relationship.
  • Search focuses a matching node instead of expanding the whole tree.
  • Minimap is optional so the canvas stays readable.

Implementation notes, for people who care: React Flow + dagre for layout. There is a hard cap (MAX_FLOW_NODES = 250) so a pathological document does not freeze the tab. Tables on the canvas also cap columns and rows. If your file is huge, stay on tree / table / text (Performance Mode on Pro is for that path). Node view is for the payload you want to inspect as a diagram.


πŸ“Š Table view

Table view is for arrays of objects sitting inside a larger document.

Table view β€” arrays of objects as a nested spreadsheet, next to Tree and Graph. Scroll the records without flattening the rest of the document. Long cells wrap instead of overlapping.

You do not have to flatten the JSON into CSV first. Nested values expand in the cell. Arrays longer than a threshold collapse until you open them. Rows virtualize after ~80 so a large list is still scrollable. Primitives get type coloring consistent with the tree.

0.1.3 is a polish release on this view: long strings wrap and clamp instead of overlapping the next column (table-layout: fixed, line-clamp, wrap-anywhere). That sounds boring until you paste a real webhook body with a JWT in a field. πŸ˜…


πŸ” Encoder / decoder and text compare

Under More:

Tool What it does
πŸ” Encoder / decoder Base64, URL, ASCII, Unicode, binary, hex, Base64 URL-safe, ROT13, Morse
↔️ Text compare Monaco DiffEditor, side by side from md and up

These run in the browser. In the Windows app they stay on the device.

Structural JSON diff is still the separate Diff tool. Text compare is for logs, headers, and β€œwhy do these two strings disagree.”


βš™οΈπŸŒ Workspace settings and nine locales

The header gear is Workspace settings: appearance, editor font, and language. Font and theme are no longer buried on the profile page.

Locales: en, zh-CN, ja, ko, pt-BR, es, fr, de, ru.


πŸ’» Windows desktop (Tauri 2)

The desktop shell is a local JSON workspace: viewer (text, tree, graph, node, table), jq/JSONPath, stats, encoder, text compare, native Open / Save. Cloud, auth, and marketing stay out of that binary.

Facts only:

  • πŸͺŸ Windows 10 / 11, NSIS + MSI
  • 🐧 Linux: not shipped
  • 🍎 macOS: no build
  • ⚠️ Installers may trip SmartScreen until they are Authenticode-signed; More info β†’ Run anyway
  • Settings can check latest.json and send you to the installer

Shortcuts that only exist on desktop: Ctrl+O open, Ctrl+S save, Ctrl+Shift+S save as. Share-snapshot shortcut stays web-only.


🌐 Web-only UX in the same drop

If you use the hosted app:

  • πŸ‘€ Profile photo opens Manage Profile / Sign out (header Sign out button is gone)
  • πŸ” Tree search sits on the tree toolbar; ✨ AI slides in from the right, next to keyboard shortcuts
  • πŸ•’ Profile JSON history: custom date filter + copy JSON in one click
  • ⚑ Route changes show a layout skeleton instead of a blank page

πŸ”’ Privacy model (unchanged)

Local (default) Optional server
View, format, validate, JSONPath, jq, client-side diff/schema/types, encoder, text compare AI (server-side Groq/Gemini keys), encrypted snapshots, webhook storage, signed-in history

Analytics may record events without collecting raw JSON. Details: bracketview.in/privacy.

BracketView is still not an HTTP client. Paste from your client, or use Webhook Tester for inbound events.


πŸš€ Try it with a real payload

  • Open app.bracketview.in
  • Paste something you actually received this week
  • Cycle Tree β†’ Graph β†’ Node β†’ Table
  • If you want it offline, grab the Windows build

If node view truncates your document or table view picks the wrong columns, that is useful feedback β€” those caps and heuristics are the interesting part, not the screenshots. πŸ™

Top comments (1)

Collapse
 
marcusykim profile image
Marcus Kim

Capping Node view at 250 nodes is a sensible product decision; a readable partial diagram is more useful than a React Flow canvas that freezes on a pathological payload. The table view's fixed layout, line clamping, and wrap-anywhere handling also targets the kind of failure that only appears with real webhook bodies, especially JWT-sized fields. I'd make truncation and column-selection heuristics visibly explain themselves in the UI, because once a tool transforms data for readability, users need to know whether they are seeing the whole payload or an intentional projection of it.