Svelte <Inspect {value} />

Usage & Conditional Rendering
Global Options

Getting Started

Install svelte-inspect-value with your favorite package manager.
Importing Inspect from svelte-inspect-value makes three components available:
Inspect, Inspect.Panel, and Inspect.Values

Usage & Conditional Rendering

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.

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

Result:

:
obj 10 entries
id :
undefined
firstName :
str 'Bob' 3 chars
lastName :
str 'Alice' 5 chars
email :
str 'bob@alice.lol' 13 chars
age :
num -42
emailVerified :
bool true

Global Options

svelte-inspect-value exports a utility function to set a "global" config for every instance of the Inspect-components 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 the navigation-menu.

+layout.svelte
...
Result:
str 'no long strings in t…' 44 chars

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