jsonhaus

A lightweight JSON viewer in the browser. Paste or open a file, browse the tree, search it. Nothing is uploaded anywhere — parsing happens in the page, and the document you were last looking at is kept in localStorage on your own machine.

Vue 3 and Vite, no other runtime dependencies. The production build is about 30 KB gzipped.

Features

• Tree view with a distinct glyph per JSON type — object, array, string, number, boolean, null. Expand a node by clicking its +, double-clicking the row, or with Expand all / Collapse all.
• Details pane showing the name/value pairs of whatever is selected, with a breadcrumb of the path.
• Text tab with paste, copy, format, minify, clear, and open-from-file. It parses as you type and pushes the result straight into the viewer, keeping the last good tree on screen while an edit is mid-flight, so a half-typed document doesn't blank the view.
• Search across keys and scalar values, with next/previous, a match count, and automatic expand-and-scroll to each hit.
• Light and dark themes. Follows the operating system by default and reacts if you change it while the app is open; an explicit override is remembered and applied before first paint, so a reload in dark mode never flashes light.

Development

npm install
npm run dev      # http://localhost:5173
npm run build    # -> dist/
npm run preview  # serve the build

Deployment

Firebase Hosting, configured in firebase.json for the nb-jsonhaus site:

npm run firebase-deploy

Project layout

index.html                  pre-paint theme script, icons, manifest
src/
  main.js                   entry
  App.vue                   layout, tabs, search, live parse, persistence
  theme.js                  auto/light/dark, persisted
  json.js                   type, format, flatten, search helpers
  style.css                 CSS-variable palette for both themes
  components/
    JsonTree.vue            the tree
    DetailsPane.vue         selection readout
    TextPane.vue            text editor and toolbar
    TypeIcon.vue            type glyphs

The tree renders from a single flattened array recomputed from the set of expanded paths, so collapsed subtrees cost nothing. Rows are not virtualized: a document with tens of thousands of simultaneously expanded nodes will get sluggish.

License

MIT