Storybook

Questa recensione di Storybook JS illustra a cosa serve questo strumento per lo sviluppo frontend, le sue caratteristiche principali, il costo, come funzionano i test, i punti di forza e di debolezza, e come si posiziona rispetto ad altri strumenti. Storybook funziona parallelamente alla tua app come ambiente di sviluppo separato e si integra perfettamente in un flusso di lavoro frontend già esistente. Si scrivono delle “storie”: piccoli file che visualizzano un componente in uno stato specifico, come un pulsante disabilitato o un modulo con un errore. Storybook raccoglie tutte le "storie" in un'interfaccia utente del browser, in modo che sviluppatori, designer e team di prodotto possano visualizzare, testare e discutere ogni elemento dell’interfaccia utente senza dover navigare nell’app vera e propria. Il progetto è open source e gestito da Chromatic; la versione 10 è quella attualmente disponibile (annuncio di Storybook 10).

A cosa serve Storybook?

Storybook viene utilizzato per lo sviluppo, il collaudo e la documentazione dell’interfaccia utente in un unico posto. Gli usi tipici sono:

• Creare e realizzare componenti dell’interfaccia utente in modo isolato, come ambiente di prova per lo sviluppo, inclusi i casi limite difficili da raggiungere nell’app, come gli stati vuoti, gli stati di caricamento e gli errori API.
• Gestione di una libreria di componenti o di un sistema di progettazione come unica fonte di riferimento per garantire la coerenza dell’interfaccia utente di un prodotto.
• Test visivi, di interazione e di accessibilità su ogni story.
• Pubblicazione di una guida di stile dinamica utilizzata sia dai designer che dagli sviluppatori.
• Revisione delle modifiche all’interfaccia utente nelle richieste di pull prima che raggiungano la produzione e assistenza agli sviluppatori nel debug di un componente senza il resto dell’app.

Viene utilizzato principalmente dagli sviluppatori frontend su progetti React, ma anche con Vue, Angular, Svelte e Web Components. I team con più di un’app o con un sistema di design condiviso ne traggono il massimo vantaggio.

Caratteristiche principali

• Storie e isolamento: ogni storia rende un componente in un unico stato. Dati fittizi, contesto e richieste API consentono di sviluppare componenti senza un backend in esecuzione, mentre il ricaricamento a caldo dei moduli aggiorna la schermata man mano che si salva.
• Supporto dei framework: supporto ufficiale per React (con Vite, Webpack, Next.js e React Native Web), Preact, Vue, Angular, Svelte e SvelteKit, e Web Components; le build della community aggiungono Nuxt, SolidJS e altri framework.
• Test: test di interazione che simulano i clic su un componente, test di accessibilità con axe e test visivi. A partire dalla versione 9 il test runner è basato su Vitest, mentre la versione 10 aggiunge l’automocking dei moduli.
• Documentazione: pagine di documentazione automatiche generate dalle tue story, con tabelle delle proprietà e pagine Markdown (MDX), in modo che la documentazione rimanga sincronizzata con il codice.
• Componenti aggiuntivi: un ecosistema di componenti aggiuntivi per viewport, temi, token di design, incorporamenti di Figma e altro ancora. Ogni componente aggiuntivo si installa con un solo comando ed estende l’interfaccia utente di Storybook o le sue funzionalità di test.
• Integrazione: importa i componenti esistenti così come sono; Storybook si integra con Vite, Webpack, Vitest, Playwright, pipeline di CI e strumenti di progettazione, e il fornitore elenca oltre 400 integrazioni e componenti aggiuntivi, quindi gli utenti raramente hanno bisogno di strumenti separati.
• Pubblicazione: crea uno Storybook statico e ospitalo su qualsiasi sito web, oppure pubblicalo con Chromatic per condividerlo con i team per la revisione.

Prezzi di Storybook

Storybook è gratuito e open source con licenza MIT (GitHub). Si installa con npm in un progetto nuovo o esistente, si esegue localmente (di default sulla porta 6006) e si ospita la build statica dove si preferisce.

La parte a pagamento è facoltativa e proviene da Chromatic, il servizio ospitato dal team di Storybook. Secondo la pagina dei prezzi di Chromatic (settembre 2026):

• Gratuito: 0 $, 5.000 snapshot al mese, solo Chrome, progetti e collaboratori illimitati.
• Starter: 179 $ al mese, 35.000 snapshot, aggiunge Safari, Firefox ed Edge.
• Pro: 399 $ al mese, 85.000 snapshot, aggiunge un dominio personalizzato.
• Enterprise: prezzi personalizzati, snapshot illimitati, SSO e assistenza prioritaria.

L’unità di misura dell’utilizzo è lo snapshot: uno screenshot di una story in un browser. L’aspetto che può riservare sorprese in termini di costi è il volume degli snapshot, poiché ogni story moltiplicata per ogni browser e viewport viene conteggiata. TurboSnap di Chromatic esegue nuovamente i test solo sulle story interessate da una modifica, il che mantiene basso l’utilizzo in presenza di librerie di componenti di grandi dimensioni.

