Docs

runespect shows the component tree and live runes state of a Svelte 5 app, and lets you edit it. These docs are organised by what you want to do.

Start here #

• New to runespect? Do the Getting started tutorial: from install to editing a value in the panel.
• On SvelteKit? Use with SvelteKit.
• Something does not show up? Start from the symptom in Troubleshoot.
• Want to know how it works? Read Architecture.

The four kinds of docs #

This documentation follows the Diátaxis model: each page is one of four kinds, so it is clear whether you are learning, doing, or looking something up.

Tutorials — learning by doing #

• Getting started — install the plugin, open the panel, and edit a value.

How-to guides — task-focused #

• Use with SvelteKit
• Choose where to run it
• Open the panel window
• Add the in-page overlay
• Use the browser extension
• Troubleshoot — from what you see to what to read.

Reference — facts #

• The panel — what each part of the panel does.
• Options — runespectPreprocess() and runespect().
• Console API — window.__runespect, for a script, a test or a coding agent.
• Event log — what each hop records, and the shape of an event.
• Protocol — the messages between a page and a panel, and how they travel.
• Packages — the packages, what they need, and how they fit.

Explanation — understanding #

• Architecture — from a component to a row in the panel.
• What the panel can show — where the panel's data comes from, and what each source can show.
• What it costs — the time the instrumentation adds per flush.
• Vocabulary — the words for the parts, and the names in code that use them.