Getting started with Histoire
Overview
Histoire is the French word for "Story" and is pronounced
/is.twaʁ/, like "is·twar"
Histoire is a tool to generate stories applications (or "books").
Learn more about Histoire here »
Try it in a live editor 
Sponsors
Histoire is an Open-Source project supported by our sponsors - thank you!
Supported frameworks
Titles marked 1.0-beta.2+ describe unreleased features for the next beta. Use continuous releases to try them before publication.
Use Node.js 22 or later and Vite 7 or 8. Framework tooling can impose a higher Node.js requirement.
| Framework | Version | Support* | Auto-CodeGen* | Auto-Docs* |
|---|---|---|---|---|
| Vue → | 3.5.26+ | ✅ | ✅ | ✅ |
| Svelte → | 4 / 5 | ✅ | - | 🏗️ |
| Solid | - | - | - | - |
| Angular | - | - | - | - |
| React → | 18 / 19 | ✅ | - | - |
*Support means the following is available:
- Collect and render stories
- Render controls pane content with state sync
- Builtin controls wrappers
- Static source
*Auto-CodeGen: Generates copiable source code dynamically from the current story state. Generally requires a Virtual DOM.
*Auto-Docs: Generates documentation and controls automatically by analyzing the imported components.
Nuxt 3 / 4 uses @histoire/plugin-nuxt alongside the Vue plugin. SvelteKit 2 / 3 uses the Svelte plugin.
Vite 8 support 1.0-beta.2+
Vite 8 is supported alongside Vite 7. Use a framework Vite plugin compatible with your project's Vite version.
Explore the workbench 1.0-beta.2+
Open the demo to browse stories, select variants, edit props, read docs and inspect generated source. The demo is a static book built with this documentation. Tests, comments, canvas screenshots and MCP activity require a development server.
Start with workbench layout, navigation and search, the inspector, and props matrix.
Community
If you have questions or need help, reach out to the community at Discord and GitHub Discussions.