Storybook 4.1: Need for Speed

Up to 300% faster, compatibility, convenience

Michael Shilman
Jan 9 · 4 min read
  • 🔌 Compatibility: Use any version of React 15.x+, full CRA compatibility
  • 🔀 Convenience: New addon to dynamically update CSS resources

⚡️ Performance architecture

Storybook 4.1 introduces a key improvement by Norbert de Langen that allows Storybook to run up to 300% faster on cold start and reload.

4.1 splits the preview (user code) and manager (storybook code) into two processes, which improves both performance and react version compatibility.
  1. 🛠 Manager is the enclosing UI for navigating between stories, for addons, and so forth.

🔌 React 15.x+ support

A second benefit of the preview/manager split is the ability to run Storybook with React 15+, which is great news for our React users that collectively download @storybook/react over 3M times each month.

Storybook can live on the bleeding edge without breaking apps that are stuck on older versions.

🔌 create-react-app

Now in Storybook 4.1, you can use all of create-react-app’s features, including Typescript support, without any custom configuration, thanks to Igor Davydkin, Brody McKee, and Chad Fawcett.

🔀 Dynamic CSS

Finally, Storybook 4.1 includes the brand-new CSS Resources addon by Neville Mehta. Now you can easily switch between CSS versions at runtime, which is useful for theming or simply exploring alternative component stylings:


Upgrade to Storybook 4.1

If you’re running Storybook 4.0, upgrading to 4.1 should be a breeze. If you’re on 3.x, we’ve got an 4.0 upgrade guide to help you along.

cd my-project
npx -p @storybook/cli sb init
yarn storybook

Get involved

Have questions or kudos? Say hi on Twitter, Discord, Github, Slack, or in the comments below. Please 👏 applaud this post and share to help more people discover it.

Thanks to the community

Storybook is the product of over 550 community committers and is released by a steering committee of top maintainers. Thanks also to gracious donations on Open Collective. Storybook 4.1 contains code contributions from the following people:

@454de6e @adamraider @alex-fournier @atekon @bartwaardenburg @bertho-zero @cfleschhut @chadfawcett @chilicoder @chris-lock @cosmith @cyruszei @dandean @dumbnickname @elucaswork @emilio-martinez @eps1lon @ewolfe @gabrielcsapo @gaetanmaisse @geoffreyd @gongreg @hipstersmoothie @hmelenok @hypnosphi @igor-dv @inversion @jamiemason @jfgreffier @jrwebdev @keraito @kroeder @kwm14 @lflpowell @libetl @lucianbuzzo @mansoorbashabellary @mark-schaal @miquelmasrieramrf @mohamedmansour @motleydev @mrmckeb @myoxocephalus @ndelangen @niku @nm123github @noriste @okamuuu @pksunkara @plrthink @quetzaluz @ranyitz @ravikishorethella @robincsl @shaminmeerankutty @shilman @snyk-bot @spawnia @stephanemw @stevehanson @tarikhamilton @tobiasljungstrom @transitive-bullshit @wuweiweiwu @ximenean @xogeny @y-nk

Storybook

The UI development environment you'll ♥️ to use.

Michael Shilman

Written by

energetic engineer 👷 frequent flyer 🚀 eternal optimist ❤️

Storybook

Storybook

The UI development environment you'll ♥️ to use.