Openstory

Storybook for Agents.

Openstory is a drop-in replacement for Storybook. Your existing stories work as-is.

Openstory is in alpha (0.0.x). Any patch may break the public API.

Install

Install Openstory, Vite, and the Vite plugin for your framework:

# React
pnpm add -D openstory vite @vitejs/plugin-react

# Solid
pnpm add -D openstory vite vite-plugin-solid

# Vue
pnpm add -D openstory vite @vitejs/plugin-vue

# Svelte
pnpm add -D openstory vite @sveltejs/vite-plugin-svelte

Then start the dev server:

pnpm exec openstory dev

No vite.config.ts required — Openstory configures Vite in-memory and picks up tsconfig.json path aliases automatically. If you'd rather drive Vite yourself, drop the plugin into your own config:

import { defineConfig } from "vite";
import react from "@vitejs/plugin-react";
import { openstory } from "openstory/plugin";

export default defineConfig({
  plugins: [react(), openstory({ framework: "react" })],
});

(Optional) Add a preview.tsx next to your stories for global decorators, parameters, or providers:

import type { Preview } from "openstory/react";

const preview: Preview = {
  parameters: { layout: "padded" },
  decorators: [],
};

export default preview;

How It Works

Openstory turns your existing CSF 3 story files into a browsable component lab served from a single Vite dev server:

1. Write standard CSF 3 stories (*.stories.{ts,tsx,js,jsx}).
2. Run openstory dev.
3. Browse stories at http://localhost:6006.

Stories use the same shape as Storybook. Swap imports, drop addons:

import type { Meta, StoryObj } from "openstory/react";
import { expect, waitFor } from "openstory/test";

const meta: Meta = {
  title: "Forms/Button",
  component: Button,
  args: { label: "Click me", variant: "primary" },
};
export default meta;

export const Primary: StoryObj<typeof meta> = {
  play: async ({ canvasElement }) => {
    await waitFor(() => {
      expect(canvasElement.querySelector("button")).toBeInTheDocument();
    });
  },
};

The shell UI is React + Tailwind + shadcn. Stories render in an iframe via a postMessage protocol for live args/globals updates and play-status reporting.

Migrate from Storybook

Swap your story imports. meta, decorators, parameters, globalTypes, initialGlobals, and play functions keep the same shape:

- import type { Meta, StoryObj } from "@storybook/react";
- import { expect, waitFor } from "@storybook/test";
+ import type { Meta, StoryObj } from "openstory/react";
+ import { expect, waitFor } from "openstory/test";

preview.tsx keeps the same shape too. No addon dependencies. The shell ships built-in.

CLI

openstory dev        start the dev server
openstory build      write a static deployable site to dist/
openstory preview    serve the built site
openstory generate   generate CSF 3 stories for components
openstory list       print manifest (--json for raw)
openstory inspect    print details for one story (--json for raw)

See packages/openstory/src/types.ts for the full Meta, StoryObj, Preview, Decorator, PlayFunction, and OpenstoryRenderer interfaces.

Resources & Contributing Back

Looking to contribute back? Check out the Contributing Guide.

Find a bug? Head over to our issue tracker and we'll do our best to help. We love pull requests, too!

Start contributing on GitHub

License

Openstory is MIT-licensed open-source software.