Wes and Scott talk with Jeppe Reinhold about Storybook 9’s powerful new features—including drastically reduced bloat, seamless Vite integration, and next-level component testing. They dive into visual regression testing, accessibility, performance, and best practices for writing robust, isolated UI components developers can actually enjoy testing and documenting. <a id= "Show_Notes_2"></a>Show Notes <ul> <li class="has-line-data" data-line-start="4" data-line-end="5"> <a href="#t=00:00">00:00</a> Welcome to Syntax!</li> <li class="has-line-data" data-line-start="5" data-line-end="6"> <a href="#t=01:40">01:40</a> What is Storybook?</li> <li class="has-line-data" data-line-start="6" data-line-end="7"> <a href="#t=03:48">03:48</a> How Storybook makes component design easier</li> <li class="has-line-data" data-line-start="7" data-line-end="11"> <a href="#t=04:41">04:41</a> Vite integration and compatibility with other tools <ul> <li class="has-line-data" data-line-start="8" data-line-end="9"> <a href="https://vite.dev/">Vite</a></li> <li class="has-line-data" data-line-start="9" data-line-end="10"> <a href="https://webpack.js.org/">webpack</a></li> <li class="has-line-data" data-line-start="10" data-line-end="11"> <a href="https://rspack.rs/">RSpack</a></li> </ul> </li> <li class="has-line-data" data-line-start="11" data-line-end="14"> <a href="#t=06:50">06:50</a> Storybook’s significantly smaller bundle size <ul> <li class="has-line-data" data-line-start="12" data-line-end="13"> <a href="https://e18e.dev/">e18e</a></li> <li class="has-line-data" data-line-start="13" data-line-end="14"> <a href="https://github.com/lukeed/polka">polka</a></li> </ul> </li> <li class="has-line-data" data-line-start="14" data-line-end="15"> <a href="#t=13:31">13:31</a> Upgrading to Storybook 9</li> <li class="has-line-data" data-line-start="15" data-line-end="17"> <a href="#t=17:34">17:34</a> Testing components with Storybook <ul> <li class="has-line-data" data-line-start="16" data-line-end="17"> <a href="https://vitest.dev/">Vitest</a></li> </ul> </li> <li class="has-line-data" data-line-start="17" data-line-end="18"> <a href="#t=19:51">19:51</a> How do you write a component “story”?</li> <li class="has-line-data" data-line-start="18" data-line-end="19"> <a href="#t=24:29">24:29</a> Brought to you by <a href="https://sentry.io/">Sentry.io</a></li> <li class="has-line-data" data-line-start="19" data-line-end="20"> <a href="#t=24:54">24:54</a> How visual testing works</li> <li class="has-line-data" data-line-start="20" data-line-end="21"> <a href="#t=28:38">28:38</a> How Storybook makes money</li> <li class="has-line-data" data-line-start="21" data-line-end="22"> <a href="#t=29:33">29:33</a> Best practices for component design</li> <li class="has-line-data" data-line-start="22" data-line-end="23"> <a href="#t=32:24">32:24</a> Mocking and testing strategies</li> <li class="has-line-data" data-line-start="23" data-line-end="24"> <a href="#t=34:49">34:49</a> Accessibility testing</li> <li class="has-line-data" data-line-start="24" data-line-end="25"> <a href="#t=40:51">40:51</a> Add-ons and future features</li> <li class="has-line-data" data-line-start="25" data-line-end="26"> <a href="#t=44:43">44:43</a> Storybook’s documentation</li> <li class="has-line-data" data-line-start="26" data-line-end="28"> <a href="#t=46:33">46:33</a> Sick Picks + Shameless plugs</li> </ul> <a id="Sick_Picks_28"></a>Sick Picks <ul> <li class="has-line-data" data-line-start="30" data-line-end="32"> Jeppe: <a href= "https://www.jbl.com/wifi-speakers/BOOMBOX-3-WIFI.html">JBL Boombox 3 Wi-Fi</a></li> </ul> <a id="Shameless_Plugs_32"></a>Shameless Plugs <ul> <li class="has-line-data" data-line-start="34" data-line-end="36"> Jeppe: <a href="https://www.chromatic.com/">chromatic</a></li> </ul> <a id="Hit_us_up_on_Socials_36"></a>Hit us up on Socials! Syntax: <a href="https://twitter.com/syntaxfm">X</a> <a href= "https://www.instagram.com/syntax_fm/">Instagram</a> <a href= "https://www.tiktok.com/@syntaxfm">Tiktok</a> <a href= "https://www.linkedin.com/company/96077407/admin/feed/posts/">LinkedIn</a> <a href="https://www.threads.net/@syntax_fm">Threads</a> Wes: <a href="https://twitter.com/wesbos">X</a> <a href= "https://www.instagram.com/wesbos/">Instagram</a> <a href= "https://www.tiktok.com/@wesbos">Tiktok</a> <a href= "https://www.linkedin.com/in/wesbos/">LinkedIn</a> <a href= "https://www.threads.net/@wesbos">Threads</a> Scott: <a href="https://twitter.com/stolinski">X</a> <a href= "https://www.instagram.com/stolinski/">Instagram</a> <a href= "https://www.tiktok.com/@stolinski">Tiktok</a> <a href= "https://www.linkedin.com/in/stolinski/">LinkedIn</a> <a href= "https://www.threads.net/@stolinski">Threads</a> Randy: <a href="https://twitter.com/randyrektor">X</a> <a href= "https://www.instagram.com/randyrektor/">Instagram</a> <a href= "https://www.youtube.com/@randyrektor">YouTube</a> <a href= "https://www.threads.net/@randyrektor">Threads</a>

Podurama

Home

Trending

Personal

Your Podcasts

New Episodes

My Files

Favourite Episodes

Tags (Folders)

Recently Played

Bookmarks

Followed Playlists

908: Storybook Has Evolved w/ Jeppe Reinhold

Syntax - Tasty Web Development Treats

AI Chapters

AI Insights

Reviews