SvelteKit Tools

Overview

SvelteKit Tools turns a Dev Preview of your own SvelteKit site into a way to point at what you want changed. Click an element on the running page and Daintree shows the source file and line that rendered it, and the chain of components it sits inside. Then write what should change and send it to a coding agent in the same worktree: one you already have running, or a fresh Claude Code, Codex or Gemini session on your own account.

It is a built-in plugin. It reads your project's files to trace an element to its source, and never writes to them: the agent you hand the request to makes the edit, in its own terminal, where you can watch and review it like any other agent work.

Before you start

• Enable the plugin. SvelteKit Tools ships with Daintree but is off until you turn it on. Open the Plugin Manager, select SvelteKit Tools and switch it on. No restart is needed.
• A SvelteKit app in the worktree. The tool looks for one in the preview's worktree, including apps in a subfolder of a monorepo, and only offers itself where it finds one. If there are several, the drawer asks which one this preview shows.
• A running dev server. Element locations come from the metadata Svelte's development build attaches to the page, so trace the site through Dev Preview running its dev command (vite dev), not a production build.
• An agent CLI to send to. Requests go to an agent session in the same worktree. Without one installed, the drawer says to install an agent CLI, such as Claude Code, Codex or Gemini.

The support check compares the installed Svelte and SvelteKit majors with its tested baseline, Svelte 5 and SvelteKit 2. It reads the versions installed in node_modules rather than trusting the ranges in package.json. Tailwind and Vite versions are included in the agent's context but do not decide this support verdict. On other Svelte or SvelteKit majors it still attempts to trace elements and send requests, and says Toolchain not verified in the drawer's Site source section, naming the package and version. The request carries the same warning so the agent can check the location before relying on it. A missing installation or Yarn Plug'n'Play also gets an explicit unverified result; the plugin does not execute the project's dependency loader to guess versions.

Pick an element

With a Dev Preview of the app running, click the Svelte button in the preview's toolbar (tooltip "Trace an element to its source, or ask an agent about it"). You can also run Toggle SvelteKit Tools from the command palette, which opens a Dev Preview for the worktree first if none is running.

A strip appears under the toolbar with a Browse / Inspect switch. It starts in Inspect, and the strip reads "Click an element to ask an agent about it". In Inspect mode, clicks on the page select elements instead of following links; switch to Browse to use the site normally, then back to pick.

• Click an element to select it. Command ⌘ Control Ctrl Control Ctrl +click adds another element to the selection.
• The arrow keys walk the rendered tree from the selection: up to the parent, down to the first child, left and right through siblings.
• Option-Up Arrow ⌥↑ Alt-Up Arrow Alt+ ↑ Alt-Up Arrow Alt+ ↑ widens the selection to the component that drew the element, then to the component around that. The strip marks a component selection with a Component badge.
• Escape or Deselect clears the selection.

The strip shows where the selection sits in the component chain, and the crumbs in that trail select a component directly. Close the tool from the Close SvelteKit Tools button at the end of the strip, or by clicking the toolbar button again.

View full size: View full size

What the drawer shows

Once something is selected, a drawer opens beside the page. It stays closed while there is nothing to show, so the site keeps its full width while you browse. Fold it away and back with the details button on the strip. Drag its left edge to resize it; in a narrow pane it floats over the page rather than squeezing the site into a different breakpoint.

• The selection: the element's tag (or Component) and label, and the source file and line that rendered it, with Copy path and Open in editor. When an element can't be traced, it says so ("Source unknown"); with several elements selected it gives the count.
• Site source: appears only when there is something to say about the project rather than the element, such as which app this preview shows when the worktree has several, a toolchain outside the tested versions, or a svelte.config.js or route configuration it could not read. It says plainly what it could not read rather than guessing.
• The request composer: described below.

The location is checked against the file as it is now. If the file changes after you select, or the page reloads, the drawer asks you to select again rather than sending a stale location.

Send it to an agent

Under the selection, the composer has three parts:

• About: what the request is about, the element itself or one of the components around it. It follows what you picked, and you can change it here.
• The request: what should change, in your words (placeholder "What should change?"). Suggestions under it, such as Tighten spacing or Fix on mobile for an element and Polish the design or Make responsive for a component, fill in a starting sentence; hover one to read the exact words it adds.
• The destination: Running in this worktree lists agent terminals already open in the preview's worktree. Start a new session offers a new session of each installed agent CLI whose prompt Daintree can detect, Claude, Codex and Gemini first. Agents in other worktrees are never offered, because the source paths in the request would be wrong there.

Press Send or Enter (Shift+Enter for a new line). Daintree writes the request into the agent's own input once it sees the agent waiting at its prompt, so a busy agent gets it when it finishes rather than in the middle of a turn. A row under the composer tracks it: Queued for the agent, then Sent to it. A new session reads Starting until the agent is ready. If Daintree can't confirm the request went in, the row says so and asks you to check the terminal before sending another.

The request carries what the agent needs to find the code without searching: the worktree, the app and its Svelte, SvelteKit and Tailwind versions, the page URL and route, the viewport size, the route's layout and page files, the selected element and its source location, and the components it is rendered inside. For a component request it also asks the agent to keep the change inside that component unless the request needs more, and to say what else it touched. Your draft and the sent requests survive closing the drawer.

Limits

• Server-rendered locations. On a page that was server-rendered, Svelte's dev build can tag an element with a neighbor's location. When the file contradicts what the page reported, the drawer says so instead of guessing: switch to Browse, open the page from a link inside the preview, then select the element again.
• Local pages only. On a page that isn't at a local address (an external site the app linked to, an identity provider) the strip says it has paused because the page isn't at a local address, and picks up again on the next local page.
• DevTools. SvelteKit Tools talks to the page through the same debugging channel DevTools uses. Opening DevTools on the preview can disconnect it ("DevTools may have taken over the preview"); press Reconnect on the strip.
• A worktree is required. A preview with no worktree behind it can be browsed, but the drawer reports Preview only and there is nothing to trace or send.