Alternatives à Storybook pour Next.js

Storybook est l'outil de référence pour développer et documenter des composants React de manière isolée. Dans mon article précédent sur Storybook, j'ai expliqué pourquoi ces outils de développement isolé sont essentiels pour créer des interfaces de qualité.

Cependant, Storybook n'est pas sans défauts. Configuration complexe, temps de démarrage lent, build lourd, et Chromatic qui embarque beaucoup de fonctionnalités alors qu'on veut parfois juste isoler des composants : ces frictions poussent de plus en plus de développeurs à explorer des alternatives plus légères et performantes.

Dans cet article, nous allons explorer les principales alternatives à Storybook : Ladle, React Cosmos et Histoire. Nous verrons leurs avantages, leurs inconvénients, et comment choisir l'outil adapté à vos besoins.

Pourquoi chercher une alternative à Storybook ?

Configuration complexe

Storybook nécessite une configuration souvent importante, surtout pour des projets Next.js ou avec des besoins spécifiques. La gestion des addons, des presets, et l'intégration avec Webpack ou Vite peuvent rapidement devenir un casse-tête.

import type { StorybookConfig } from "@storybook/nextjs";

const config: StorybookConfig = {
  stories: ["../src/**/*.stories.@(js|jsx|ts|tsx|mdx)"],
  addons: [
    "@storybook/addon-links",
    "@storybook/addon-essentials",
    "@storybook/addon-interactions",
    "@storybook/addon-a11y",
  ],
  framework: {
    name: "@storybook/nextjs",
    options: {},
  },
  staticDirs: ["../public"],
  // Configuration supplémentaire souvent nécessaire
  webpackFinal: async (config) => {
    // Personnalisations webpack...
    return config;
  },
};

export default config;

Cette configuration peut rapidement s'alourdir, surtout si vous devez gérer des alias TypeScript, des imports CSS spécifiques, ou des variables d'environnement.

Performance : lenteur et poids

Storybook est souvent critiqué pour ses performances, notamment en comparaison avec des alternatives plus modernes. Les temps de démarrage peuvent être très longs, surtout sur des projets avec de nombreuses stories.

Selon des benchmarks réalisés par l'équipe de Ladle, Storybook peut prendre jusqu'à 58 secondes pour démarrer à froid sur un projet avec 350 stories (bibliothèque Base Web d'Uber), contre seulement 6 secondes pour Ladle. Le hot reload peut également être lent (environ 2,5 secondes) et ne préserve pas toujours l'état des composants.

La taille du build est également significative (selon cet article) : un build Storybook peut atteindre 16 MB, contre 4-5 MB pour Ladle. L'initial payload est également beaucoup plus lourd (14,3 MB vs 388 kB).

Chromatic : trop de fonctionnalités

Chromatic, la solution de visual testing intégrée à Storybook, embarque de nombreuses fonctionnalités avancées (visual regression testing, collaboration, etc.) qui ne sont pas toujours nécessaires. Si vous voulez juste isoler et documenter vos composants, ces fonctionnalités ajoutent de la complexité et du coût.

Quand Storybook reste pertinent

Malgré ces limitations, Storybook reste un excellent choix pour :

• Les grandes équipes avec des besoins de documentation avancée
• Les design systems complexes nécessitant de nombreux addons
• Les projets multi-frameworks (Vue, Angular, etc.)
• Les équipes qui ont besoin de l'écosystème Chromatic

Les alternatives en détail

Ladle : performance et simplicité

Ladle est une alternative open-source créée par Vojtech Miksu (tajo), conçue pour être un remplacement direct de Storybook avec un focus sur la performance et la simplicité. Bien qu'Uber utilise Ladle pour documenter son design system Base Web, l'outil n'est pas développé par Uber mais par la communauté open-source.

Installation et configuration

L'installation de Ladle est extrêmement simple :

npm install --save-dev @ladle/react

La configuration est minimale. Il suffit de créer un fichier ladle.config.ts à la racine du projet :

import type { UserConfig } from "@ladle/react";

const config: UserConfig = {
  stories: "src/**/*.stories.{ts,tsx}",
  viteConfig: {
    // Votre configuration Vite personnalisée si nécessaire
  },
};

export default config;

C'est tout ! Pas besoin de configuration complexe, Ladle utilise Vite par défaut et détecte automatiquement votre configuration TypeScript.

Créer une story

Les stories Ladle utilisent un format similaire à Storybook CSF/CSF2 (fonctions avec args) :

import type { Story } from "@ladle/react";
import { Button } from "./Button";

export const Default: Story<typeof Button> = (args) => (
  <Button {...args}>Cliquer</Button>
);

Default.args = {
  variant: "primary",
  size: "medium",
};

export const Secondary: Story<typeof Button> = () => (
  <Button variant="secondary">Secondaire</Button>
);

export const Disabled: Story<typeof Button> = () => (
  <Button disabled>Désactivé</Button>
);

Ladle génère automatiquement les contrôles à partir des types TypeScript, ce qui élimine le besoin de configuration manuelle.

Métriques du projet

• Repository : github.com/tajo/ladle
• Issues ouvertes : ~30 (dernière mise à jour : mai 2025)
• Mainteneur : Vojtech Miksu (tajo), Software Engineer chez Vercel)

