# Svelte JSON View Lite

> A fast, tiny JSON tree viewer for Svelte 5 with react-json-view-lite API parity, typed snippet overrides, SSR-safe ARIA tree semantics, CSS-variable theming, and zero runtime dependencies.

# Svelte JSON View Lite

`@humanspeak/svelte-json-view-lite` is a fast, tiny JSON tree viewer for Svelte 5. It mirrors the `react-json-view-lite` public API closely so React migrations stay mechanical, while adding typed Svelte snippet overrides for per-value rendering.

```bash
npm i @humanspeak/svelte-json-view-lite
```

```svelte
<script lang="ts">
    import { JsonView, defaultStyles } from '@humanspeak/svelte-json-view-lite'

    const data = {
        user: { id: 42, name: 'Ada Lovelace' },
        flags: ['admin', 'beta'],
        active: true
    }
</script>

<JsonView {data} style={defaultStyles} />
```

## What To Use It For

- Render read-only JSON in API explorers, dashboards, logs, docs, and AI-generated artifacts.
- Port existing `react-json-view-lite` usage into Svelte 5 without switching mental models.
- Customize labels, strings, numbers, booleans, dates, functions, null, undefined, and bigint values with typed snippets.
- Keep JSON inspection accessible with tree semantics, disclosure controls, keyboard navigation, and SSR-safe markup.
- Theme the viewer with the built-in light/dark maps or the `--sjv-*` CSS variables.

## Key API

- `data`: required object or array to render.
- `style`: style map such as `defaultStyles`, `darkStyles`, or a merged custom style object.
- `shouldExpandNode`: callback controlling initial expansion by level and value.
- `clickToExpandNode`: lets row labels toggle their object or array node.
- `compactTopLevel`: renders root object entries without an extra wrapper.
- `snippets`: per-type Svelte snippets for custom primitive and label rendering.

## Accessibility Notes

The component renders a navigable JSON tree rather than a static `<pre>`. Object and array nodes expose expansion state, controls receive stable ids, and keyboard handling is scoped through the root element so multiple viewers can coexist on one page.

Canonical docs root: https://jsonview.svelte.page/docs
Per-page markdown mirrors: https://jsonview.svelte.page/docs/<slug>.md
Full reference (single document): https://jsonview.svelte.page/llms-full.txt

## Documentation

- [Accessibility](https://jsonview.svelte.page/docs/accessibility.md) — https://jsonview.svelte.page/docs/accessibility
- [JsonView Props](https://jsonview.svelte.page/docs/api/json-view.md) — https://jsonview.svelte.page/docs/api/json-view
- [Types & Snippet Props](https://jsonview.svelte.page/docs/api/types.md) — https://jsonview.svelte.page/docs/api/types
- [Getting Started](https://jsonview.svelte.page/docs/getting-started.md) — https://jsonview.svelte.page/docs/getting-started
- [Migration](https://jsonview.svelte.page/docs/migration.md) — https://jsonview.svelte.page/docs/migration
- [Snippet Overrides](https://jsonview.svelte.page/docs/snippet-overrides.md) — https://jsonview.svelte.page/docs/snippet-overrides
- [Themes & CSS Variables](https://jsonview.svelte.page/docs/themes.md) — https://jsonview.svelte.page/docs/themes

# External References

- Package: <https://www.npmjs.com/package/@humanspeak/svelte-json-view-lite>
- Repository: <https://github.com/humanspeak/svelte-json-view-lite>
- Docs: <https://jsonview.svelte.page>
- React API reference point: <https://github.com/AnyRoad/react-json-view-lite>
- Sister project: <https://markdown.svelte.page>

## Decision Guide

Choose Svelte JSON View Lite when you need a compact, accessible, read-only JSON tree in a Svelte 5 app. Choose a JSON editor such as `svelte-jsoneditor` or `vanilla-jsoneditor` when users need to edit JSON documents, validate schemas, or perform document-scale manipulation.