storybookjs · kylegach · May 30, 2025 · May 16, 2025 · May 20, 2025 · May 22, 2025
@@ -11,7 +11,7 @@ Storybook addons are a powerful way to extend Storybook's functionality and cust
 
 This reference guide is to help you develop a mental model for how Storybook addons work by building a simple addon based on the popular [Outline addon](https://storybook.js.org/addons/@storybook/addon-outline/) (which is the historical basis for the built-in [outline feature](../essentials/measure-and-outline.mdx#outline)). Throughout this guide, you'll learn how addons are structured, Storybook's APIs, how to test your addon locally, and how to publish it.
 
-<Video src="../_assets/addons/storybook-addon-finished-state.mp4" />
+![Fully implemented Storybook addon](../_assets/addons/storybook-addon-finished-state.png)
 
 ## Addon anatomy
 

@@ -271,8 +271,6 @@ npm run dev
 
 If all goes well, you should see the Storybook website running. Open a browser window to `http://localhost:3000`, click the Docs link to open the documentation, and select your framework from the dropdown.
 
-{/* TODO: Record video */}
-
 <Video src="../_assets/contribute/local-storybook-website-dropdown-optimized.mp4" />
 
 Go through the documentation and check your work.

@@ -7,7 +7,7 @@ sidebar:
 
 The backgrounds feature allows you to set the background color on which the story renders in the UI:
 
-<Video src="../_assets/essentials/addon-backgrounds-optimized.mp4" />
+![Storybook with available backgrounds visible](../_assets/essentials/addon-backgrounds.png)
 
 ## Configuration
 

@@ -13,7 +13,7 @@ While working with composite components or page layouts, dealing with whitespace
 
 Instead, you can quickly visualize each component's measurements by clicking the measure button in the toolbar. Now when you hover over an element in your story, that element's dimensions and any whitespace (i.e., `margin`, `padding`, `border`) will be shown.
 
-<Video src="../_assets/essentials/addon-measure-optimized.mp4" />
+![Measure feature enabled displaying the component's dimensions](../_assets/essentials/addon-measure.png)
 
 <Callout variant="info" icon="💡">
   Alternatively you can press the `m` key on your keyboard to toggle measure on and off.
@@ -25,7 +25,8 @@ When building your layouts, checking the visual alignment of all components can
 
 Click the outline button in the toolbar to toggle the outlines associated with all your UI elements, allowing you to spot bugs and broken layouts instantly.
 
-<Video src="../_assets/essentials/addon-outline-optimized.mp4" />
+
+![Outline feature enabled on the component's story](../_assets/essentials/addon-outline.png)
 
 ## API
 

@@ -7,7 +7,7 @@ sidebar:
 
 The viewport feature allows you to adjust the dimensions of the iframe your story is rendered in. It makes it easy to develop responsive UIs.
 
-<Video src="../_assets/essentials/addon-viewports-optimized.mp4" />
+![Storybook with default viewports visible](../_assets/essentials/addon-viewports.png)
 
 ## Configuration
 

@@ -43,7 +43,7 @@ You write stories for granular UI component variation and then use those stories
 
 Storybook is an interactive directory of your UI components and their stories. In the past, you'd have to spin up the app, navigate to a page, and contort the UI into the right state. This is a huge waste of time and bogs down frontend development. With Storybook, you can skip all those steps and jump straight to working on a UI component in a specific state.
 
-<Video src="../_assets/get-started/7.0-storybook-hero-video.mp4" />
+<Video src="../_assets/get-started/histogram-stories-optimized.mp4" />
 
 <details>
   <summary>Where does Storybook fit into my project?</summary>