Types & Snippet Props

Every public type is exported from the package root. Import types with import type:

import type {
    Props,
    StyleProps,
    AriaLabels,
    SnippetOverrides,
    NodeExpandingEvent,
    StringSnippetProps,
    NumberSnippetProps,
    BooleanSnippetProps,
    NullSnippetProps,
    UndefinedSnippetProps,
    BigIntSnippetProps,
    DateSnippetProps,
    FunctionSnippetProps,
    LabelSnippetProps,
    RowSnippetProps,
    ContainerSnippetProps,
    ExpanderSnippetProps,
    ChildGroupSnippetProps,
    ChildrenTransition
} from '@humanspeak/svelte-json-view-lite'

import type {
    Props,
    StyleProps,
    AriaLabels,
    SnippetOverrides,
    NodeExpandingEvent,
    StringSnippetProps,
    NumberSnippetProps,
    BooleanSnippetProps,
    NullSnippetProps,
    UndefinedSnippetProps,
    BigIntSnippetProps,
    DateSnippetProps,
    FunctionSnippetProps,
    LabelSnippetProps,
    RowSnippetProps,
    ContainerSnippetProps,
    ExpanderSnippetProps,
    ChildGroupSnippetProps,
    ChildrenTransition
} from '@humanspeak/svelte-json-view-lite'

`Props`

Accepted by <JsonView>. See JsonView props for narrative documentation.

export interface Props extends Omit<HTMLAttributes<HTMLDivElement>, 'data' | 'style'> {
    data: object | unknown[]
    style?: Partial<StyleProps>
    shouldExpandNode?: (level: number, value: unknown, field?: string) => boolean
    clickToExpandNode?: boolean
    clickToExpandSummary?: boolean
    beforeExpandChange?: (event: NodeExpandingEvent) => boolean
    compactTopLevel?: boolean
    childrenTransition?: ChildrenTransition
    row?: Snippet<[RowSnippetProps]>
    expander?: Snippet<[ExpanderSnippetProps]>
    collapsed?: Snippet<[ContainerSnippetProps]>
    childGroup?: Snippet<[ChildGroupSnippetProps]>
    string?: Snippet<[StringSnippetProps]>
    number?: Snippet<[NumberSnippetProps]>
    boolean?: Snippet<[BooleanSnippetProps]>
    null?: Snippet<[NullSnippetProps]>
    undefined?: Snippet<[UndefinedSnippetProps]>
    bigint?: Snippet<[BigIntSnippetProps]>
    date?: Snippet<[DateSnippetProps]>
    function?: Snippet<[FunctionSnippetProps]>
    label?: Snippet<[LabelSnippetProps]>
}

export interface Props extends Omit<HTMLAttributes<HTMLDivElement>, 'data' | 'style'> {
    data: object | unknown[]
    style?: Partial<StyleProps>
    shouldExpandNode?: (level: number, value: unknown, field?: string) => boolean
    clickToExpandNode?: boolean
    clickToExpandSummary?: boolean
    beforeExpandChange?: (event: NodeExpandingEvent) => boolean
    compactTopLevel?: boolean
    childrenTransition?: ChildrenTransition
    row?: Snippet<[RowSnippetProps]>
    expander?: Snippet<[ExpanderSnippetProps]>
    collapsed?: Snippet<[ContainerSnippetProps]>
    childGroup?: Snippet<[ChildGroupSnippetProps]>
    string?: Snippet<[StringSnippetProps]>
    number?: Snippet<[NumberSnippetProps]>
    boolean?: Snippet<[BooleanSnippetProps]>
    null?: Snippet<[NullSnippetProps]>
    undefined?: Snippet<[UndefinedSnippetProps]>
    bigint?: Snippet<[BigIntSnippetProps]>
    date?: Snippet<[DateSnippetProps]>
    function?: Snippet<[FunctionSnippetProps]>
    label?: Snippet<[LabelSnippetProps]>
}

