Backstitch

Backstitch is a VS Code extension that turns your running dev server into an interactive editing surface. Pick a DOM element inside the live iframe, tweak its styles visually, and hand the structured diff to a coding agent that stitches the changes back into the source files of your repo.

What is Backstitch?

Backstitch embeds your local dev server (Storybook, Vite, Next.js, anything that serves HTML) inside a VS Code webview and overlays a picker on top of it. Click any element to:

• Inspect its computed styles, design tokens, and layout (box model, flex, grid).
• Edit styles inline with a structured editor — colors, spacing, typography, layout — and see changes live.
• Track the diff of every change you make and review them in a side panel before committing.

When you are happy with the result, Backstitch hands the structured diff to a coding agent to apply to source.

How the agent hand-off works

Backstitch hands the visual changes you made to a Copilot coding agent — it does not write CSS itself. When you click Send to agent, Backstitch:

1. Collects the selection (component, element, story) and the list of style operations you applied.
2. Builds a structured prompt that describes what you changed and which source file is involved.
3. Opens the prompt in Copilot Chat targeting a custom unframed-agent if one is configured in the workspace, otherwise the default agent.
4. Watches the workspace for the first source-file write that follows, then refreshes the preview so you can see the agent's edit applied in place.

This lets you use the visual editor to describe intent — "this button should use the brand-primary token and have more breathing room" — and let the agent decide how to express that change idiomatically in the actual source (component props, design tokens, CSS modules, Tailwind classes, etc.).

Features

• Backstitch panel — embed any local dev server (Storybook, Vite, Next.js, etc.) in a VS Code webview. Click any element to inspect it, edit styles inline, and hand the structured diff to a coding agent to apply.
• Storybook sidebar — when the workspace is a Storybook project, a "Backstitch — Stories" tree appears in the Explorer. Click a story to open it directly in the Tweaker.
• Agent hand-off — send your visual edits to Copilot Chat as a structured prompt and let an agent apply them to source.

The sidebar appears only when Storybook is detected (a .storybook/ directory, any *.stories.* file, or storybook in a package.json). Outside of Storybook projects, use Backstitch: Open from the command palette and supply the URL of any running dev server.

Commands

Settings

Try the demo

A self-contained Storybook lives in demo/ with five stories that each highlight a different Backstitch capability (token swap, flex layout, multi-element diff, grid editor, component insert). To run it:

npm install
npm run compile
npm run demo:install
npm run demo

Then in VS Code press F5 and pick Run Extension (Demo Workspace). See demo/README.md for the full walkthrough.

License

MIT