Svelte <Inspect {value} />

Inspect.Panel

Inspect.Panel is a fixed-position version of Inspect.
It can be resized, repositioned, customized and takes all the same props as Inspect does and a few extra ones.

Demo

<script lang="ts">
  import Inspect, {addtoPanel} from 'svelte-inspect-value'
  import MyTodoApp from './TodoApp.svelte'

  const todos = [
    // ...
    {
      id: 3,
      description: 'feed the turtle'
      done: true
    },
    //...
  ]

  let todo = $derived(todos.filter((t) => !t.done))
  let done = $derived(todos.filter((t) => t.done))

  addToPanel('isTurtleFed', () => todos[2].done)
  addToPanel('allTodos', () => todos)
</script>

<h3>Demo</h3>

<Inspect.Panel values={{ todo, done }} heading="todos" />
<MyTodoApp {todos} />

Inspect.Panel will also render any children passed to it, a nice place to put any extra debugging tools or information. In fact, the navigation menu on this website is an instance of Inspect.Panel simply used for it's capability to render children.

Global values

In addition to using the value or values-props, panels can also receive "global" values with the utility function addToPanel (experimental.)
Also, if any instances of Inspect / Inspect.Panel are used outside of a panel, you can add values to the panel from those instances.