Storybook

Esta reseña de Storybook JS aborda para qué sirve este taller de front-end, sus características principales, cuánto cuesta, cómo funcionan las pruebas, cuáles son sus puntos fuertes y débiles, y cómo se compara con otras herramientas. Storybook se ejecuta junto a tu aplicación como un entorno de desarrollo independiente y se integra en un flujo de trabajo de front-end ya existente. Se escriben «historias»: pequeños archivos que representan un componente en un estado concreto, como un botón desactivado o un formulario con un error. Storybook recopila todas las «historias» en una interfaz de usuario de navegador, de modo que los desarrolladores, diseñadores y equipos de producto pueden ver, probar y debatir cada elemento de la interfaz de usuario sin tener que navegar por la aplicación real. El proyecto es de código abierto y lo mantiene Chromatic; la versión 10 es la actual (anuncio de Storybook 10).

¿Para qué se utiliza Storybook?

Storybook se utiliza para el desarrollo, las pruebas y la documentación de la interfaz de usuario en un único lugar. Entre sus usos habituales se encuentran:

• Crear y desarrollar componentes de la interfaz de usuario de forma aislada, a modo de entorno de pruebas para el desarrollo, incluyendo casos extremos a los que es difícil acceder en la aplicación, como estados vacíos, estados de carga y errores de API.
• Gestionar una biblioteca de componentes o un sistema de diseño como única fuente de referencia para garantizar la coherencia de la interfaz de usuario de un producto.
• Pruebas visuales, de interacción y de accesibilidad en cada historia.
• Publicar una guía de estilo dinámica que utilicen tanto los diseñadores como los desarrolladores.
• Revisar los cambios en la interfaz de usuario en las solicitudes de incorporación de cambios antes de que lleguen a producción, y ayudar a los desarrolladores a depurar un componente sin el resto de la aplicación.

Lo utilizan principalmente los desarrolladores front-end en proyectos de React, pero también con Vue, Angular, Svelte y Web Components. Los equipos con más de una aplicación, o con un sistema de diseño compartido, son los que más partido le sacan.

Características principales

• Historias y aislamiento: cada historia representa un componente en un estado. Los datos simulados, el contexto y las solicitudes a la API te permiten desarrollar componentes sin necesidad de un backend en ejecución, y la recarga en caliente de módulos actualiza la pantalla a medida que guardas.
• Compatibilidad con marcos de trabajo: compatibilidad oficial con React (con Vite, Webpack, Next.js y React Native Web), Preact, Vue, Angular, Svelte y SvelteKit, y Web Components; las versiones de la comunidad añaden Nuxt, SolidJS y otros marcos de trabajo.
• Pruebas: pruebas de interacción que simulan clics en un componente, pruebas de accesibilidad con axe y pruebas visuales. Desde la versión 9, el ejecutor de pruebas se basa en Vitest, y la versión 10 añade la simulación automática de módulos.
• Documentación: páginas de documentación automáticas a partir de tus historias, con tablas de props y páginas en Markdown (MDX), para que la documentación se mantenga sincronizada con el código.
• Complementos: un ecosistema de complementos para ventanas de visualización, temas, tokens de diseño, incrustaciones de Figma y mucho más. Cada complemento se instala con un solo comando y amplía la interfaz de usuario de Storybook o sus pruebas.
• Integración: importa componentes existentes tal y como están; Storybook se integra con Vite, Webpack, Vitest, Playwright, pipelines de CI y herramientas de diseño, y el proveedor ofrece más de 400 integraciones y complementos, por lo que los usuarios rara vez necesitan herramientas independientes.
• Publicación: crea un Storybook estático y alójalo en cualquier sitio web, o publícalo con Chromatic para compartirlo con los equipos para su revisión.

Precios de Storybook

Storybook en sí es gratuito y de código abierto bajo la licencia MIT (GitHub). Se instala con npm en un proyecto nuevo o ya existente, se ejecuta localmente (por defecto en el puerto 6006) y la versión estática se aloja donde se desee.

La parte de pago es opcional y corresponde a Chromatic, el servicio alojado por el equipo de Storybook. Según la página de precios de Chromatic (septiembre de 2026):

• Gratis: 0 $, 5 000 instantáneas al mes, solo Chrome, proyectos y colaboradores ilimitados.
• Starter: 179 $ al mes, 35 000 instantáneas, incluye Safari, Firefox y Edge.
• Pro: 399 $ al mes, 85 000 instantáneas, incluye un dominio personalizado.
• Enterprise: precios a medida, instantáneas ilimitadas, SSO y asistencia prioritaria.

La métrica de uso son las capturas de pantalla: una captura de pantalla de una historia en un navegador. El factor que puede suponer una sorpresa en el coste es el volumen de capturas de pantalla, ya que se contabiliza cada historia multiplicada por cada navegador y cada ventana de visualización. TurboSnap de Chromatic solo vuelve a probar las historias afectadas por un cambio, lo que mantiene bajo el uso en bibliotecas de componentes de gran tamaño.

