# Histoire: a Vite-powered component playground for Vue, Svelte and Nuxt > Histoire builds isolated, hot-reloading playgrounds for components and generates source examples from them. This review covers what it does, how to install it, and where it stops being the right tool. **histoire-dev/histoire** — ⚡ Fast and beautiful interactive component playgrounds, powered by Vite - Repository: https://github.com/histoire-dev/histoire - Website: https://histoire.dev - Stars: 3,590 · Forks: 212 - Language: TypeScript - License: MIT - Published: 2026-09-23 · Updated: 2026-09-23 · Language: en - Canonical page: https://hysenlabs.com/projects/histoire-dev-histoire ## What Histoire solves, and who it is aimed at A component that only renders correctly inside a full page is hard to inspect. Histoire addresses that by giving components their own playground: stories and variants are rendered in isolation, with Vite providing fast development and instant HMR. The README lists the intended outcomes directly: build and visually test components in isolation, document them with stories and variants, generate source code examples automatically, and present them in a customizable interface. The audience is narrow on purpose. The repository's topics are vuejs, sveltejs and vitejs, and the example directories cover vue3, vue3-vuetify, vue3-themed, vue3-screenshot, vue3-percy, svelte4, sveltekit and nuxt4. If your components are not in one of those ecosystems, the project is not aimed at you. If they are, Histoire sits between your component source and your documentation, and the value is that both are driven by the same Vite pipeline rather than by a separate bundler. ## How stories, variants and source generation fit together The mechanism visible in the repository is a Vite plugin plus a story file convention. Histoire runs as a Vite-powered dev server, so the same transform pipeline that builds your app also renders each story in isolation; that is why the README attributes the speed to Vite and why HMR is described as instant. A story declares a component and the variants you want to see. Each variant is a state of that component, and the interface renders them side by side so you can compare states without wiring a host page. The part that distinguishes Histoire from a plain preview server is source generation. The README states that source code examples are generated automatically. In practice that means the code shown next to a rendered variant is derived from the story rather than pasted by hand, so a changed default value does not leave stale documentation behind. The repository layout supports this reading: packages/ holds the implementation, docs/ is a VitePress site, and examples/ holds runnable integrations for each supported framework. The examples are also where the project's own test scripts point, which is a useful signal: the integrations are exercised, not decorative. ## Installing Histoire and opening a first story The repository is a pnpm workspace and its package.json pins packageManager to pnpm@10.33.0 and engines.node to >=22, so Node 22 or newer is the floor before anything else. The root scripts show the developer workflow: pnpm run build builds every package, pnpm run test runs the package tests, and pnpm run docs:dev serves the VitePress documentation locally. ```bash pnpm run docs:dev ``` That command starts the documentation site from the docs/ directory, which is where the project keeps its setup instructions. The README itself does not contain installation steps; it points to https://histoire.dev for the documentation, and the repository ships that documentation as a VitePress site rather than duplicating it in the README. For a working integration, the repository's examples are the concrete reference. Each example directory is a self-contained project, and the root test scripts run them through pnpm with workspace filtering. ```bash pnpm run test:examples ``` This runs the test:examples script across the vue examples, one workspace at a time. It is the closest thing in the repository to a verified, end-to-end usage path, and it is worth reading an example's package.json before adapting it, because the examples are pinned to the versions the project tests against. ## The beta version line is the real constraint The most important limitation is not technical. The newest release listed is v1.0.0-beta.1, published on 2026-01-07, and the monorepo package.json still declares version 1.0.0-beta.1. Before that came v1.0.0-alpha.5 and v1.0.0-alpha.4. A project whose latest published artifact is a beta has not promised API stability, and the README does not document a deprecation policy, a migration guide, or a rollback path. The README also does not document what changes between alpha and beta releases; that information lives in CHANGELOG.md, which is present at the repository root. The second constraint is scope. Histoire is tied to Vite and to the frameworks in its examples. A team on a different bundler cannot reuse the plugin, and a team whose components are framework-agnostic web components has no example to follow here. The README's feature list is also silent on accessibility auditing, visual regression baselines, and CI reporting. The vue3-percy and vue3-screenshot examples suggest those workflows are possible, but the README does not describe them, so treat them as integrations to investigate rather than documented features. ## Histoire compared with Storybook The obvious alternative is Storybook, and the difference is architectural rather than cosmetic. Histoire is built on Vite and inherits its config, its HMR and its build behaviour; the README's first claim is that development is fast because of Vite. Storybook maintains its own builder layer and supports a much wider set of frameworks, which is the trade: broader reach and a larger addon ecosystem in exchange for a second build system to configure alongside your app's. For a Vue, Svelte or Nuxt team already on Vite, Histoire removes that duplication. For a team with components in several frameworks, or one that depends on a specific Storybook addon, the narrower scope is a reason to stay where you are. Histoire also generates source examples as a stated feature, which is a documentation-first choice; teams that need a mature plugin surface for testing and publishing should weigh that against the beta release line. ## Maintenance, releases and the MIT licence The repository is not archived, and the last push was on 2026-08-05. That is recent enough that the codebase is being touched, but it does not by itself tell you whether the beta line is close to a stable release. The release history shows a cadence of roughly one to two months between alpha and beta tags through late 2025 and early 2026, and the README points to a nightly build service for installing builds from any commit on main or from any pull request. Nightly builds are useful for testing a fix; they are not a substitute for a tagged release in production documentation tooling. Upgrade cost is dominated by the beta status. With no documented migration path in the README, an upgrade means reading CHANGELOG.md and the release notes for each tag. The repository is a pnpm workspace, so contributing or building from source means installing pnpm and running pnpm run build and pnpm run test at the root. Histoire is MIT licensed, which permits commercial and private use and modification; the repository ships a LICENSE file at its root. This is a description of the licence identifier, not legal advice, and teams with specific obligations should read the LICENSE file and CHANGELOG.md themselves. ## Conclusion Adopt Histoire if your components are Vue, Svelte, SvelteKit or Nuxt and you want the playground to share Vite's config, HMR and build pipeline, plus auto-generated source examples for documentation. Do not adopt it if you need a stable release line: the newest release listed is v1.0.0-beta.1 from 2026-01-07, and the repository's own package.json still carries version 1.0.0-beta.1. Before committing, verify that your framework version appears among the tested workflows (vue3, svelte4, sveltekit, nuxt4), that your Node runtime satisfies engines.node >=22, and that the MIT licence terms fit how you intend to ship the generated examples. ## FAQ ### What is Histoire? Histoire is a Vite-powered tool for building interactive component playgrounds. The README describes it as fast and beautiful interactive component playgrounds, with features for building and visually testing components in isolation, documenting them with stories and variants, and generating source code examples automatically. ### How does Histoire compare with Storybook? Histoire is built on Vite and inherits its config, HMR and build pipeline, while Storybook maintains its own builder layer and supports a wider set of frameworks. The trade is a narrower framework scope in exchange for not configuring a second build system alongside your Vite app. ### What is a Histoire alternative? Storybook is the alternative named in this article, and the difference is architectural: Histoire runs on Vite and inherits its config and HMR, whereas Storybook supports more frameworks through its own builder layer. Which one fits depends on whether your components are Vue, Svelte or Nuxt and already on Vite. ### Which frameworks does Histoire support? The repository topics list vuejs, sveltejs and vitejs, and the examples directory contains vue3, vue3-vuetify, vue3-themed, vue3-screenshot, vue3-percy, svelte4, sveltekit and nuxt4 projects. The CI workflows named in the README cover vue3, svelte4, sveltekit and nuxt4. ### What Node version does Histoire require? The monorepo package.json sets engines.node to >=22, so Node 22 or newer is the floor for building the repository. The README does not state a separate minimum for consuming the published packages. ## Sources - [histoire-dev/histoire on GitHub](https://github.com/histoire-dev/histoire) - [License: MIT](https://github.com/histoire-dev/histoire/blob/main/LICENSE) - [Project website](https://histoire.dev) - [README](https://github.com/histoire-dev/histoire/blob/main/README.md) - [Releases](https://github.com/histoire-dev/histoire/releases) --- Hysen Labs editorial analysis, written from the project's own repository and release notes. Cite the canonical page: https://hysenlabs.com/projects/histoire-dev-histoire