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
} from '@humanspeak/svelte-json-view-lite'

import type {
    Props,
    StyleProps,
    AriaLabels,
    SnippetOverrides,
    NodeExpandingEvent,
    StringSnippetProps,
    NumberSnippetProps,
    BooleanSnippetProps,
    NullSnippetProps,
    UndefinedSnippetProps,
    BigIntSnippetProps,
    DateSnippetProps,
    FunctionSnippetProps,
    LabelSnippetProps
} 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
    beforeExpandChange?: (event: NodeExpandingEvent) => boolean
    compactTopLevel?: boolean
    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
    beforeExpandChange?: (event: NodeExpandingEvent) => boolean
    compactTopLevel?: boolean
    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
    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
    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

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 {
    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 {
    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

Types & Snippet Props

Props

StyleProps

Key roles

Boolean options

AriaLabels

SnippetOverrides