`StyleProps`

Classname map consumed by the viewer. defaultStyles and darkStyles are ready-made instances.

export interface StyleProps {
    container: string
    basicChildStyle: string
    label: string
    clickableLabel: string
    nullValue: string
    undefinedValue: string
    numberValue: string
    stringValue: string
    booleanValue: string
    otherValue: string
    punctuation: string
    hideCommas?: boolean
    expandIcon: string
    collapseIcon: string
    collapsedContent: string
    childFieldsContainer: string
    noQuotesForStringValues?: boolean
    quotesForFieldNames?: boolean
    ariaLabels: AriaLabels
    /** @deprecated Use `ariaLabels`. Removed in 2.0. */
    ariaLables?: AriaLabels
    stringifyStringValues: boolean
}

export interface StyleProps {
    container: string
    basicChildStyle: string
    label: string
    clickableLabel: string
    nullValue: string
    undefinedValue: string
    numberValue: string
    stringValue: string
    booleanValue: string
    otherValue: string
    punctuation: string
    hideCommas?: boolean
    expandIcon: string
    collapseIcon: string
    collapsedContent: string
    childFieldsContainer: string
    noQuotesForStringValues?: boolean
    quotesForFieldNames?: boolean
    ariaLabels: AriaLabels
    /** @deprecated Use `ariaLabels`. Removed in 2.0. */
    ariaLables?: AriaLabels
    stringifyStringValues: boolean
}

Key roles

Key	Applies to
`container`	Outermost `<div>` around the tree
`basicChildStyle`	Wrapper around each leaf or expandable child
`label`	Field label (key) text
`clickableLabel`	Label variant when `clickToExpandNode` is on
`nullValue` / `undefinedValue`	`null` / `undefined` leaves
`numberValue` / `stringValue` / `booleanValue`	Matching primitive leaves
`otherValue`	`bigint`, `Date`, functions, and anything else
`punctuation`	Braces, brackets, colons, commas
`expandIcon` / `collapseIcon`	Arrow glyphs
`collapsedContent`	Summary shown for collapsed branches (`{…}` / `[…]`)
`childFieldsContainer`	`<ul role="group">` wrapping child fields

Boolean options

hideCommas — omit separator commas from all rows, including collapsed, expanded, and empty containers. Defaults to false; brackets, commas inside string values, and data are preserved.
noQuotesForStringValues — omit " around string leaves.
quotesForFieldNames — wrap labels in ".
stringifyStringValues — call JSON.stringify on strings so newlines and control characters appear as escape sequences.

`AriaLabels`

Screen-reader labels applied to expander buttons.

export interface AriaLabels {
    collapseJson: string
    expandJson: string
}

export interface AriaLabels {
    collapseJson: string
    expandJson: string
}

Default (exported as defaultAriaLabels):

{ collapseJson: 'collapse JSON', expandJson: 'expand JSON' }

{ collapseJson: 'collapse JSON', expandJson: 'expand JSON' }

Note on ariaLables (sic). The React source shipped this typo on the style shape. The Svelte port accepts either key at runtime and emits a console.warn if only the typoed key is set. Use ariaLabels; the typoed alias is scheduled for removal in 2.0.

`SnippetOverrides`

Bag of optional per-type snippets. Every key matches a same-named prop on <JsonView>.

export interface SnippetOverrides {
    row?: Snippet<[RowSnippetProps]>
    expander?: Snippet<[ExpanderSnippetProps]>
    collapsed?: Snippet<[ContainerSnippetProps]>
    childGroup?: Snippet<[ChildGroupSnippetProps]>
    string?: Snippet<[StringSnippetProps]>
    number?: Snippet<[NumberSnippetProps]>
    boolean?: Snippet<[BooleanSnippetProps]>
    null?: Snippet<[NullSnippetProps]>
    undefined?: Snippet<[UndefinedSnippetProps]>
    bigint?: Snippet<[BigIntSnippetProps]>
    date?: Snippet<[DateSnippetProps]>
    function?: Snippet<[FunctionSnippetProps]>
    label?: Snippet<[LabelSnippetProps]>
}

