Pick DOM elements inside a live dev-server iframe in VS Code, tweak their styles, and stitch the changes back to source.
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 round-trip the changes.
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.
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
Command
When
Backstitch: Open
Always — prompts for a URL
Backstitch: Open Story
When Storybook is detected
Backstitch: Refresh Stories
When Storybook is detected
Backstitch: Open Source File
Sidebar context menu
Settings
Setting
Default
Description
backstitch.storybookUrl
""
Base URL of the Storybook dev server. Empty = auto-detect the port.
backstitch.targetUrl
""
Default URL used by the Open command when no Storybook is detected.
Development
npm install
npm run compile # one-off build
npm run watch # extension TS watch
npm run watch:media # webview TS watch
Press F5 in VS Code to launch an Extension Development Host.
