Svelte <Inspect {value} />

Examples

JSON

Inspect works well for basic object and array-values aka "json".
If needed, strings that start with '[' or '{' can be parsed. Try it:

Multi-line strings

Expandable view for multi-line strings

Map & Set

Inspect handles map and set instances.

Promises

example
<script>
  import { Inspect } from 'svelte-inspect-value'

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

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

HTML Elements

element view
  • 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
undefined

Classes

Display "static" properties of classes

Functions

Display bodies of functions with hljs syntax highlighting.

Symbol keys

Object properties where keys are symbols are displayed. these are skipped by JSON.stringify() or Object.keys()
This is achieved using Reflect.ownKeys

example
...

URLs

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.

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

  let value = $state({
    value: 10,
    multiplier: 4.2,
    get current() { return this.count },
    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} />

Iterators & Generators

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

example
<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 value = $state({
    fibonacci: fibonacci(),
    array: [1, 2, 3, 4].values(),
    set: new Set([12, 34, 45]).values(),
    map: new Map<unknown, unknown>([
      [0, 0],
      [{ id: 123 }, 1],
      [[1, 2, 3], 2],
    ]).entries(),
    stringIterator: 'abdcdefghijklmnopqrstuvwxyz'[Symbol.iterator](),
  })
</script>

<Inspect {value} />

URL-strings and image/audio links

If a string is a url and ends with a known file extension for image or audio,
embed the media as an img or audio-tag. This is disabled by default.

Note: This example has the option set to true and won't be affected by global options

Sprite and audio courtesy of pokeapi.co

Other

Other types handled includes Error, Date, regexp, and just about any object with enumerable properties.
This example also demonstrates the entry indicators flashing when their values are updated (enabled / disabled with the flashOnUpdate-prop)

global options