Svelte Inspect Value

• Demo and documentation
• Svelte Playground

Description

A collection of ambitious value inspector components in the veins of svelte-json-tree and react-json-view.

It aims to be a valuable devtool for monitoring state and debugging.

Installation and use

Install svelte-inspect-value with your favourite package manager.

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

  let name = $state('')
  let age = $state(42)
</script>

<Inspect value={{ name, age }} />
<!-- or -->
<Inspect.Values {name} {age} />

Features

• view state in a tree-view
• aims to support most JavaScript built-ins with specialized views displaying information relevant to to developers, including:
  • Map and Set
  • Promise
  • Date
  • URL and URLSearchParams
  • TypedArray
  • HTML elements
  • Function
  • Class
  • Svelte stores and Observables
• Fixed position drawer / panel component
• customizable theming
• syntax highlighting for functions and html elements using hljs
• embed media if a string value is a link / path ending with an embeddable image or audio file extension (disabled by default)

Acknowledgements

• the "drak"-theme is based on the dracula color scheme
• the "stereo"-theme is based on the monokai color scheme