Skip to content
Svelte Inspect Value Svelte Inspect Value Svelte <Inspect {value} />

Configuration

The components of this library are very configurable, with over 30 different options.

See the TypeDoc documentation for InspectOptions for a full list of options.

Inspect and Inspect.Values have the same options, but different ways to apply them.

Inspect.Panel has the same options as the two others in addition to some additional options exclusive to the component.

Global Options

Section titled “Global Options”

All components can be configured by using the provider component or the function setGlobalInspectOptions.

This sets a Svelte context, so per definition the configuration is not “global” unless you set it in a root component.

Props

Section titled “Props”

Inspect and Inspect.Panel can have configuration passed as props.

If a setting is set using the provider method, the prop value will be used.

Example

Section titled “Example”
<script>
  import {dev} from '$app/environment'
  // import {DEV} from 'esm-env' // if not using SvelteKit?
  import {setGlobalInspectOptions, InspectOptionsProvider} from 'svelte-inspect-value'


  // set and forget
  setGlobalInspectOptions(() => ({
    theme: 'drak',
    stringCollapse: 20,
    renderIf: dev // conditionally render
  }))


  // reactive global options
  // good for - for example - setting up a keybind for toggling "renderIf"
  let globalConfig = $state({ renderIf: true, theme: 'drak' })


  setGlobalInspectOptions(() => globalConfig)


  let { children } = $props()
</script>


<input type="checkbox" bind:checked={globalConfig.renderIf as boolean} />


<!-- provider component - alternative to setGlobalInspectOptions function -->
<InspectOptionsProvider options={globalConfig}>
  <main>
    {@render children()}
  </main>
</InspectOptionsProvider>

Options Overview

Section titled “Options Overview”

This section includes demonstrations of some of the settings available.

Aside from theme and borderless, the global options in the bottom right will not affect these examples.

Conditional Rendering

Section titled “Conditional Rendering”

A common use case for utility components like this is to only render them during development.

Using renderIf with a value or function that is or returns a truthy or falsy value, you can use environment flags or other means of toggling Inspect renderering on and off.

When developing with SvelteKit, importing dev from $app/environment is simple.
The package esm-env is a good alternative if not using SvelteKit.

<script lang="ts">
  import Inspect, { setGlobalInspectOptions } from 'svelte-inspect-value'
  import { dev } from '$app/environment'


  // this can be set up to be toggled by a keyboard shortcut
  let shouldRender = $state(true)


  // setting this by using global options is recommended
  setGlobalInspectOptions(() => ({
    renderIf: () => dev && shouldRender,
    theme: 'dark',
    borderless: false
  }))
</script>


<Inspect values={{ /* ... */ }} />

Lengths, Types, Previews, Tools

Section titled “Lengths, Types, Previews, Tools”
  • showLength — visibility of array / string length, number of entries in map/set/object
  • showTypes — visibility of type display before value.
  • showTools — visibility of tool buttons when a row is hovered / focused
  • showPreview — visibility of nested value previews

Preview Settings

Section titled “Preview Settings”

The option previewDepth controls how many levels of nested values will be previewed before stopping and just showing what type of value is at that level. Simple values like strings, numbers and booleans will always be previewed.

previewEntries controls how many entries per level is previewed.

Initial Expand Level / Paths

Section titled “Initial Expand Level / Paths”

The option expandLevel sets initial level of expanded nested nodes.

expandPaths takes an array of strings in the form of dot-separated paths of nodes that should be expanded initially.

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

Animation Settings

Section titled “Animation Settings”

To control animation duration when animation is enabled, set animRate.
The base speed for animations is 250 milliseconds. Setting animRate to 0.5 will slow down animations to 500 milliseconds duration, and setting it to 2 will make set animation duration to 125 milliseconds.

Animation can be disabled by setting noanimate to true.

flashOnUpdate enables / disables expand buttons and list bullets flashing when values are updated.

updates
:
num 0
duration
:
str '250.00ms'
8 chars