svelte-json-discovery: the discovery.js JSON struct view, as a Svelte 5 component

#svelte #javascript #opensource

discovery.js ships one of the best interactive JSON struct viewers in the wild. If you want that UX inside a Svelte 5 app — search, diff, validate, table, accessibility — without hosting the entire Discovery toolkit, svelte-json-discovery is a standalone extraction/reimplementation.

GitHub: https://github.com/Blackman99/svelte-json-discovery
Docs & examples: https://blackman99.github.io/svelte-json-discovery/
npm: svelte-json-discovery

Install

pnpm add svelte-json-discovery
# or npm / yarn

<script>
  import { JsonViewer } from 'svelte-json-discovery';

  const data = {
    user: { id: 1, name: 'Ada' },
    tags: ['svelte', 'json'],
  };
</script>

<JsonViewer {data} expanded={2} />

Highlights

Area	What you get
Previews	Type-colored tokens; numbers with visual thousands separators; `Date` / `RegExp` / `Set` / Error / bigint / typed arrays / functions
Scale	Windowed large array
Table	Configurable object-array table with bounded “show more”
Diff	Bounded, entity-aware moves; cycle / hostile-value protection
Validate	Async/precomputed issues; optional Ajv / Zod / Valibot adapters
A11y	ARIA tree, roving tabindex, full keyboard navigation
Schema	Hover field docs from JSON Schema (title, description, enum, deprecated, …)
Theme	Light / dark / auto via `--discovery-fmt-*`

Full prop reference: docs #api and the package README under packages/svelte-json-discovery.

Monorepo layout

Path	Role
`packages/svelte-json-discovery`	Published library
`docs`	Docs site consuming the workspace package (examples = shipping code)

Credits & license

All rendering logic, styling, and UX derive from discovery.js src/views/struct/ by Roman Dvornov and contributors. This project re-implements that view as a Svelte 5 component. MIT.

Call for feedback

Still early. If you build API explorers, admin consoles, or schema-driven UIs on Svelte 5, I’d love sharp edges filed as issues — especially large payloads, diff caps, and validator adapter ergonomics.s/objects; incremental Set/Map iterators |
| Strings | Truncation, length badges, escaped vs “as text”, URL auto-link |
| Search | Cancellable key/value walk, capped results, wraparound + reveal |
| Control | Controlled paths + bind:this controller methods (expand, focus, scroll, select) |
| Inspector | Optional accessible toolbar from svelte-json-discovery/inspector |

DEV Community