Svelte `<Inspect {value} />`

InspectOptions

type InspectOptions = {
  borderless: boolean;
  canCopy: (value: unknown, type: string, path: unknown[]) => boolean
     | undefined;
  customComponents: CustomComponents;
  elementView: "simple" | "full";
  embedMedia: boolean;
  expandAll: boolean;
  expandLevel: number;
  expandPaths: string[];
  flashOnUpdate: boolean;
  noanimate: boolean;
  onCollapseChange: (state: CollapseState) => void | undefined;
  onCopy: (value: unknown, type: string, path: unknown[]) => Promise<boolean | void> | boolean | void
     | undefined;
  onLog: (value: unknown, type: string, path: unknown[]) => void
     | undefined;
  parseJson: boolean;
  previewDepth: number;
  previewEntries: number;
  quotes: "single" | "double" | "none";
  renderIf: unknown;
  showLength: boolean;
  showPreview: boolean;
  showTools: boolean;
  showTypes: boolean;
  stores: boolean | "value-only" | "full";
  stringCollapse: number;
  theme: "inspect" | "drak" | "stereo" | "dark" | "light" | "plain"
     | string & { };
};

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

borderless

borderless: boolean;

Render no borders or background

Default

false

canCopy

canCopy: 
  | (value: unknown, type: string, path: unknown[]) => 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

{}

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

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

noanimate

noanimate: boolean;

Disable all animations (both css and Svelte transitions)

Default

false

onCollapseChange

onCollapseChange: (state: CollapseState) => void | undefined;

Called whenever a node is collapsed or expanded.

Default

undefined

onCopy

onCopy: 
  | (value: unknown, type: string, path: unknown[]) => 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: unknown, type: string, path: unknown[]) => 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

previewEntries

previewEntries: number;

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

Default

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

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

theme

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

Set color theme class

Default

'inspect'