logo

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

PropTypeDefaultDescription
dataobject \| unknown[]—Required. Any JSON-serializable value. Arrays, plain objects, Date, bigint, null, and undefined all render.
stylePartial<StyleProps>defaultStylesClassname map. Import defaultStyles or darkStyles, or pass a partial to override individual keys.
shouldExpandNode(level: number, value: unknown, field?: string) => booleanExpand root onlyPredicate called for every expandable node. Return true to expand. Use the exported allExpanded / collapseAllNested helpers for the common cases.
clickToExpandNodebooleanfalseWhen true, clicking the field label (key) also toggles expand/collapse, not just the arrow.
beforeExpandChange(event: NodeExpandingEvent) => boolean—Veto handler. Receives { level, value, field, newExpandValue }. Return false to cancel the transition.
compactTopLevelbooleanfalseRender top-level primitives inline without the enclosing {…} wrapper. Useful when data is an array of mixed primitives.
stringSnippet<[StringSnippetProps]>Default rendererOverride the renderer for string values. See Snippet overrides.
numberSnippet<[NumberSnippetProps]>Default rendererOverride the renderer for numbers.
booleanSnippet<[BooleanSnippetProps]>Default rendererOverride the renderer for booleans.
nullSnippet<[NullSnippetProps]>Default rendererOverride the renderer for null values.
undefinedSnippet<[UndefinedSnippetProps]>Default rendererOverride the renderer for undefined values.
bigintSnippet<[BigIntSnippetProps]>Default rendererOverride the renderer for bigint values.
dateSnippet<[DateSnippetProps]>Default rendererOverride the renderer for Date instances.
functionSnippet<[FunctionSnippetProps]>Default rendererOverride the renderer for function values.
labelSnippet<[LabelSnippetProps]>Default rendererOverride the renderer for field labels (keys).

data

Any value that round-trips through JSON.parse renders — plus a few richer types:

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

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

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