Storybook 8
Storybook is the business normal UI software for constructing, testing, and documenting parts and pages. It’s utilized by thousands of teams globally, integrates with all main JavaScript frameworks, and combines with most main design and developer instruments.
Right this moment, I’m thrilled to announce the discharge of Storybook 8! This newest model of Storybook brings collectively 8,865 commits throughout 773 PRs from 218 contributors. These adjustments embrace main enhancements to Storybook’s testing and documentation characteristic units whereas strengthening framework compatibility and consumer expertise throughout React, Vue, Angular, web-components, Svelte, and extra. Learn on to find the discharge’s highlights, together with:
📸 Constructed-in visible testing
⚛️ React Server Part assist
🎛️ Upgraded Vue and React management autogeneration
⚡️ Rearchitected Vite assist, Vitest testing, and Vite 5 assist
🧪 2-4x sooner check builds
✨ Refreshed desktop UI
📲 Rebuilt cellular UX
🙅♀️ Eliminated React dependency for non-React tasks
Constructed-in visible testing
Storybook 8’s headline characteristic is the brand new Visible Exams addon, which helps you to catch UI bugs sooner and extra simply than ever earlier than. The addon brings Chromatic, the visible testing cloud service developed by Storybook maintainers, into Storybook for the very first time.
On the click on of a button, you may check all of your tales concurrently, examine each to earlier variations, and pinpoint any visible adjustments. Then, filter your Storybook sidebar to solely see tales containing visible variations and confirm these adjustments one after the other.
This course of mirrors Chromatic’s CI workflow, however now it’s attainable to do all of it instantly inside Storybook as you’re working, without having to submit a PR and even commit your adjustments!
Visible testing is a superpower, and the Visible Exams addon makes it extra accessible than ever earlier than.
Learn more about getting started with Visual Tests addon, or read the addon’s launch announcement.
React Server Part (RSC) assist
React Server Elements are a paradigm shift for React, the place parts are completely rendered on the server. We’ve been intently following the React core group’s explorations of RSC, in addition to our associates at Next.js main the cost in RSC app improvement.
Since Storybook 7’s launch, we’ve obtained many questions on when Storybook’s RSC assist would arrive. Actually, it’s one of our most popular GitHub issues.
Storybook 8 heeds your name and introduces our first-ever experimental assist for React Server Elements. We’re classifying our RSC resolution as experimental as a result of it’s suitable solely with Subsequent.js – for now. We’ll proceed constructing this performance by future releases.
To be taught extra about Storybook 8’s experimental RSC assist, see how to build an RSC app with Next.js, Mock Service Worker, and Storybook 8. We plan to share extra as we refine one of the best practices.
Improved React and Vue management autogeneration
One in all Storybook’s signature options is auto-generated UI controls that allow you to modify part inputs interactively to discover new part states.
For React and Vue tasks, Storybook 8 introduces main enhancements to controls autogeneration, by upgrading the libraries we use to research your parts (also called “docgen”).
For React customers, Storybook 8 switches to a considerably sooner docgen library: react-docgen
. In contrast to our present TypeScript-based resolution, react-docgen
produces a shallower evaluation that’s method sooner and adequate for nearly all parts. In our checks, utilizing react-docgen
clocked as much as 50% sooner React Storybook startup instances. The complete TypeScript resolution continues to be accessible as a fallback for anybody who wants it. Study extra in our React docgen documentation.
For Vue customers, Storybook 8 brings assist for an official Vue docgen bundle: vue-component-meta
. This bundle is powered by Volar, which you’ll acknowledge because the official Vue VSCode plugin. Upgrading to vue-component-meta
improves Storybook’s dealing with of sorts and our means to autogenerate controls. Study extra about Storybook 8’s Vue adjustments in our Vue docgen announcement or our Vue docgen documentation.
Rearchitected Vite assist, a Vitest-powered testing framework, and Vite 5 compatibility
One in all Storybook 7’s greatest wins was the introduction of Storybook’s zero-config Vite support.
Since then, Vite utilization has continued to skyrocket. Right this moment, Vite accounts for almost half of all new Storybook tasks. Accordingly, we’ve continued to tighten and refine our Vite integration.
Firstly, Storybook 8 provides assist for Vite 5, Vite’s newest and biggest. As we launched Vite 5 assist, we realized that Storybook was configuring an excessive amount of in your behalf, which made it tough for us to assist completely different Vite variations. So, Storybook 8 offers you extra management for configuring Vite plugins like plugin-react
, plugin-vue
, whereas shifting these dependencies exterior Storybook. Almost all Vite tasks include these plugins pre-configured – so until you’re doing one thing non-standard, it can require no adjustments in your half!
Storybook 8 additionally integrates Vite’s testing bundle, Vitest, as a part of our new framework: @storybook/check
. This new testing framework replaces two earlier packages (@storybook/jest
and @storybook/testing-library
), permits using Vitest’s spy
and anticipate
, and has a smaller set up footprint. Study extra about Storybook 8’s testing improvements.
2-4x sooner check builds
Storybook 8 introduces a new “test mode” that makes static builds of Storybook 2-4 instances sooner.
We noticed that whenever you construct Storybook to be used with testing software like Storybook’s Check Runner or Chromatic, you may not require Storybook options like documentation or auto-generated controls.
As such, Storybook 8 permits a streamlined check workflow by offering a brand new --test
CLI flag that disables quite a lot of Storybook’s normal options. Utilizing this flag offers you dramatically sooner construct instances and smaller construct outputs. We’ll proceed to discover new optimization potentialities in each future launch!
Up to date cellular and desktop UI
Storybook 8’s UI brings a bunch of refinements and polish, and in case you have an eye fixed for design we predict you’ll love these adjustments.
We overhauled Storybook’s cellular UI fully. Now, each the navigation sidebar and addon panel spring up from the underside of the web page, making them simple to set off along with your thumb on a cellphone. In contrast to the earlier model, these panels co-exist elegantly with the principle “Canvas” space of Storybook.
We additionally rearchitected the desktop UI to repair a long-standing responsiveness bug, the place tales remounted when the browser resized between desktop and cellular states. In Storybook 8, that transition is buttery easy and completely scrumptious, sprinkled with a topping of up to date typography and a brand new icon set.
No extra React requirement in non-React tasks
In Storybook 7, we made the exhausting resolution to make React a peer dependency for all framework tasks. Whereas this alteration made Storybook suitable with pnpm
and different trendy bundle managers, it was a bitter capsule to swallow for non-React customers.
Fortunately, we’ve discovered lots since then about dependency wrangling and bundle prebundling (thanks tsup
!) in order that Storybook 8 now removes the React peer dependency for non-React Storybooks. Storybook’s UI continues to be written in React, however you may kiss these react
and react-dom
dependencies in your bundle.json
goodbye!
Framework-specific enhancements
Because of the final 12 months’s value of upkeep from an expanded core group, Storybook is quicker, extra suitable, and extra steady than ever. Listed here are the highlights!
React: React will get experimental React Server Part assist and react-docgen
as a sooner default for auto-generating interactive controls, each described above.
Vue: Vue will get Volar-powered auto-generated controls that assist the newest Vue options and TypeScript sorts. It additionally will get dynamic supply snippets in docs and quite a few bugfixes from our new maintainers, Chakir and Lars.
Angular: Angular will get Angular 16/17 assist, nested module metadata, standalone directives, easier-to-write tales, and dozens of bugfixes. We’re additionally working with the Angular core group to assist new high-performance construct choices in a future model.
Net Elements: Storybook’s Net Part tales are written in Lit and we’ve up to date to assist Lit3. Moreover we’ve fastened points associated to auto-generated controls and dynamically-generated supply snippets.
Svelte: Storybook’s Svelte assist has gotten a ton of affection from the Storybook core group, the Svelte core group, and the neighborhood at giant. Key enhancements embrace Svelte 5 (prerelease) assist, SvelteKit web page and navigation mocking, and key fixes/enhancements to Storybook’s “native” Svelte story format.
Get began
To make a recent set up of Storybook 8, run:
npx storybook@newest init
To improve an present Storybook to Storybook 8, run:
npx storybook@newest improve
For assist with upgrading, seek the advice of our Storybook 8 migration guides to be taught how to upgrade from Storybook 7 to Storybook 8, or how to upgrade from Storybook 6 to Storybook 8. Alternatively, refer to our extended Storybook migration guide on GitHub.
Have a good time Storybook 8 🥳
Between Storybook 7 and Storybook 8, Storybook gained the GitHub 2023 Global Grandiose award for our worldwide community! In that very same spirit, we’re operating two meetups on March 28 the place you may rejoice the Storybook 8 launch along with your native frontend scene. Join us in Paris or join us in New York!
Moreover, thanks to all our neighborhood launch companions throughout the frontend ecosystem for serving to us convey Storybook 8 to the world! Because of Chromatic, Figma, ViteConf, Omlet, DivRiots, story.to.design, StackBlitz, UXpin, Nx, Mock Service Worker, Anima, Zeplin, zeroheight, Storyblok, kickstartDS, and Kendo UI.
Credit
Core group
Michael Arestad, Yann Braga, João Cardoso, Michael Chan, Tom Coleman, Charles de Dreuille, Norbert de Langen, Shaun Evening, Kyle Gach, Gert Hengeveld, Dom Nguyen, Valentin Palkovic, Kasper Peulen, Chakir Qatab, Jeppe Reinhold, Lars Rickert, Kai Röder, Michael Shilman (me!), Joe Vaughan, Varun Vachhar, Ian Van Schooten, Daniel Williams, Josh Wooding, and Vanessa Yuen
Contributors
@0916dhkim, @1234tgk, @43081j, @aditya1, @adityakrmodak, @agriffis, @ai, @alitas, @almoghaimo, @amerlander, @andarist, @anneau, @artur93gev, @arunoda, @arup1221, @atreay, @auctumnus, @bashmish, @bdriguesdev, @benmccann, @bkfarnsworth, @bodograumann, @bryanjtc, @cdedreuille, @cgatian, @chakas3, @chocoscoding, @coliff, @cprecioso, @danez, @danielmarcano, @dannyhw, @dartess, @darth-koder007, @daves28, @decherneyge, @devanandb, @devazc, @diamondex, @domyen, @dotwoodmedia, @dprcoles, @drik98, @dschungelabenteuer, @dubbs, @edutoit, @efrenaragon96, @epreston, @felixrizzolli, @fezvrasta, @filiptammergard, @flambe, @francois2metz, @g-cappai, @githrdw, @gitstart, @gossi, @greut, @gufah, @halitiince, @hcvdhaar, @henkerik, @hobbes7878, @hoishin, @honzahruby, @iabu94, @ianvs, @idesigncode, @iqbalcodes6602, @irangarcia, @ivoilic, @j3rem1e, @jackw, @jared-christensen, @joaonunomota, @joekarow, @joevaugh4n, @joeycozza, @johnhunter, @jonniebigodes, @jonthenerd, @joriswitteman, @joshbolduc, @jpzwarte, @jreinhold, @json-betsec, @julien-deramond, @junghoe, @kaelig, @karolstawowski, @kasperpeulen, @kawokas, @kbazilio, @kkirby, @klescouar, @kolife01, @kota-kamikawa, @kripod, @kshmidt-digma, @ksugawara61, @kubijo, @kuriacka, @kylegach, @kylemeenehan, @kyletsang, @larsrickert, @legnaleurc, @leniwen, @literalpie, @lucavazz, @luk-z, @machycek, @maheshchandra10, @manbearwiz, @mandarini, @mariasimo, @mariocadenas, @marklb, @martinnabhan, @masaya48, @mastrzyz, @mattlewis92, @mauriciorobayo, @mdornseif, @medihack, @mh-ahs, @michens, @mickmcgrath13, @miily8310s, @mlazari, @mrzillagold, @mvarendorff, @naporin0624, @nasvillanueva, @natehouk, @ndelangen, @nikospapcom, @nilsjacobsen, @nkabrown, @nlepage, @notwoods, @noviceguru, @nsheaps, @nvitius, @omahs, @orangecms, @oruman, @osnoser1, @paoloricciuti, @pascalfiv, @piratetaco, @pruthvip15, @pure-js, @rashidshamloo, @re-taro, @redbugz, @reyronald, @roel-t, @rohanpoojary1107, @roottool, @rwaight, @samvv, @seriouz, @shaunevening, @sheriffmoose, @shilman, @showrin, @sidnioulz, @sitogi, @sjwilczynski, @smeagol74, @sookmax, @specialdoom, @speelbarrow, @spookyjelly, @stegano, @stilt0n, @stof, @stropitek, @subhajit20, @syabro, @t99, @taehyeon-envoi, @taozhou-glean, @tap-kim, @thapasusheel, @thisisanto, @thtliife, @tmeasday, @tolkadot, @tomo5524, @tsvanharen, @turtle601, @tusharwebd, @ubugnu, @unional, @usrrname, @valentinpalkovic, @vanessayuenn, @vmizg, @webblocksapp, @wesgro, @wilson2k, @wise-introvert, @wjdtjdgns, @wouterk12, @wuzhuobin, @xueyawei, @xyy94813, @yannbf, @ygkn, @yilun-sun, @yoshi2no, @yossisaadi, @youngboy, @zachtball, and @zmarkan