Migration

Svelte JSON View Lite intentionally follows react-json-view-lite closely. Most migrations are a component import change plus replacing React render functions with Svelte snippets when you need custom values.

Install

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

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

Basic Component

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

    const data = { status: 'ok', count: 3 }
</script>

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

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

    const data = { status: 'ok', count: 3 }
</script>

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

Prop Mapping

React JSON View Lite	Svelte JSON View Lite	Notes
`data`	`data`	Object or array JSON root.
`style`	`style`	Use `defaultStyles`, `darkStyles`, or a merged style map.
`shouldExpandNode`	`shouldExpandNode`	Same purpose: decide initial expansion by level and value.
`clickToExpandNode`	`clickToExpandNode`	Same interaction model.
`compactTopLevel`	`compactTopLevel`	Same root rendering option.
custom renderers	snippet props	Svelte snippets replace React render callbacks.

Snippet Override

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

    const data = { url: 'https://jsonview.svelte.page' }
</script>

{#snippet stringValue({ value }: { value: string })}
    {#if value.startsWith('https://')}
        <a href={value}>{value}</a>
    {:else}
        <span>{value}</span>
    {/if}
{/snippet}

<JsonView
    {data}
    style={defaultStyles}
    string={stringValue}
/>

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

    const data = { url: 'https://jsonview.svelte.page' }
</script>

{#snippet stringValue({ value }: { value: string })}
    {#if value.startsWith('https://')}
        <a href={value}>{value}</a>
    {:else}
        <span>{value}</span>
    {/if}
{/snippet}

<JsonView
    {data}
    style={defaultStyles}
    string={stringValue}
/>

Svelte additions

The Svelte port adds typed structural and value snippets. For copyable bordered rows, use style.hideCommas to omit separators and clickToExpandSummary={false} to reserve expansion for chevrons when label expansion is also off. These options default to false and true, respectively, so existing rendering and summary clicks are preserved.

Custom expander snippets receive focusVisible for keyboard-only animation in addition to native focused state. See structural snippets for these contracts and collapsed-snippet spacing.

The original React package includes a typoed ariaLables style key. Svelte JSON View Lite uses ariaLabels, while still honoring the typoed key at runtime with a warning for compatibility.