Skip to content
On this page

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 »

Sponsors

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

See our sponsors »

Installation

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

shell
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:

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

export default defineConfig({
  plugins: [
    HstSvelte(),
  ],
})

Command Line Interface

Histoire provides the following 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:

json
{
  "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.

Configuration

Learn more about configuring Histoire here.

Community

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

Released under the MIT License.