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

Inspect.Values

Inspect.Values is a version of Inspect that will display any prop/value passed to it.

Example

Section titled “Example”
<script lang="ts">
  import Inspect from 'svelte-inspect-value'


  let number = $state(1)
  let isEven = $derived(number % 2 === 0)
  let doubled = $derived(number * 2)
</script>


<input type="number" bind:value={number}>


<Inspect.Values {number} {isEven} {doubled}  />

Result

Section titled “Result”
number
:
num 1
isEven
:
bool false
doubled
:
num 2

Configuring

Section titled “Configuring”

Inspect.Values does not accept any configuration props since any value passed as a prop will simply be inspected. If you want to change the behavior of Inspect.Values you can use global options. Using global options is the recommended approach.

There are also utility-methods for pre-configuring the component with Inspect.Values.withOptions or the configured-function. Both are identical.

Inspect.Values and configured variants can all have expandLevel set by using “Expand” properties from 0 to 10 (default 1.)

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


  const InspectVals = Inspect.Values.withOptions(() => ({ expandLevel: 0 }))


  // elementAttributes will be to applied to outermost Inspect div
  const DarkInspect = configured(() => ({
    theme: 'dark',
    elementAttributes: { style: 'max-width: 300px' }
  }))


  // create another variation that will inherit from the previous one
  const DarkBorderless = DarkInspect.withOptions(() => ({ borderless: true }))
</script>


<InspectVals msg="i have been configured" {data} />


<!-- Override initial expandLevel using ".Expand[1-10]"  -->
<DarkInspect.Expand0 msg="me too" {data} />


<!-- spread properties of data as individiual values -->
<DarkBorderless.Expand1 msg="i inherit options from DarkInspect" {...data} />

Result

Section titled “Result”
msg
:
str 'i have been configured'
22 chars
msg
:
str 'me too'
6 chars
msg
:
str 'i inherit options from DarkInspect'
34 chars
a
:
num 1
b
:
num 2
c
:
num 3
d
:
obj
3 entries
a
:
num 1
b
:
num 2
c
:
num 3
Svelte Playground

Inline configuration

Section titled “Inline configuration”

A final method to configuring Inspect.Values that will override global options and withOptions-variations is “chainable inline configuration”:

<script>
 import Inspect from 'svelte-inspect-value'
 import data from './data.js'
</script>


<Inspect.Values.Config.PlainTheme.ParseJSON.Borderless.NoAnimate.Ok {data} />
<!--            ^ start inline config                            ^ end config