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.Values are used outside of a panel, you can add values to the panel from those instances.

Persisting State and Configuration

Using the persist-prop, the following properties can be persisted using local/session storage:

• open/closed state
• width/height (when resized)
• position
• opacity
• appearance

Example

<!-- Use default persist settings -->
<Inspect.Panel persist />
<!-- Use default persist settings with tab syncing enabled -->
<Inspect.Panel persistSync />
<!-- Use default persist settings with alternative key -->
<Inspect.Panel persist="todo-app-panel" />
<!-- Use default persist settings tab syncing enabled and alternative key -->
<Inspect.Panel persistSync="todo-app-panel" />
<!-- Use custom persist settings -->
<Inspect.Panel persist={{ key: 'todo-app-panel', storage: 'local', syncTabs: true }} />