Storybook View for VSCode

Preview React components with Storybook directly in VSCode.

Features

• One-click preview from editor toolbar
• Auto-start/stop Storybook server
• Hot Module Replacement (HMR)
• Access all Storybook features and addons

Quick Start

Requires Storybook in your project:

npx storybook@latest init

1. Open a .stories.tsx or .stories.jsx file
2. Click the eye icon in the editor toolbar
3. Preview opens with all component stories

Creating Stories

// Button.stories.tsx
import type { Meta, StoryObj } from "@storybook/react";
import { Button } from "./Button";

const meta = {
  title: "Components/Button",
  component: Button,
  tags: ["autodocs"]
} satisfies Meta<typeof Button>;

export default meta;
type Story = StoryObj<typeof meta>;

export const Primary: Story = {
  args: { variant: "primary", children: "Click me" }
};

Commands

• Start Storybook Server - Manually start Storybook
• Stop Storybook Server - Stop the server
• Open Storybook in Browser - Open in external browser

Configuration

{
  "storybookview.storybookPath": "",  // Path to Storybook (leave empty for workspace root)
  "storybookview.port": 6006,         // Storybook server port
  "storybookview.autoRefresh": true   // Auto-refresh on file changes
}

Troubleshooting

Storybook won't start:

• Verify Storybook works: npm run storybook
• Check port 6006 is available

Component not showing:

• Ensure .stories.tsx file exists
• Restart Storybook via Command Palette

Requirements

• VSCode 1.74.0+
• Node.js 16+
• Storybook 7+

License

MIT © Seth Carney