runespect

Svelte 5 devtools: the component tree and live runes state. Full with the runespect Vite plugin, names only without it.

See what your Svelte 5 components are doing while you build them. runespect adds a tab to Chrome DevTools with the live component tree and runes state of your app, so you can inspect and change values without adding console.log or restarting anything. With the runespect Vite plugin in your app's development build, the tab shows: - the component tree, and every component's props, state, derived values, stores and context - state kept in .svelte.ts modules - editing of $state and $bindable values, nested fields included - the history of what changed, flush by flush, with values before and after - an element picker, highlight on hover, and open in editor Without the plugin, on any development build of a Svelte 5 app, the tab still shows the component tree and where each component is defined, without values.