runespect

Svelte 5 DevTools: see and edit the live $state, $derived and $props of every component, in a window next to your app, an overlay inside it, or a Chrome DevTools tab.

runespect does not read Svelte's private internals. A build-time plugin adds instrumentation written in Svelte's public API, which reports to a small agent in the page.

Try it live Read the docs

npm install --save-dev @runespect/vite-plugin

runespect next to a small shop: a value edited in the panel changes the shop

What you get

The component tree and live state, grouped by kind: props, state, derived, stores, class fields, context
Module state from .svelte.ts files, under Modules in the tree
Editing of $state and $bindable values, nested fields included
History: what changed and when, flush by flush
Search, an element picker, and open in editor
A console API for scripts, tests and coding agents