JsonView Props

<JsonView> accepts the full Props interface plus anything you’d normally pass to a <div>. Spread attributes (class, id, data-*, aria-*) land on the root container.

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

<JsonView data={value} />

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

<JsonView data={value} />

Prop Reference

data

The root data prop is an object or array. Inside that tree, the viewer handles JSON values plus a few richer JavaScript leaves:

• Plain objects and arrays render as collapsible branches.
• Date renders with toISOString() by default; override with the date snippet.
• bigint renders as its decimal representation with the n suffix preserved in source.
• null and undefined render as red sentinels (color driven by --sjv-null / --sjv-undefined).
• Functions render as function() { } by default; override with the function snippet.

<JsonView
    data={{
        name: 'Ada',
        joined: new Date('2024-01-15'),
        counter: 42n,
        notes: null
    }}
/>

<JsonView
    data={{
        name: 'Ada',
        joined: new Date('2024-01-15'),
        counter: 42n,
        notes: null
    }}
/>

shouldExpandNode

The predicate runs once per expandable node on initial render. Subsequent toggling is user-driven.

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

    // Expand everything up to depth 3, collapse arrays.
    const expand = (level: number, value: unknown) =>
        level < 3 && !Array.isArray(value)
</script>

<JsonView data={value} shouldExpandNode={expand} />

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

    // Expand everything up to depth 3, collapse arrays.
    const expand = (level: number, value: unknown) =>
        level < 3 && !Array.isArray(value)
</script>

<JsonView data={value} shouldExpandNode={expand} />

Two exports cover the common cases:

import { allExpanded, collapseAllNested } from '@humanspeak/svelte-json-view-lite'

import { allExpanded, collapseAllNested } from '@humanspeak/svelte-json-view-lite'

• allExpanded — () => true
• collapseAllNested — (level) => level === 0 (root only)

clickToExpandNode

When true, the field label (key text) becomes a click target alongside the arrow. The style map’s clickableLabel class is applied to affected labels.

<JsonView data={payload} clickToExpandNode />

<JsonView data={payload} clickToExpandNode />

clickToExpandSummary

Set to false when the collapsed summary or punctuation should serve another action, such as copying the row. Both the default summary and custom collapsed snippets become passive expansion targets, so a row snippet can use an ordinary bubbling onclick handler. Chevron clicks and arrow-key navigation remain available. Field-label expansion is independently controlled by clickToExpandNode.

<JsonView data={payload} clickToExpandSummary={false} />

<JsonView data={payload} clickToExpandSummary={false} />

beforeExpandChange

Called synchronously before an expansion state change. Return false to cancel.

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

    const veto = (event: NodeExpandingEvent) => {
        // Don't let users collapse the root.
        if (event.level === 0 && event.newExpandValue === false) return false
        return true
    }
</script>

<JsonView data={payload} beforeExpandChange={veto} />

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

    const veto = (event: NodeExpandingEvent) => {
        // Don't let users collapse the root.
        if (event.level === 0 && event.newExpandValue === false) return false
        return true
    }
</script>

<JsonView data={payload} beforeExpandChange={veto} />

childrenTransition

Use a Svelte transition to animate each node’s live child group. The callback receives its HTMLElement and returns a TransitionConfig. For example, slide animates height and spacing without scaling the child rows:

<script lang="ts">
    import { JsonView } from '@humanspeak/svelte-json-view-lite'
    import { prefersReducedMotion } from 'svelte/motion'
    import { slide } from 'svelte/transition'

    const slideChildren = (node: HTMLElement) =>
        slide(node, { duration: prefersReducedMotion.current ? 0 : 240 })
</script>

<JsonView data={payload} childrenTransition={slideChildren} />

<script lang="ts">
    import { JsonView } from '@humanspeak/svelte-json-view-lite'
    import { prefersReducedMotion } from 'svelte/motion'
    import { slide } from 'svelte/transition'

    const slideChildren = (node: HTMLElement) =>
        slide(node, { duration: prefersReducedMotion.current ? 0 : 240 })
</script>

<JsonView data={payload} childrenTransition={slideChildren} />

Transitions are local to the toggled group and reverse on rapid toggles. Exiting children stay mounted until the outro finishes, but leave the accessibility tree and keyboard navigation immediately. Honor reduced-motion preferences in your callback. Omitting this prop preserves instant expansion and collapse.

compactTopLevel

Useful for arrays of primitives where the wrapping […] adds noise:

<JsonView data={['one', 'two', 'three']} compactTopLevel />

<JsonView data={['one', 'two', 'three']} compactTopLevel />

Renders each element inline instead of nested under an array bracket.

Snippet Props

All nine snippet props receive the same shape with a typed value. See Snippet overrides for the full recipe book.

<JsonView data={payload}>
    {#snippet string({ value })}
        <a href={value} class="text-brand-500">{value}</a>
    {/snippet}
</JsonView>

<JsonView data={payload}>
    {#snippet string({ value })}
        <a href={value} class="text-brand-500">{value}</a>
    {/snippet}
</JsonView>

Spread Attributes

Everything in HTMLAttributes<HTMLDivElement> except data and style forwards to the root container:

<JsonView
    data={payload}
    class="rounded-lg border p-4"
    id="api-response"
    aria-label="Server response"
/>

<JsonView
    data={payload}
    class="rounded-lg border p-4"
    id="api-response"
    aria-label="Server response"
/>

Related

• Types & snippets — StyleProps, SnippetOverrides, event payloads in full
• Themes & CSS variables — --sjv-* tokens
• Accessibility — keyboard + ARIA contract

A childGroup snippet takes precedence over childrenTransition: the snippet owns conditional rendering and animation, while its supplied attrs retain group semantics and the viewer continues to manage expansion, focus, and keyboard navigation.