InspectOptions

type InspectOptions = {
  animRate: number;
  borderless: boolean;
  canCopy: (value, type, path) => boolean | undefined;
  customComponents: CustomComponents;
  disableKeynav: boolean;
  easing: (t) => number;
  elementView: "simple" | "full";
  embedMedia: boolean;
  expandAll: boolean;
  expandLevel: number;
  expandPaths: string[];
  flashOnUpdate: boolean;
  heading: boolean | string | Snippet<[boolean]>;
  highlightMatches: boolean;
  hotkeys: Partial<InspectHotkeys> | boolean;
  noanimate: boolean;
  onCollapseChange: (state) => void | undefined;
  onCopy:   | (value, type, path) => Promise<boolean | void> | boolean | void
     | undefined;
  onLog: (value, type, path) => void | undefined;
  parseJson: boolean;
  previewDepth: number;
  previewEntries: number;
  quotes: "single" | "double" | "none";
  renderIf: unknown;
  search: boolean | "highlight" | "filter" | "filter-strict";
  searchMode: "and" | "or";
  showLength: boolean;
  showPreview: boolean;
  showTools: boolean;
  showTypes: boolean;
  stores: boolean | "value-only" | "full";
  stringCollapse: number;
  theme:   | "inspect" | "drak" | "stereo" | "dark" | "light" | "plain"
     | string & {
   };
  typeToFocus: boolean;
};

Various options to configure the look and feel of components exported by 'svelte-inspect-value'

These can be set directly on Inspect and Inspect.Panel as props, or “globally” using setGlobalInspectOptions or InspectOptionsProvider Props will override any options using the provider methods.

Example

<script>
  import Inspect, { InspectOptionsProvider } from 'svelte-inspect-value'
  import data from './data.js'
</script>

<InspectOptionsProvider options={{ expandLevel: 3, theme: 'light' }}>
  <Inspect value={data} expandLevel={20} />
  <!-- override expandLevel -->
</InspectOptionsProvider>

Properties

animRate

animRate: number

Set transition / animation rates

0.5 will double transition durations while 2 will halve durations.

The base duration for transitions is 250ms.

Default

1

---

borderless

borderless: boolean

Render no borders or background

Default

false

---

canCopy

canCopy: (value, type, path) => boolean | undefined

Custom predicate that determines if copy-button should be displayed for a value

Default

undefined

---

customComponents

customComponents: CustomComponents

Custom components for displaying types. An object with type as keyname and array of component and optional prop modification function and predicate determining if custom component should be used.

Use the helper function addComponent to get properly typed props for the custom component.

Example

<script lang="ts">
  import Inspect, { addComponent } from 'svelte-inspect-value'
  import HexColorDisplay from './HexColorDisplay.svelte'
  import CustomBigIntDisplay from './CustomBigIntDisplay.svelte'
</script>

<Inspect
  customComponents={{
    bigint: [CustomBigIntDisplay],
    string: addComponent(
      HexColorDisplay,
      // transform props or pass extra props
      (props) => props,
      // revert to default string component if false
      (props) => props.value.startsWith('#')
    ),
  }}
/>

Default

{
}

---

disableKeynav

disableKeynav: boolean

Disables using arrow keys, home, end, enter and space to navigate or expand/collapse nodes when a node is focused.

Default

false

Since

0.11.0

---

easing()

easing: (t) => number

Easing-function for expand/collapse transitions

Parameters

t

number

Returns

number

Default

;(t) => Math.pow(t - 1.0, 3.0) * (1.0 - t) + 1.0 // quartOut

---

elementView

elementView: 'simple' | 'full'

Determines what properties are shown when inspecting HTML elements

• 'simple' - minimal list of properties including classList, styles, dataset and current scrollPositions
• 'full' - lists all enumerable properties of an element

Default

'simple'

---

embedMedia

embedMedia: boolean

Embed images or sounds if a string is a url or path ending with a valid image or sound file extension

Default

false

---

expandAll

expandAll: boolean

Expand all expandable nodes by default

Default

false

---

expandLevel

expandLevel: number

Default expanded level

Default

1

---

expandPaths

expandPaths: string[];

Initially expanded paths

Default

;[]

Example

<script>
  import Inspect from 'svelte-inspect-value'

  const value = {
    a: { b: [{ c: '' }], d: 0 },
  }
</script>

