Home

Svelte <Inspect {value} /> is a collection of “JSON tree”-like value inspector components.

packageInfo

name

:

str 'svelte-inspect-value'

20 chars

installCommands

:

arr

5 items

0

:

str 'copy to clipboard 👉'

20 chars

1

:

str 'npm install svelte-inspect-value'

32 chars

2

:

str 'pnpm add svelte-inspect-value'

29 chars

3

:

str 'bun add svelte-inspect-value'

28 chars

4

:

str 'yarn add svelte-inspect-value'

29 chars

npm

:

str 'https://www.npmjs.com/package/svelte-inspect-value'

50 chars

github

:

str 'https://github.com/ampled/svelte-inspect-value'

46 chars

docs

:

str 'https://inspect.eirik.space/'

28 chars

playground

:

str 'https://svelte.dev/playground/956365d6905c44298234ff4d9c60741e?version=5'

72 chars

stats

:

Promise < pending >

state

:

str 'pending'

7 chars

result

:

undefined

The main purpose of the components is to be a developer utility. When developing apps it can be useful to have a “live” preview of state like API data, form values, the state of a promise and so on.

Features

The examples page is the quickest way to get an overview of what this component can do, but here is a list of its key features:

• Display arrays & objects in a tree-like view
• Support for most JavaScript built-ins, including Set, Map, Date, URL, Promise etc.
• Inspect current values of svelte stores or Observables
• Syntax highlighting for functions and html elements (outer selector) using hljs
• Embed media if string ends with image / audio extension (optional)
• Customizable colors
• Configurable with global options utility as alternative to passing props
• Fixed position panel component