Avantages

• Performance exceptionnelle : démarrage 10x plus rapide que Storybook
• Configuration minimale : zéro config par défaut
• Compatibilité Vite : utilise Vite nativement pour des builds ultra-rapides
• HMR rapide : hot reload en moins de 100ms avec préservation de l'état
• Bundle léger : build 4x plus petit que Storybook
• Support TypeScript natif : inférence automatique des types

Inconvénients

• React uniquement : pas de support pour Vue, Angular, etc.
• Écosystème limité : moins d'addons que Storybook
• Documentation moins riche : pas de mode docs aussi avancé que Storybook

Cas d'usage

Ladle est idéal pour :

• Les projets React/Next.js qui veulent juste isoler des composants rapidement
• Les équipes qui privilégient la performance et la simplicité
• Les projets avec de nombreuses stories où la vitesse compte

React Cosmos : flexibilité et contrôle

React Cosmos est un outil qui se distingue par sa flexibilité et le contrôle qu'il offre aux développeurs.

Installation et configuration

Pour un projet Next.js avec Vite :

npm install --save-dev react-cosmos@next react-cosmos-plugin-vite@next

La configuration se fait via cosmos.config.json :

{
  "plugins": ["react-cosmos-plugin-vite"],
  "port": 5000,
  "fixturesDir": "__fixtures__",
  "fixtureFileSuffix": "fixture"
}

Créer une fixture

React Cosmos utilise le concept de "fixtures" plutôt que de "stories" :

import { Button } from "./Button";

export default {
  component: Button,
  props: {
    variant: "primary",
    size: "medium",
    children: "Cliquer",
  },
};

Pour des fixtures interactives avec contrôles :

import { useFixtureInput } from "react-cosmos/client";
import { Button } from "./Button";

export default function ButtonFixture() {
  const variant = useFixtureInput("variant", "primary");
  const size = useFixtureInput("size", "medium");
  const disabled = useFixtureInput("disabled", false);

  return (
    <Button variant={variant} size={size} disabled={disabled}>
      Cliquer
    </Button>
  );
}

Métriques du projet

• Repository : github.com/react-cosmos/react-cosmos
• Issues ouvertes : 8 (dernière mise à jour : avril 2025)

Avantages

• Flexibilité maximale : contrôle total sur la configuration
• Support React Native : peut être utilisé pour documenter des composants React Native
• Fixtures réutilisables : les fixtures peuvent être utilisées pour les tests
• Configuration personnalisable : adaptez l'outil à vos besoins spécifiques

Inconvénients

• Configuration manuelle : nécessite plus de setup que Ladle
• Courbe d'apprentissage : concept de fixtures différent des stories
• Moins de fonctionnalités intégrées : nécessite plus de configuration pour certaines fonctionnalités

Cas d'usage

React Cosmos convient pour :

• Les projets avec des besoins très spécifiques
• Les équipes qui veulent un contrôle total sur leur environnement de développement
• Les projets React Native

Histoire : framework agnostic et moderne

Histoire est un outil moderne construit avec Vite, optimisé pour la vitesse et conçu pour être framework-agnostic.

Installation et configuration

Pour un projet Vue 3 (son framework principal) :

npm install --save-dev histoire @histoire/plugin-vue3

La configuration se fait dans histoire.config.ts :

import { defineConfig } from "histoire";
import { HstVue } from "@histoire/plugin-vue3";

export default defineConfig({
  plugins: [HstVue()],
  setupFile: "./histoire.setup.ts",
});

Support React

Important : Histoire supporte principalement Vue 3, Svelte et Vue 2. Le support React est encore expérimental et non officiel. Si vous travaillez avec React, Ladle ou React Cosmos sont de meilleurs choix pour le moment.

Métriques du projet

• Repository : github.com/histoire-dev/histoire
• Issues : 11 (188 fermées)
• État : Projet actif mais avec un nombre significatif d'issues non résolues selon la communauté

Avantages

