Development error and server-function tooling for Solid Start mode.
@solidjs/start-devtools provides the toolbar used by the Solid Vite plugin in development.
- Runtime error inspection with source-mapped stack frames.
- Server-function request and response inspection.
- A reactivity graph of the live signals, memos and effects in the app.
- An ownership tree of the components and scopes the app created.
pnpm add @solidjs/start-devtools@nextThe toolbar is a dock at the bottom of the page. Closed, it is a small grip at the bottom center. Click it, drag it up, or press Alt+Shift+D to open it. Drag its top edge to change its height. It remembers whether it was open, its tab and its height across reloads, and an error opens it on the Errors tab.
The Vite plugin mounts it automatically. Integrations can use the package directly:
import { DevToolbar } from '@solidjs/start-devtools';
<DevToolbar>
<App />
</DevToolbar>;For custom server and client entries, render DevToolbar around the app in a shared
document or root component. In development, the package selects the browser or SSR build
for the current environment. In production, it becomes a children-only passthrough and
does not include the toolbar.
The same import is safe in development and production entries.
Two demo apps live in examples.
examples/demois a small orders dashboard that exercises every panel.examples/exploreris a file explorer whose component tree grows as you open folders.
pnpm demo
pnpm demo:explorerThe graph panel maps the running reactive graph. Signals, memos and effects are nodes, and an edge points from a source to the computation that reads it. Hover a node for its value, state and edge counts. Select one to dim the rest of the graph, list what it reads and what reads it, and inspect its value as an expandable tree.
The panel reads the graph through the development hooks in solid-js, so it is empty in a
production build of the runtime. It only watches while it is open.
The ownership panel shows the app as a tree of owners.
Component mode lists components only. The scopes between them are folded into the component above, so a component shows every signal, memo and effect created inside it. Owner mode shows every owner instead, including roots, memos and effects.
Selecting a row lists its prop names, the signals it holds with their values, the scopes folded into it, its children, and the ancestry it was created under. Every frame of the ancestry is clickable, so you can walk back up the tree. Prop values are getters, so the panel lists their names and never reads them.
A component also shows where it is declared. The location comes from the hot reload
transform, which @solidjs/vite-plugin runs in development, so it is there without any
extra setup. Clicking it asks the dev server to open the file in your editor.
The panel reads the tree through the development hooks in solid-js, so it is empty in a
production build of the runtime. It only watches while it is open.
Each panel has a copy button that puts a Markdown report on the clipboard. Paste it into an agent such as Claude Code, so it sees what the panel shows.
- Errors. The message, the stack mapped to the original source, and the lines of source around the first frames in the app. Runs of frames in dependencies are folded into one line.
- Server functions. The function, the status and time, and the headers and body of the request and the response. A streamed body is read for half a second.
- Ownership. The component with its declared location, owner path, prop names, signals, memos, effects and children.
- Reactivity. The signal, memo or effect with its state and value, what it reads, and what reads it.
Values with sensitive names are replaced with [redacted] before the report is copied.
This covers headers such as cookie and authorization, and keys, fields and signals
whose names contain words such as password, token, secret or session. Check a
report before you share it outside your machine, since a secret under another name is
copied as is.
For more inspection tools, see Solid Devtools.