Pruebas de desarrollo de la interfaz de usuario: pruebas de interacción, de accesibilidad y visuales

Storybook se utiliza tanto para las pruebas como para el desarrollo, y las pruebas son ahora una parte fundamental del flujo de trabajo de desarrollo. Una historia ya es un caso de prueba: representa un componente en un estado conocido. Además, Storybook añade tres tipos de pruebas. Las pruebas de interacción utilizan una play función para hacer clic, escribir y verificar, a modo de pequeña prueba de extremo a extremo para un componente. Las pruebas de accesibilidad ejecutan axe en cada historia y señalan problemas de contraste, etiquetas y ARIA. Las pruebas visuales comparan capturas de pantalla con la última versión aprobada, ya sea localmente o a través de Chromatic. Desde Storybook 9, estas se ejecutan mediante Vitest, por lo que las mismas pruebas funcionan en la interfaz de usuario de Storybook, en la línea de comandos y en la integración continua (CI). El resultado son pruebas de desarrollo de la interfaz de usuario que detectan regresiones antes de que lleguen a los usuarios, sin necesidad de escribir un conjunto de pruebas independiente para cada componente.

Storybook UI para sistemas de diseño, documentación y equipos

Storybook es el entorno de trabajo predeterminado para muchos sistemas de diseño. La biblioteca de componentes reside en el código, y Storybook la convierte en un catálogo navegable con documentación, ejemplos y los props exactos que acepta cada componente. Los diseñadores pueden explorar cada componente y su funcionalidad en el navegador, y los desarrolladores pueden copiar un ejemplo funcional. Las historias se pueden incrustar en wikis, páginas Markdown y Figma, lo que mantiene la colaboración entre el diseño y el código en un mismo lugar. Para los equipos, la principal ventaja es la coherencia: todo el mundo crea nuevas páginas a partir de los mismos elementos probados, y cualquier cambio en un componente se refleja en todas las historias que lo utilizan.

En qué destaca Storybook — y en qué se queda corto

Puntos fuertes:

• Es gratuito, de código abierto y muy utilizado, con una gran comunidad y numerosos complementos.
• Desarrolla componentes de forma aislada, incluidos los casos extremos que son difíciles de reproducir.
• Desarrollo, pruebas y documentación desde las mismas historias.
• Compatible con la mayoría de los marcos de trabajo de front-end, así como con Vite y Webpack.

Inconvenientes:

• La configuración y las actualizaciones requieren esfuerzo; las versiones principales, como la versión 10 (solo ESM), necesitan Node 20.16 o posterior.
• Las historias suponen código adicional que los equipos deben mantener actualizado; de lo contrario, el catálogo se desvía de la aplicación real.
• En proyectos pequeños con pocos componentes compartidos, la sobrecarga puede superar las ventajas.
• Las pruebas visuales multis navegador a gran escala requieren un plan de pago de Chromatic o tu propia infraestructura.

Comparación de Storybook

• Figma: donde los diseñadores dibujan la interfaz de usuario; Storybook es donde los desarrolladores crean y prueban la versión codificada, y ambos se conectan mediante complementos e incrustaciones.
• Builder.io: un editor visual que permite a quienes no son desarrolladores crear páginas a partir de tus componentes registrados, mientras que Storybook sigue siendo una herramienta para desarrolladores.

Existen herramientas de código abierto más ligeras, como Ladle para React e Histoire para Vue, pero cuentan con ecosistemas de complementos más reducidos y menos funciones de prueba.

¿Merece la pena Storybook?

Storybook merece la pena para los equipos de front-end que mantienen una biblioteca de componentes, un sistema de diseño o más de una aplicación con interfaz de usuario compartida. Es gratuito, facilita la creación y revisión de componentes, y sus funciones de prueba sustituyen gran parte del código de prueba escrito a mano. No resulta tan útil para una única aplicación pequeña con pocos componentes reutilizables, en la que mantener las historias actualizadas cuesta más tiempo del que se ahorra. Si necesitas ayuda para configurar Storybook, un sistema de diseño o una biblioteca de componentes, los desarrolladores front-end y las agencias de LowCodeDevs pueden encargarse de ello.

Fuentes

• Storybook: la página web del proveedor, características y estadísticas del proyecto.
• Frameworks de Storybook: frameworks y generadores compatibles.
• Storybook 10: notas de la versión, requisitos exclusivos de ESM y de Node.
• ¿Por qué Storybook?: explicación del proveedor sobre el desarrollo basado en componentes.
• Precios de Chromatic: planes de pruebas visuales alojadas y límites de instantáneas.
• ¿Qué es Storybook?, Stackify: una introducción para desarrolladores.
• Storybook para equipos de producto, UXPin: cómo lo utilizan los equipos de diseño y de producto (UXPin comercializa una herramienta de diseño que se integra con Storybook).