Histoire logo

Histoire

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

screenshot

(work-in-progress screenshot)

Documentation

Supported frameworks

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

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'

const state = reactive({
  disabled: false,
})

defineExpose({
  state,
})
</script>

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

      <template #controls>
        <HstCheckbox v-model="state.disabled">
          Disabled
        </HstCheckbox>
      </template>
    </Variant>

    <Variant
      title="green"
      icon="carbon:star-filled"
      icon-color="#10B981"
    >
      <MyComponent
        color="green"
      >
        Hello world
      </MyComponent>
    </Variant>
  </Story>
</template>

Packages

This mono-repo contains the following packages:

Package Description
histoire Main package
@histoire/controls Builtin controls components
@histoire/plugin-nuxt Nuxt 3 integration
@histoire/plugin-percy Visual regression testing with Percy
@histoire/plugin-screenshot Visual regression testing with simple screenshots

Contribution

See Contributing Guide.

Sponsors

Guillaume Chau

License

MIT

GitHub

View Github