Examples

Basics

Inspect works well for basic object and array-values aka “JSON”.

Actual JSON strings can be parsed by setting the parseJson option.

reset

demo

:

obj

11 entries

id

:

undefined

firstName

:

str 'Bob'

3 chars

lastName

:

str 'Alice'

5 chars

email

:

str 'bob@alice.lol'

13 chars

introduction

:

str 'The name is Alice.\n\n\t\tBob Alice.'

32 chars

birthDate

:

Date 'Thu, 01 Jan 1970 00:00:00 GMT'

website

:

URL 'https://alice.bob/?ref=abcd#about'

age

:

num -42

emailVerified

:

bool true

interests

:

arr

[

'radio'

,

'tv'

,

'internet'

,… ]

5 items

jsonString

:

str '[{ \"message\": \"i can be parsed\" }]'

34 chars

Promises

The state and eventual result of promises are displayed.

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

  const promises = {
    neverResolve: new Promise(() => {}),
    resolveInAFew: new Promise((resolve) => {
      setTimeout(() => {
        resolve('yep')
      }, 2000)
    }),
    rejectsInAFew: new Promise((_, reject) => {
      setTimeout(() => {
        reject('nope')
      }, 3500)
    }),
  }
</script>

<Inspect values={promises} />

Stores

Objects with a subscribe function are recognized as stores or rxjs observables. The stores will be subscribed to and the latest emitted value will be displayed.

If the store does not return a valid unsubscriber or the subscribe-function throws an error the store will be displayed as a regular object using the default object-view.

This can be enabled / disabled with the stores option.

writableStore

:

writable

(

'i am the store value'

)

4 entries

test

:

writable

(

'i am the\n store value'

)

4 entries

readableStore

:

readable

(

{

a

:

obj

}

)

2 entries

customStore

:

obj

{

set

:

fn

,

update

:

fn

,

subscribe

:

fn

,… }

invalid store

4 entries

fakeStore

:

obj

{

subscribe

:

fn

}

invalid store

1 entries

clicksObservable

:

undefined

Classes

Display “static” properties of classes.

class

:

class Greeter

4 entries

static staticProperty

:

str 'Hello'

5 chars

length

:

num 1

name

:

str 'Greeter'

7 chars

prototype

:

Greeter

{

greet

:

fn

,

constructor

:

class Greeter

}

2 entries

classInstance

:

Greeter

3 entries

name

:

str 'name'

4 chars

greet

:

fn

constructor

:

class Greeter

{

staticProperty

:

'Hello'

,

length

:

1

,

name

:

'Greeter'

,… }

4 entries

Functions

Function bodies are highlighted with hljs.

arrowFunction

:

fn

asyncFn

:

async fn

someFunction

:

fn

generator

:

fn*

asyncGenerator

:

async fn*

HTML Elements

testid width

• 0
• 1
• 2
• 3
• 4
• 5
• 6
• 7
• 8
• 9
• 10
• 11
• 12
• 13
• 14
• 15
• 16
• 17
• 18
• 19
• 20
• 21
• 22
• 23
• 24
• 25
• 26
• 27
• 28
• 29
• 30
• 31
• 32
• 33
• 34
• 35
• 36
• 37
• 38
• 39
• 40
• 41
• 42
• 43
• 44
• 45
• 46
• 47
• 48
• 49
• 50
• 51
• 52
• 53
• 54
• 55
• 56
• 57
• 58
• 59
• 60
• 61
• 62
• 63
• 64
• 65
• 66
• 67
• 68
• 69
• 70
• 71
• 72
• 73
• 74
• 75
• 76
• 77
• 78
• 79
• 80
• 81
• 82
• 83
• 84
• 85
• 86
• 87
• 88
• 89
• 90
• 91
• 92
• 93
• 94
• 95
• 96
• 97
• 98
• 99

• 0
• 1
• 2
• 3
• 4
• 5
• 6
• 7
• 8
• 9
• 10
• 11
• 12
• 13
• 14
• 15
• 16
• 17
• 18
• 19
• 20
• 21
• 22
• 23
• 24
• 25
• 26
• 27
• 28
• 29
• 30
• 31
• 32
• 33
• 34
• 35
• 36
• 37
• 38
• 39
• 40
• 41
• 42
• 43
• 44
• 45
• 46
• 47
• 48
• 49
• 50
• 51
• 52
• 53
• 54
• 55
• 56
• 57
• 58
• 59
• 60
• 61
• 62
• 63
• 64
• 65
• 66
• 67
• 68
• 69
• 70
• 71
• 72
• 73
• 74
• 75
• 76
• 77
• 78
• 79
• 80
• 81
• 82
• 83
• 84
• 85
• 86
• 87
• 88
• 89
• 90
• 91
• 92
• 93
• 94
• 95
• 96
• 97
• 98
• 99

htmlElement

:

undefined

Element View

simple full

Getters and Setters

Getters and setters render as interactive nodes as to avoid executing potential side effects until they are manually called.

Setters can be called with valid JSON input.