<!-- default name of root expandable is "root" -->
<Inspect {value} expandPaths={['root.a.b.0']} />
<!-- if name is set -->
<Inspect {value} name="obj" expandPaths={['obj.a.b.0']} />

---

flashOnUpdate

flashOnUpdate: boolean

Indicate when a value or child value is updated

Default

true

---

heading

heading: boolean | string | Snippet<[boolean]>

A string or Snippet that will be rendered as a small heading with a collapse-button for the component.

The snippet parameter indicates if the instance has been collapsed

---

highlightMatches

highlightMatches: boolean

When search is enabled, highlight matches in keys, types and values when typing in the search input box.

See

InspectOptions.search

Default

true

---

hotkeys

hotkeys: Partial<InspectHotkeys> | boolean

Configures hotkeys using tinykeys syntax.

Use an object to override defaults, true to use defaults and false to disable hotkeys

See

InspectHotkeys

Default

{ search: 'Shift+$mod+F', expandTop: '$mod+ArrowRight', collapseTop: '$mod+ArrowLeft' }

Since

0.11.0

---

noanimate

noanimate: boolean

Disable all animations (both css and Svelte transitions)

Default

false

---

onCollapseChange

onCollapseChange: (state) => void | undefined;

Called whenever a node is collapsed or expanded.

Default

undefined

---

onCopy

onCopy:
  | (value, type, path) => Promise<boolean | void> | boolean | void
  | undefined;

Custom callback run when clicking copy tool-button. If this option is set without passing a function to canCopy, the copy button will be shown for all values.

This overrides the default copy-button behavior.

See

InspectOptions.canCopy

Returns

boolean or Promise resolving to boolean indicating copying value was successful if true. The copy button will change color on success.

Default

undefined

---

onLog

onLog: (value, type, path) => void | undefined;

Custom callback run when clicking log tool-button.

This overrides the default log-button behavior.

Default

undefined

---

parseJson

parseJson: boolean

Try parsing strings that start with '[' or '{' and display the parsed value

Default

false

---

previewDepth

previewDepth: number

How many levels of nested values to preview before “collapsing” nested values to their type only

Default

1

---

previewEntries

previewEntries: number

How many entries / items of arrays, objects, maps, sets etc. to preview

Default

3

---

quotes

quotes: 'single' | 'double' | 'none'

Display string values with double or single quotes

Default

'single'

---

renderIf

renderIf: unknown

Render condition for Inspect

Function or value. Inspect will render if value or return-value is truthy.

Most valuable if set with global options and there are multiple Inspect instances, otherwise using Svelte {#if}{/if} blocks is recommended.

Default

true

---

search

search: boolean | 'highlight' | 'filter' | 'filter-strict'

Enable or disable search functionality.

Three modes are available:

• 'filter' | true - children and siblings of matching nodes will be visible
• 'filter-strict' - only matches will be visible
• 'highlight' - no nodes will be hidden, but matches will be highlighted

Default

false

---

searchMode

searchMode: 'and' | 'or'

Initial multi-term search mode

• 'and' - nodes must match every term
• 'or' - nodes can match one of the terms

Default

'or'

---

showLength

showLength: boolean

Display length of arrays or strings and number of nested entries in objects / maps etc

Default

true

---

showPreview

showPreview: boolean

Display preview of nested values

Default

true

---

showTools

showTools: boolean

Enable or disable “tool-buttons” that appear on hovering a value.

Default

true

---

showTypes

showTypes: boolean

Display type labels before values e.g. “string” / “number” Does not affect class / function / promise

Default

true

---

stores

stores: boolean | 'value-only' | 'full'

Enable or disable svelte-store inspection. Objects with a subscribe method will be inspected as stores and show their subscription value.

Set to true, 'value-only' or 'full' to enable.

• 'full' | true - render store value as nested value along with other properties on the store object
• 'value-only' - render store value only along with a note indicating the value was retrieved from a store

Default

'full'

---

stringCollapse

stringCollapse: number

Set a max display length for string values. 0 means display full string

Default

0

---

theme

theme:
  | "inspect" | "drak" | "stereo" | "dark" | "light" | "plain"
  | string & {
};

Set color theme class

Available themes: `‘inspect’|‘drak’|‘stereo’|‘dark’|‘light’|‘plain’

Default

'inspect'

---

typeToFocus

typeToFocus: boolean

Enables typing to focus any node with matching text when any node is focused.

Default

true

Since

0.11.0