✳flâneur — a map of the web's best reading

Browse Stories

storybook.js.org · 863 words · saved by 1 readers

Last chapter, we learned that stories correspond with discrete component states. This chapter demonstrates how to use Storybook as a workshop for building components. A *.stories.js file defines all the stories for a component. Each story has a corresponding sidebar item. When you click on a story, it renders in the Canvas an isolated preview iframe. Navigate between stories by clicking on them in the sidebar. Try the sidebar search to find a story by name. Or use keyboard shortcuts. Click on the Storybook's menu to see the list of shortcuts available. Storybook ships with time-saving tools built-in. The toolbar contains tools that allow you to adjust how the story renders in the Canvas: The “Docs” page displays auto-generated documentation for components (inferred from the source code). Usage documentation is helpful when sharing reusable components with your team, for example, in an application. The toolbar is customizable. You can use globals to quickly toggle themes and languages.

Browse Stories | Storybook docs Docs » Get Started » Browse stories Version 10.5 Get Started Why Storybook? Install Frameworks What's a story? Browse stories Setup Conclusion Stories Args Parameters Decorators Play function Loaders Tags Naming components and hierarchy Mocking data and modules Building pages and screens Stories for multiple components Writing stories in TypeScript Testing Interaction tests Accessibility tests Visual tests Snapshot tests Test coverage In CI Integrations Docs Autodocs MDX Doc blocks Code panel Preview and build docs AI Agentic setup MCP server Best practices Mani

Explore this link on the map →

related reading