<script lang="ts">
  import Inspect from 'svelte-inspect-value'

  let value = $state({
    value: 10,
    multiplier: 4.2,
    get current() { return this.value },
    set current(value) {
      if (typeof value !== 'number') throw 'not a number'
      this.value = value
    },
    get double() { return this.value * 2 },
    set currentMultiplier(value: number) { this.multiplier = value },
    get multiplied() {
      return this.value * this.multiplier
    },
  })
</script>

<Inspect {value} name="gettersAndSetters" />

gettersAndSetters

:

obj

12 entries

name

:

obj

{

first

:

'Ringo'

,

last

:

'Starr'

,

get full

,… }

4 entries

value

:

num 10

multiplier

:

num 4.2

lastChecked

:

str ''

empty

readValues

:

arr

[

]

empty

set|get current

:

set get

get double

:

get

get multiplied

:

get

get lastReadValue

:

get

get aPromise

:

get

set currentMultiplier

:

set

set errorSetter

:

set

Iterators and Generators

Iterators have to be iterated manually since doing so directly affects the source iterator.

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

  function* fibonacci() {
    let current = 1;
    let next = 1;
    while (true) {
      yield current;
      [current, next] = [next, current + next];
    }
  }

  let iterators = {
    fibonacci: fibonacci(),
    array: [1, 2, 3, 4].values(),
    set: new Set([12, 34, 45]).values(),
    map: new Map([
      [0, 0],
      [{ id: 123 }, 1],
      [[1, 2, 3], 2],
    ]).entries(),
    stringIterator: 'abdcdefghijklmnopqrstuvwxyz'[Symbol.iterator](),
  };
</script>

<Inspect values={iterators} />

fibonacci

:

generator next 100

[

]

suspensefulFibonacci

:

asyncgenerator next 100

[

]

array

:

arrayiterator next 100

[

]

set

:

setiterator next 100

[

]

map

:

mapiterator next 100

[

]

stringIterator

:

stringiterator next 100

[

]

Media Embeds and Link Strings

If a string looks like a URL or path, it will result in a clickable link.

If a URL-like string ends with an image or sound extension, Inspect will embed the media in the string node’s expandable view. This is disabled by default. Enable by setting the embedMedia option.

squirtle

:

obj

7 entries

name

:

str 'squirtle'

8 chars

type

:

str 'water'

5 chars

attacks

:

arr

2 items

0

:

str 'tackle'

6 chars

1

:

str 'bubble'

6 chars

sprite

:

str 'data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAGAAAABgBAMAAAAQtmoLAAAAMFBMVEUAAAAQEBApc4NanKRiKQCDKQCLxc205u69agDNeynVlFLVzc3mrFr/1Wr/5pz///8R5ETqAAAAAXRSTlMAQObYZgAAAb1JREFUWMPtlL9KxEAQxi/JC2QvnihaeAkXCwtNBheus7eUPIBZXLGy82ohnZVi4cIl76A2h1ZqJaz2Bxd7C1PoCzgr9jcpBIv9uoX5sfPnm+l0rKysrKz+pwDCdvGjkWxDeBgv5RodWB+dIJCT491D80GLL1wMFm2ACIM5cJlSgYH5YeVWJFRgk0u5z26ADAwM0PukA31M6bgF4JqmHvS+yIBzwjEnAfSUumZqEIHvhZRRbG05iyIMB3uwxkmdjVOW9JTKIOEy8glOxWyC7SyDtCtzCmCMtB9hxcu3kjZrdJJIGVvVsaT1yQWAcV3rRy7AJ3U1hGFZT9UFprWDL8KqsuG7GtfTCJaKTigFYRbVx2vzMX1gk8LFmRPWomoQ0Hp3UkS03f4BSgROgeexmF+6equaaa3PJgsAcU4AqmelVT27uisg5ZLQ3Kqpmlk5u7w/hYTicq80NTw/pRtEgB/VL9glvDPXAMH8jDx5pJXWT+gpY0JGMTjWrB8RCCjxxuDbWqsLBPqMYj8HbZppfc4l9QwEmHnGWES+GxjJfjnaIRNxYlJ3cJNoG8ScnzhHLPb9Thv9glZWVlZWf69vfHii3k2wjfUAAAAASUVORK5CYII='

790 chars

cry

:

str '/_astro/squirtle_cry.CeGl-Bpc.ogg'

33 chars

attributes

:

obj

3 entries

speed

:

num 20

strength

:

num 42

defense

:

num 15

attack

:

fn

Sprite and audio courtesy of pokeapi.co

Other

Other types with specialized views includes Error, Date, RegExp, Map and Set.

Default behaviour for any value not recognized by the component is to find the constructor name and list any enumerable values.

0

:

Date 'Sat, 25 Apr 2026 11:34:06 GMT'

1

:

Map

{

one

=>

1

,

two

=>

2

,

three

=>

3

}

3 entries

2

:

Set

{

'one'

,

'two'

,

'three'

}

3 entries

3

:

regex /^[a-zA-Z0-9._%+-]+@[a-zA-Z0-9.-]+\\.[a-zA-Z]{2,}$/

4

:

URL 'https://inspect.eirik.space/guides/examples?q=query#basics'

5

:

URLSearch

{

a

:

arr

,

b

:

arr

,

c

:

'5'

}

size: 6

6

:

obj

{

typedArrays

:

arr

}

1 entries

7

:

error 'Error: error view'

3 entries