# Live Playground > Edit JSON or JS expressions and see a live JsonView render. Swap expand strategies, toggle click-to-expand, all in the browser. **Source:** [https://jsonview.svelte.page/examples/playground](https://jsonview.svelte.page/examples/playground) **Markdown mirror:** [https://jsonview.svelte.page/examples/playground.md](https://jsonview.svelte.page/examples/playground.md) --- This mirror preserves the prose, implementation notes, and runnable Svelte source behind the live example page. ## FIG-001: live playground. Edit JSON in real time, switch expansion behavior, and preview the rendered tree without leaving the page. **Metadata:** tag: `DEMO` | input: `json` | preview: `JsonView` ### Notes - Edit raw JSON or a JS expression and the tree re-renders as you type, with inline parse errors when the input is invalid. - Swap the expand strategy between `allExpanded` and `collapseAllNested`, and toggle `clickToExpandNode` live. - The preview is the real packaged `JsonView` — what you see is exactly what ships in your app. ### Source #### JsonPlayground.svelte Source file: [src/lib/examples/playground/demos/JsonPlayground.svelte](https://github.com/humanspeak/svelte-json-view-lite/blob/main/docs/src/lib/examples/playground/demos/JsonPlayground.svelte) ```svelte

parse

expand {#if expandMode === 'level'} {/if}

click label to expand

{#if parsed.error}

{parsed.error}

{/if}

{#if parsed.value !== null && typeof parsed.value === 'object'} {:else if parsed.error === null}

{JSON.stringify(parsed.value, null, 2)}

{:else}

Fix the parse error to preview.

{/if}

```