• Performance optimale : construit avec Vite pour des builds ultra-rapides
• Multi-frameworks : support Vue 3, Svelte, Vue 2
• Moderne : utilise les dernières technologies (Vite, ES Modules)
• Auto-documentation : génération automatique de documentation pour Vue 3

Inconvénients

• Support React limité : pas de support officiel pour React
• Moins mature : écosystème moins développé que Storybook
• Focalisé sur Vue : meilleure expérience pour les projets Vue

Cas d'usage

Histoire est idéal pour :

• Les projets Vue 3 ou Svelte
• Les projets multi-frameworks centrés sur Vue
• Les équipes qui veulent un outil moderne et performant pour Vue

React Styleguidist : mention rapide

React Styleguidist était une alternative populaire à Storybook, mais son développement a ralenti significativement. La dernière version majeure (v13.0.0) date de 2022, et bien qu'elle ne soit pas officiellement dépréciée, elle présente des problèmes de compatibilité avec Webpack 5 et les versions récentes de React.

Pour de nouveaux projets, il est recommandé d'utiliser une des alternatives modernes mentionnées ci-dessus.

Tableau comparatif

Guide de choix

Critères de décision

Pour choisir l'outil adapté à vos besoins, considérez ces critères :

1. Framework utilisé

• React/Next.js uniquement : Ladle ou React Cosmos
• Vue 3/Svelte : Histoire
• Multi-frameworks : Storybook reste le meilleur choix

2. Performance requise

Si la vitesse de développement est critique (démarrage rapide, HMR instantané), Ladle est clairement le meilleur choix.

3. Complexité du projet

• Projets simples : Ladle pour sa simplicité
• Projets complexes avec besoins spécifiques : React Cosmos pour sa flexibilité
• Design systems complexes : Storybook pour son écosystème

4. Taille de l'équipe

• Petites équipes : Ladle ou React Cosmos
• Grandes équipes : Storybook pour la documentation avancée et la collaboration

5. Besoin de documentation

• Documentation basique : Ladle suffit
• Documentation riche avec MDX : Storybook
• Documentation pour Vue : Histoire

Recommandations par contexte

Pour un projet Next.js/React qui veut juste isoler des composants rapidement : → Ladle : performance, simplicité, zéro config

Pour un projet avec des besoins très spécifiques ou React Native : → React Cosmos : flexibilité maximale

Pour un projet Vue 3 : → Histoire : optimisé pour Vue, moderne et performant

Pour un design system complexe avec grande équipe : → Storybook : écosystème mature, documentation avancée

Migration depuis Storybook

Compatibilité des formats

Important : Ladle v3 ne supporte pas encore le format CSF3 de Storybook. Il supporte les formats CSF et CSF2 (versions antérieures). Si vos stories sont en CSF3, vous devrez les convertir en CSF2 ou attendre que Ladle ajoute le support CSF3.

Voici un exemple de format CSF2 compatible avec Ladle :

import type { Story } from "@ladle/react";
import { Button } from "./Button";

export const Default: Story<typeof Button> = (args) => (
  <Button {...args}>Cliquer</Button>
);

Default.args = {
  variant: "primary",
  size: "medium",
};

Pour migrer vers Ladle depuis Storybook CSF2, il suffit souvent de :

1. Installer Ladle
2. Renommer les imports de @storybook/react vers @ladle/react
3. Adapter la configuration si nécessaire
4. Si vous utilisez CSF3, convertir vos stories en CSF2 ou attendre le support CSF3

Points d'attention

• Addons Storybook : vérifiez si Ladle propose des équivalents ou si vous pouvez vous en passer
• Configuration webpack : Ladle utilise Vite, certaines configurations peuvent nécessiter des adaptations
• MDX : Ladle supporte MDX depuis la v3, mais avec des limitations par rapport à Storybook

Conclusion

Storybook reste un excellent outil, mais il n'est pas toujours la meilleure solution. Les alternatives comme Ladle, React Cosmos et Histoire offrent des avantages significatifs selon vos besoins :

• Ladle excelle pour les projets React qui privilégient la performance et la simplicité
• React Cosmos offre une flexibilité maximale pour les projets avec des besoins spécifiques
• Histoire est le choix idéal pour les projets Vue 3

Le choix de l'outil doit être guidé par vos besoins réels : ne surchargez pas votre stack avec Storybook si vous n'avez besoin que d'isoler des composants rapidement. À l'inverse, si vous avez besoin d'un écosystème mature avec une documentation riche, Storybook reste pertinent.

L'important est de choisir l'outil adapté à votre contexte, votre équipe et vos objectifs. Testez plusieurs solutions sur un petit projet pour évaluer laquelle correspond le mieux à votre workflow.