Skill: Use Component Explorer

Writing Fixtures

Fixture files end in .fixture.ts or .fixture.tsx and are auto-discovered by the Vite plugin.

Core Pattern

Every fixture has a render function that receives a container DOM element and a RenderContext:

import { defineFixture } from '@vscode/component-explorer';

export default defineFixture({
  render: (container) => {
    // Render your component into container
    return { dispose: () => { /* cleanup */ } };
  },
});

Render Context

The second argument to render provides:

• signal — AbortSignal for cancellation (check signal.aborted or listen to 'abort')

defineFixture({
  render: async (container, { signal }) => {
    const data = await fetch('/api/data', { signal });
    container.textContent = await data.text();
  },
});

React Fixtures

import { createRoot } from 'react-dom/client';
import { defineFixture } from '@vscode/component-explorer';
import { MyComponent } from './MyComponent';

export default defineFixture({
  render: (container) => {
    const root = createRoot(container);
    root.render(<MyComponent />);
    return { dispose: () => root.unmount() };
  },
});

Fixture Groups

Group related fixtures in a single file:

import { defineFixture, defineFixtureGroup } from '@vscode/component-explorer';

export default defineFixtureGroup({
  Default: defineFixture({ render: (c) => { /* ... */ } }),
  WithError: defineFixture({ render: (c) => { /* ... */ } }),
  Disabled: defineFixture({ render: (c) => { /* ... */ } }),
});

Groups can have metadata (path prefix, labels):

export default defineFixtureGroup({ path: 'Forms/', labels: ['forms'] }, {
  Primary: defineFixture({ /* ... */ }),
  Secondary: defineFixture({ /* ... */ }),
});

Fixture Variants

For closely related variants rendered side-by-side:

import { defineFixture, defineFixtureGroup, defineFixtureVariants } from '@vscode/component-explorer';

export default defineFixtureGroup({
  Sizes: defineFixtureVariants({
    Small: defineFixture({ render: (c) => { /* ... */ } }),
    Medium: defineFixture({ render: (c) => { /* ... */ } }),
    Large: defineFixture({ render: (c) => { /* ... */ } }),
  }),
});

Background

Set background: 'dark' for components designed for dark backgrounds:

defineFixture({
  background: 'dark',
  render: (container) => { /* ... */ },
});

Important Rules

Fixtures Must Be Side-Effect Free

Fixtures must not mutate global state. Each fixture's render function should only modify the provided container element and return a dispose function that fully cleans up. No writes to document.body, global variables, localStorage, shared singletons, or other state outside the container. This ensures fixtures can be rendered in any order, in parallel, and multiple times without interference.

No Global Styles

Do not use global CSS selectors like :root, html, body, or *. Every style must be scoped to a class name (e.g. .app-root, .my-component). Components are rendered in isolation inside the explorer — global styles leak across fixtures and break the isolated rendering model.

App-level CSS files (resets, CSS variables on :root, etc.) are fine for the app itself, but they must not be imported by components or fixture files. Keep app-level styles in separate entry points (e.g. index.css imported only by the app's main.ts) so they are never loaded during fixture rendering. If a component needs shared variables or resets, apply them within the fixture's container element or via the project-local wrapper (see below).

Use a Local Wrapper Instead of defineFixture Directly

…