Histoire — Interactive Component Playground for Vue and Svelte

Introduction

Histoire (French for "story") is a component development environment built on Vite. It lets you render UI components in isolation, write interactive stories with controls, and generate a browsable documentation site — all with near-instant hot reload.

What Histoire Does

• Renders Vue and Svelte components in isolated sandbox iframes with live hot module replacement
• Provides a story file format for documenting component states, variants, and props
• Generates a static documentation site that can be deployed anywhere
• Supports interactive controls for manipulating props, slots, and state in real time
• Offers a grid view for comparing multiple component variants side by side

Architecture Overview

Histoire runs as a Vite dev server with a custom plugin that discovers .story.vue or .story.svelte files in your project. Each story is rendered in an iframe for style isolation. The control panel uses Vite's HMR to reflect changes instantly. For production, it builds a static site with pre-rendered story metadata and lazy-loaded component bundles.

Self-Hosting & Configuration

• Install Histoire and the framework plugin: npm install -D histoire @histoire/plugin-vue
• Add a histoire.config.ts file to configure theme, source directories, and plugins
• Create .story.vue files alongside your components with story markup
• Run npx histoire dev for development and npx histoire build for a static site
• Deploy the built .histoire/dist folder to any static hosting service

Key Features

• Vite-powered: startup in milliseconds with instant hot module replacement
• Interactive controls panel for tweaking props, slots, and events without editing code
• Grid view for visually comparing component variants side by side
• Markdown documentation blocks within story files for inline component docs
• Dark mode toggle and responsive viewport simulation built into the UI

Comparison with Similar Tools

• Storybook — The dominant component workshop; Histoire is lighter and Vite-native, avoiding Storybook's webpack overhead
• Ladle — Minimal React story tool; Histoire targets Vue and Svelte with richer built-in controls
• Vitebook — Another Vite-based alternative; Histoire has more active development and broader plugin support
• Chromatic — Visual regression testing service; Histoire is a local development tool, not a cloud testing platform

FAQ

Q: Does Histoire work with React? A: Histoire focuses on Vue and Svelte. For React, consider Storybook or Ladle. There is experimental React support via community plugins.

Q: How does it compare to Storybook in performance? A: Histoire starts in under a second because it uses Vite natively. Storybook has improved with its Vite builder but still carries more framework overhead.

Q: Can I deploy the generated docs? A: Yes. Run npx histoire build and deploy the output folder to any static hosting provider like Netlify, Vercel, or GitHub Pages.

Q: Does it support visual regression testing? A: Not built-in. You can integrate Percy, Chromatic, or Playwright screenshot tests against the Histoire dev server.

Sources

• https://github.com/histoire-dev/histoire
• https://histoire.dev