export interface SnippetOverrides {
    row?: Snippet<[RowSnippetProps]>
    expander?: Snippet<[ExpanderSnippetProps]>
    collapsed?: Snippet<[ContainerSnippetProps]>
    childGroup?: Snippet<[ChildGroupSnippetProps]>
    string?: Snippet<[StringSnippetProps]>
    number?: Snippet<[NumberSnippetProps]>
    boolean?: Snippet<[BooleanSnippetProps]>
    null?: Snippet<[NullSnippetProps]>
    undefined?: Snippet<[UndefinedSnippetProps]>
    bigint?: Snippet<[BigIntSnippetProps]>
    date?: Snippet<[DateSnippetProps]>
    function?: Snippet<[FunctionSnippetProps]>
    label?: Snippet<[LabelSnippetProps]>
}

Snippet Prop Types

All value snippets share a single generic shape parameterized by the value’s type:

export interface ValueSnippetProps<T> {
    value: T
    field?: string
    level: number
}

export interface ValueSnippetProps<T> {
    value: T
    field?: string
    level: number
}

Type alias	`value` type
`StringSnippetProps`	`string`
`NumberSnippetProps`	`number`
`BooleanSnippetProps`	`boolean`
`NullSnippetProps`	`null`
`UndefinedSnippetProps`	`undefined`
`BigIntSnippetProps`	`bigint`
`DateSnippetProps`	`Date`
`FunctionSnippetProps`	`Function`

field is the parent key (undefined at root and inside arrays). level is the depth (root = 0).

The label snippet gets a slightly different shape (no value):

export interface LabelSnippetProps {
    field: string
    level: number
}

export interface LabelSnippetProps {
    field: string
    level: number
}

`NodeExpandingEvent`

Payload passed to beforeExpandChange. Return false to veto.

export interface NodeExpandingEvent {
    level: number
    value: unknown
    field?: string
    newExpandValue: boolean
}

export interface NodeExpandingEvent {
    level: number
    value: unknown
    field?: string
    newExpandValue: boolean
}

JsonView props — narrative prop docs
Snippet overrides — worked examples for each snippet
Themes & CSS variables — how StyleProps maps to real CSS

Structural snippet types

RowSnippetProps describes every container, empty container, and primitive row. It includes a stable id, field, value, level, isContainer, optional expanded, row attrs, and the children snippet. attrs contains the row’s class, role="treeitem", and expansion state.

ContainerSnippetProps contains field, value, level, expanded, count, and isArray. The collapsed snippet receives this shape. ExpanderSnippetProps adds state for rendering content inside the viewer-owned expander button:

export interface ExpanderSnippetProps extends ContainerSnippetProps {
    hovered: boolean
    focused: boolean
    focusVisible: boolean
}

export interface ExpanderSnippetProps extends ContainerSnippetProps {
    hovered: boolean
    focused: boolean
    focusVisible: boolean
}

hovered tracks pointer hover on the chevron.
focused tracks native focus, including focus retained after a mouse click.
focusVisible tracks keyboard-visible focus. It is cleared on pointer interaction or blur, and becomes active on keyboard focus or a key press while the chevron is focused.

Use focusVisible for keyboard-only caret animation; use focused when mouse and keyboard focus should receive the same presentation.

ChildGroupSnippetProps adds attrs and children to the container state. Group attrs contains id, class, role="group", aria-hidden, and inert. Spread these on the actual group element; render children() within it. See structural snippets for the ownership contract and a declarative Svelte Motion example.

Types & Snippet Props

Props

StyleProps

Key roles

Boolean options

AriaLabels

SnippetOverrides