Migration

Name: Svelte JSON View Lite
Rating: 5 (0 reviews)
Author: Humanspeak, Inc.

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}
/>

Deliberate Difference

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.