Svelte Inspect

Live & interactive object inspector for Svelte, inspired by DevTools.

npm install --save svelte-inspect

Try the example in the svelte.dev REPL. Use mouse and keyboard to inspect the todos.

<script>
  import Todos from './Todos.svelte';

  // You have some data you want to inspect
  let todos = [
    {done: false, text: 'Import svelte-inspect'},
    {done: false, text: 'Pass any number of values to it'},
    {done: false, text: 'See them update live'}
  ];

  // Simply import svelte-inspect…
  import Inspect from 'svelte-inspect';
</script>

<!-- …and add an inspector anywhere on your page -->
<Inspect {todos} />

<Todos bind:todos={todos} />

Types

See REPL demo of most of the types. These types have special formatting:

• Arrays (including TypedArrays)
• Objects
• Functions (including async functions)
• Classes
• Map and Set
• RegExps
• Dates
• Booleans
• undefined and null
• Numbers (including BigInt)
• Strings
• Symbols
• Errors
• HTML elements

There's support for enumerable and non-enumerable properties, symbol keys, __proto__, and getters (click to evaluate). It does not yet have any special support for e.g. iterators, promises.

Keyboard navigation

You can use your keyboard to move around in the object hierarchy.

Keys		Action
A…Z 0…9	Type anything	Jump using fuzzy matching
⇥	Tab	Focus next
⇧⇥	Shift + Tab	Focus previous
⯇	Left	Close or step out
⯈	Right	Open or step in
⯅	Up	Focus previous
⯆	Down	Focus next
	Space	Toggle
↵	Enter	Open & step in
esc	Escape	Step out

API

Inspect

Create one inspector for every value passed in as a prop, with default colors.

<script>
  import Inspect from 'svelte-inspect';
</script>

<Inspect value={'foo'} {value2} {...etc} />

Inspect.Value

Inspect a single value, without showing the name of the prop. Also takes an optional depth directly as a prop.

<script>
  import Inspect from 'svelte-inspect';

  /* Or as a named import:
  import {Value} from 'svelte-inspect';
  */
</script>

<Inspect.Value value={'foo'} depth={2} />

Inspect.Inverted

Inspector with color palette suitable for dark backgrounds.

<script>
  import Inspect from 'svelte-inspect';

  /* Or as a named import:
  import {Inverted} from 'svelte-inspect';
  */
</script>

<Inspect.Inverted value={'foo'} {value2} {...etc} />

Inspect[0-10]

Inspectors pre-configured with {depth: 0-10}.

<script>
  import Inspect from 'svelte-inspect';
</script>

<Inspect[2] {document} />

Inspect.configure(configuration)

Create an inspect component with custom configuration.

<script context="module">
  import Inspect from 'svelte-inspect';
  const CustomInspect = Inspect.configure({/* configuration */});

  /* Or as a named import:
  import {configure} from 'svelte-inspect';
  const CustomInspect = configure({/* configuration */});
  */
</script>

<CustomInspect value={'foo'} />

Note the use of context="module", which is required for the Svelte compiler to understand that CustomInspector can be used in the template.

The config is WIP. There are currently two options:

{depth: number}

Set how many levels of the object hierarchy should start in the open state. Defaults to 1.

<script context="module">
  import Inspect from 'svelte-inspect';
  const CustomInspect = Inspect.configure({depth: 2});
  const object = {
    foo: {
      array: [1, 2, 3]
    }
  };
</script>

<!-- 2 levels deep – will show `foo` and `array` but not `[1, 2, 3]` -->
<CustomInspect {object} />

Non-enumerable properties will not be opened.

{palette: {...colors}}

Create a component with a customized color palette. Values are any valid CSS color, keys are red, blue, green, purple, orange, yellow, brown, pink, gray, black, white and selection (note that not all of these colors are currently used).

(work in progress; expect to change)

<script context="module">
  import Inspect from 'svelte-inspect';
  const CustomInspect = Inspect.configure({
    palette: {
      selection: 'hotpink',
      blue: 'dodgerblue'
    }
  });
</script>