@onlook/storybook-plugin

Vite plugin for Storybook that adds component location tracking, E2B sandbox HMR support, and screenshot capture APIs.

Installation

npm install @onlook/storybook-plugin

Usage

Add to your .storybook/main.ts:

import { storybookOnlookPlugin } from '@onlook/storybook-plugin';

export default {
  // ... your config
  async viteFinal(config) {
    const { mergeConfig } = await import('vite');
    return mergeConfig(config, {
      plugins: [storybookOnlookPlugin()],
    });
  },
};

Features

Component Location Tracking

Adds data-component-file attributes to React components with their source file paths, enabling click-to-source functionality.

E2B Sandbox HMR

Configures Vite HMR for E2B sandboxes (WSS protocol, port 443 routing).

Screenshot API

• GET /api/capture-screenshot?storyId=<id>&theme=light|dark&width=800&height=600 - Capture on-demand screenshots
• GET /screenshots/<path> - Serve cached screenshots
• GET /onbook-index.json - Extended Storybook index with bounding box metadata

CORS

Pre-configured for https://app.onlook.ai, localhost:3000, and localhost:6006.

Options

storybookOnlookPlugin({
  port: 6006,              // Storybook port (default: 6006)
  allowedOrigins: [],      // Additional CORS origins
});

CLI

Generate screenshots for all stories:

# With Storybook already running
npx onlook-storybook generate-screenshots

# Specify a custom Storybook directory
npx onlook-storybook generate-screenshots -d ./path/to/storybook

Screenshots are saved to .storybook-cache/screenshots/.

CI/Chromatic

The plugin auto-disables when CHROMATIC or CI environment variables are set.

License

MIT