Svelte <Inspect {value} />

Usage & Conditional Rendering

Install svelte-inspect-value with your favorite package manager.

A common use case for a component like this is to only render it during development.
If you are using SvelteKit, you can conditionally render Inspect using the dev variable exported from '$app/environment'.
If you are not using SvelteKit or Vite, esm-env is a good alternative for checking conditional environment variables with different bundlers and runtimes.

<script>
  import {dev} from '$app/environment'
  import Inspect from 'svelte-inspect-value'

  let value = $state({
    id: undefined,
    firstName: 'Bob',
    lastName: 'Alice',
    email: 'bob@alice.lol',
    introduction: `The name is Alice.

    Bob Alice.`,
    birthDate: new Date(),
    website: new URL('https://alicebob.website/?ref=abcdefg#about'),
    age: -42,
    emailVerified: true,
    interests: ['radio', 'tv', 'internet', 'kayaks'],
  })
</script>


{#if dev} <!-- only render during development -->
  <Inspect {value} name="demo" />
{/if}

<!-- or use prop (some light weight initialization code will run) -->
<Inspect {value} renderIf={dev} />

Inspect.Values

The basic Inspect component is a "single value"-inspector, meaning it can only have one "root" node. If you have multiple values you want to inspect, you can pack the values into an object and array and pass it to the value-prop. Another solution is passing the values as props to Inspect.Values:

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

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 or define a pre-configured version of the component with Inspect.Values.withOptions or the configured-function:

<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: 500px' } 
  }))

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

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

Chainable inline configuration

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

Global Options

svelte-inspect-value exports a utility function to set a "global" config for every instance of the Inspect-component in or under the component where the function is called (it sets context). Alternatively, you can use the InspectOptionsProvider-component.

Passing a function returning a reactive object to the function will update the components if any property of the object is changed.
You can try this now if you change any options in the configurator at the bottom of your screen! (hover it)

Options set with props, withOptions or configured will override any global options

Props