---
title: Storybook
created: 2026-06-08
updated: 2026-06-08
type: app
tags: [catalogue, design, app-marathon3-rattrapage-b]
confidence: high
contested: false
sources: [https://selfh.st/apps/?tag=design&app=storybook]
---

# 📚 Storybook

> Atelier de développement de composants UI — développez, testez et documentez vos composants en isolation.

## 📋 Informations Générales

| Champ | Valeur |
| :--- | :--- |
| **Site web** | [storybook.js.org](https://storybook.js.org) |
| **GitHub** | [storybookjs/storybook](https://github.com/storybookjs/storybook) |
| **License** | MIT |
| **Langage** | TypeScript |
| **Étoiles GitHub** | ~85k ⭐ |
| **Catégorie** | [[cat-design\|Design]] |

## 📝 Description

**Storybook** est un outil de **développement et documentation de composants UI** qui s'exécute en dehors de l'application principale. Chaque composant a ses **stories** (cas d'usage), testables visuellement, avec mocks, contrôles interactifs, a11y, et tests visuels. Différence vs **Penpot/Figma**: Storybook est **orienté code** (vous codez les composants en React/Vue/Angular/Svelte) alors que Penpot/Figma sont des outils de design visuels. Pour qui: équipes frontend qui veulent un **catalogue vivant** de leurs composants, accélérer les revues UI, partager un design system code-first.

## 🚀 Installation

Storybook n'est pas une "app" à deployer, c'est un outil dev dans votre projet. Mais il peut être **buildé statiquement** et hébergé.

```bash
# Dans un projet React existant
npx storybook@latest init
# Lance le dev server sur :6006
npm run storybook

# Build statique
npm run build-storybook
# → sortied dans storybook-static/
```

Hébergement via nginx/Caddy/Traefik du dossier `storybook-static/`.

```nginx
# nginx
server {
  listen 80;
  server_name storybook.example.com;
  root /var/www/storybook-static;
  index index.html;
  try_files $uri $uri/ /index.html;
}
```

## 🔄 Alternatives

### Open Source
- [[app-penpot]] — Design graphique open source, pas code-first.
- **Histoire** — Storybook-like pour Vue, plus léger.
- **Pattern Lab** — Atomic design PHP/Node.
- **Docz** — Documentation MDX React.

### Propriétaires
- **Figma** — Design cloud, leader.
- **Sketch** — macOS only, payant.
- **Bit.dev** — Catalogue de composants cloud.
- **Zeroheight** — Documentation design system.

## 🔐 Sécurité
- **Build statique**: pas de runtime → surface d'attaque minimale.
- **HTTPS**: obligatoire pour iframe embedding.
- **Contrôle d'accès**: à protéger par SSO/Authentik si interne sensible.
- **Add-ons**: surveiller la供应链 (npm).

## 📚 Ressources
- [Documentation](https://storybook.js.org/docs)
- [GitHub](https://github.com/storybookjs/storybook)
- [Add-ons registry](https://storybook.js.org/addons)

## Pages Liées
- [[cat-design]] — Catégorie Design
- [[app-penpot]] — Design open source
- [[recettes-docker-compose]] — Templates Docker