Svelte

Installation

npm install inspect-value

Note

If you’re using Svelte directly (not as a web component), consider using svelte-inspect-value instead for a native Svelte experience.

Integration Pattern

Use bind:this to get a reference to the element, then set properties in a $effect:

<script>
  import 'inspect-value';

  let el;
  let data = $state({ hello: 'world', items: [1, 2, 3] });

  $effect(() => {
    if (!el) return;
    el.value = data;
  });
</script>

<inspect-value bind:this={el} name="myData" theme="inspect" />

Live Demos

All JavaScript Types

Every built-in JS type rendered with specialized formatting.

All Types

Strings, numbers, booleans, arrays, objects, Date, RegExp, URL, Map, Set, Error, TypedArray — all expanded.

Theme Switcher

Switch between 6 built-in themes using Svelte 5 runes.

Themes

Click a theme button to switch. The $effect reactively updates the element's theme property.

Dynamic Updates

Mutate state with Svelte 5 runes and watch the inspector react in real time.

Dynamic Updates

Click the buttons to modify state. The $effect keeps the inspector in sync.

Search & Filter

Deep search across nested structures with three modes.

Search & Filter

Switch between filter, filter-strict, and highlight modes. The search bar is built into the component.

Svelte 5 Runes Pattern

The recommended pattern with Svelte 5 runes:

<script>
  import 'inspect-value';

  let el = $state();
  let theme = $state('inspect');
  let myData = $state({ count: 0 });

  // Reactive updates — runs whenever theme or myData changes
  $effect(() => {
    if (!el) return;
    el.value = myData;
    el.theme = theme;
  });
</script>

<inspect-value bind:this={el} name="state" />

<button onclick={() => myData = { ...myData, count: myData.count + 1 }}>
  Increment
</button>