Skip to content

ampled/svelte-inspect-value

Folders and files

NameName
Last commit message
Last commit date

Latest commit

8a2a621 · Apr 27, 2025
Feb 17, 2025
Apr 20, 2025
Apr 26, 2025
Apr 27, 2025
Feb 14, 2025
Apr 21, 2025
Dec 20, 2024
Dec 1, 2024
Dec 1, 2024
Dec 29, 2024
Jan 10, 2025
Apr 26, 2025
Dec 29, 2024
Apr 22, 2025
Apr 25, 2025
Apr 26, 2025
Feb 17, 2025
Apr 25, 2025
Feb 14, 2025
Apr 26, 2025
Jan 8, 2025
Apr 20, 2025
Feb 14, 2025

Repository files navigation

Svelte Inspect Value

NPM Version GitHub Repo stars

inspect screenshot

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