Histoire

⚠️ Histoire is in Early Access: the repository is currently only available to our sponsors.

Fast and beautiful interactive component playgrounds

⚡️ Lightning fast development and instant HMR thanks to Vite
👓 Build and visually test your components in isolation
📚 Document your components with stories and variants
📝 Generate source code examples automatically
🎨 Beautiful and customizable interface

(work-in-progress screenshot)

Supported frameworks

Framework	Versions	Support	Auto CodeGen	Docs
Vue	3.2+	✅	✅	Todo
Svelte	-	Planned	-	-
React	-	TBD	-	-
Angular	-	TBD	-	-

Quick Start

pnpm i -D histoire
pnpm exec histoire dev
pnpm exec histoire build

Vue 3

In your Vite project, create a MyComponent.story.vue file inside your src directory:

<script setup>
import MyComponent from './MyComponent.vue'

function initState () {
  return {
    disabled: false,
  }
}
</script>

<template>
  <Story
    title="MyComponent"
    :layout="/* {
      type: 'grid',
      width: 200,
    } */"
  >
    <Variant
      title="playground"
      :init-state="initState"
    >
      <template #default="{ state }">
        <MyComponent
          :disabled="state.disabled"
        >
          Hello world
        </MyComponent>
      </template>

      <template #controls="{ state }">
        <div>
          <label>
            <input
              v-model="state.disabled"
              type="checkbox"
            >
            Disabled
          </label>
        </div>
      </template>
    </Variant>

    <Variant title="green">
      <MyComponent
        color="green"
      >
        Hello world
      </MyComponent>
    </Variant>
  </Story>
</template>

Packages

This mono-repo contains the following packages:

Package	Description
histoire	Main package

Contribution

See Contributing Guide.

Sponsors

Guillaume Chau

License

MIT