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

Getting Started

Install

Section titled “Install”
Terminal window
npm i svelte-inspect-value

Components

Section titled “Components”

Importing Inspect from svelte-inspect-value makes three components available:

  • Inspect
    • Renders in the flow of your page
    • Inspects single values with the value prop, or child values of objects/arrays with the values prop
    • Accepts any configuration prop
  • Inspect.Values
    • Very much like Inspect, except any prop passed to it will be inspected
    • Can be configured “inline”
  • Inspect.Panel
    • A fixed-position version of Inspect that can be resized, positioned and has a few more configuration options
<script>
  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>


<Inspect {value} />
<Inspect.Values.Expand0 {...value} />
<Inspect.Panel expandLevel={0} {value} />
Inspect.Panel 👉 Inspect
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
Inspect.Values
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

Example Setup

Section titled “Example Setup”

Here’s a recommended setup for developing with SvelteKit:

  • Add Inspect.Panel to the root layout.
  • Provide InspectOptions. Set up conditional rendering using environment variables.
  • Inspect the page object with the Panel. Data from load functions will always be available.
<!-- +layout.svelte -->
<script lang="ts">
  import Inspect, {InspectOptionsProvider, type InspectOptions} from 'svelte-inspect-value'
  import { page } from '$app/state'
  import { dev } from '$app/environment'


  let { children } = $props()


  let inspectOptions = $state<InspectOptions>({
    renderIf: dev,
    expandLevel: 0,
    // other preferences
  })
</script>


<InspectOptionsProvider options={inspectOptions}>
  <Inspect.Panel values={{
    // spread to access getters
    page: { ...page },
    // or just pass page data
    pageData: page.data
  }} />


  <main>
    {@render children()}
  </main>
</InspectOptionsProvider>
Stackblitz Demo