# Getting Started > Install and render your first JSON tree with @humanspeak/svelte-json-view-lite in under a minute. **Source:** [https://jsonview.svelte.page/docs/getting-started](https://jsonview.svelte.page/docs/getting-started) --- **@humanspeak/svelte-json-view-lite** is a Svelte 5 port of [react-json-view-lite](/compare/vs-react-json-view-lite). It renders any JSON-serializable value as a collapsible tree with keyboard navigation, SSR-stable IDs, CSS-variable theming, and typed per-type `Snippet` overrides — all with zero runtime dependencies. ## Installation ```bash npm install @humanspeak/svelte-json-view-lite ``` ```bash pnpm add @humanspeak/svelte-json-view-lite ``` ```bash yarn add @humanspeak/svelte-json-view-lite ``` The package ships types, so TypeScript consumers need no additional `@types/*`. ## Quick Start Import the component and pass any value as `data`: ```svelte ``` That's the whole API for the default case. The tree renders light-theme by default and respects `prefers-color-scheme` only through explicit theme swapping (see below). ## Dark Theme Every public style token ships in two flavors. Swap them with a single prop: ```svelte ``` For a mode-aware site, bind the prop to your mode store: ```svelte ``` Prefer theming with CSS variables? Every color is exposed as a `--sjv-*` custom property — see [Themes & CSS variables](/docs/themes). ## Expansion Strategies By default every node is collapsed except the root. Pass a `shouldExpandNode` predicate to change that: ```svelte level < 2} /> ``` ## Next Steps - [JsonView props](/docs/api/json-view) — every prop with defaults and types - [Types & snippets](/docs/api/types) — `StyleProps`, `SnippetOverrides`, event payloads - [Themes & CSS variables](/docs/themes) — the full `--sjv-*` token table - [Snippet overrides](/docs/snippet-overrides) — replace any primitive's renderer - [Accessibility](/docs/accessibility) — WAI-ARIA treeview + keyboard contract