Test di sviluppo dell’interfaccia utente: test di interazione, accessibilità e test visivi

Storybook viene utilizzato tanto per i test quanto per lo sviluppo, e i test sono ormai una parte fondamentale del flusso di lavoro di sviluppo. Una story è già di per sé un caso di test: rende un componente in uno stato noto. Oltre a ciò, Storybook aggiunge tre tipi di test. I test di interazione utilizzano una play funzione per cliccare, digitare e verificare, come un piccolo test end-to-end per un singolo componente. I test di accessibilità eseguono axe su ogni story e segnalano problemi di contrasto, etichette e ARIA. I test visivi confrontano gli screenshot con l’ultima versione approvata, in locale o tramite Chromatic. A partire da Storybook 9 questi vengono eseguiti tramite Vitest, quindi gli stessi test funzionano nell’interfaccia utente di Storybook, dalla riga di comando e nella CI. Il risultato è un sistema di test per lo sviluppo dell’interfaccia utente che individua le regressioni prima che raggiungano gli utenti, senza dover scrivere una suite di test separata per ogni componente.

L’interfaccia utente di Storybook per sistemi di design, documentazione e team

Storybook è l’ambiente di lavoro predefinito per molti sistemi di design. La libreria dei componenti risiede nel codice e Storybook la trasforma in un catalogo consultabile con documentazione, esempi e le proprietà esatte accettate da ciascun componente. I designer possono esplorare ogni componente e le sue funzionalità nel browser, mentre gli sviluppatori possono copiare un esempio funzionante. Le storie possono essere incorporate in wiki, pagine Markdown e Figma, il che mantiene la collaborazione tra design e codice in un unico posto. Per i team, il vantaggio principale è la coerenza: tutti creano nuove pagine a partire dagli stessi elementi testati, e una modifica a un componente si riflette in ogni storia che lo utilizza.

I punti di forza e le carenze di Storybook

Punti di forza:

• Gratuito, open source e ampiamente utilizzato, con una vasta comunità e numerosi componenti aggiuntivi.
• Sviluppo dei componenti in modo isolato, compresi i casi limite difficili da riprodurre.
• Sviluppo, test e documentazione dalle stesse storie.
• Supporta la maggior parte dei framework frontend, oltre a Vite e Webpack.

Svantaggi:

• La configurazione e gli aggiornamenti richiedono un certo impegno; le versioni principali, come la versione 10 (solo ESM), richiedono Node 20.16 o versioni successive.
• Le storie rappresentano codice aggiuntivo che i team devono mantenere aggiornato, altrimenti il catalogo si discosta dall’app reale.
• Nei progetti di piccole dimensioni con pochi componenti condivisi, l’overhead potrebbe superare i benefici.
• I test visivi cross-browser su larga scala richiedono un piano Chromatic a pagamento o un'infrastruttura propria.

Confronto con Storybook

• Figma: dove i designer disegnano l’interfaccia utente; Storybook è dove gli sviluppatori realizzano e testano la versione codificata, e i due si collegano tramite componenti aggiuntivi e incorporamenti.
• Builder.io: un editor visivo che consente ai non sviluppatori di creare pagine a partire dai componenti registrati, mentre Storybook rimane uno strumento per sviluppatori.

Esistono strumenti open source più leggeri, come Ladle per React e Histoire per Vue, ma presentano un ecosistema di componenti aggiuntivi più limitato e meno funzionalità di test.

Storybook vale la pena?

Storybook è utile per i team frontend che gestiscono una libreria di componenti, un sistema di design o più di un’app con interfaccia utente condivisa. È gratuito, semplifica la creazione e la revisione dei componenti e le sue funzionalità di test sostituiscono gran parte del codice di test scritto a mano. È meno vantaggioso per una singola app di piccole dimensioni con pochi componenti riutilizzabili, dove mantenere aggiornate le storie richiede più tempo di quanto ne faccia risparmiare. Se avete bisogno di aiuto per configurare Storybook, un sistema di design o una libreria di componenti, gli sviluppatori front-end e le agenzie su LowCodeDevs possono occuparsene.

Fonti

• Storybook: sito del fornitore, funzionalità e statistiche sui progetti.
• Framework Storybook: framework e builder supportati.
• Storybook 10: note di rilascio, requisiti per ESM e Node.
• Perché Storybook?: la spiegazione del fornitore sullo sviluppo basato sui componenti.
• Prezzi di Chromatic: piani di test visivi in hosting e limiti degli snapshot.
• Che cos'è Storybook, Stackify: un'introduzione per gli sviluppatori.
• Storybook per i team di prodotto, UXPin: come lo utilizzano i team di design e di prodotto (UXPin commercializza uno strumento di progettazione che si integra con Storybook).