Skip to content
On this page

Getting started with Histoire


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 »


Histoire is an Open-Source project supported by our sponsors - thank you!

See our sponsors »


Install the histoire and @histoire/plugin-svelte packages into your project:

pnpm i -D histoire @histoire/plugin-svelte
# OR
npm i -D histoire @histoire/plugin-svelte
# OR
yarn add -D histoire @histoire/plugin-svelte

Create an histoire.config.js or histoire.config.ts file in your project root to enable the Svelte plugin:

import { defineConfig } from 'histoire'
import { HstSvelte } from '@histoire/plugin-svelte'

export default defineConfig({
  plugins: [

Command Line Interface

Histoire provides two commands:

  • histoire dev: starts a development server with hot-reload
  • histoire build: builds the app for production
  • histoire preview: starts an HTTP server that serves the built app

You can add these to your package.json like this:

  "scripts": {
    "story:dev": "histoire dev",
    "story:build": "histoire build",
    "story:preview": "histoire preview"

And then run them with npm run story:dev or npm run story:build.

You can specify additional CLI options like --port. For a full list of CLI options, run npx histoire --help in your project.


If you have questions or need help, reach out to the community at Discord and GitHub Discussions.

Released under the MIT License.