Overview
Widgetbook is a sandbox for building widgets and screens in isolation. It helps you develop and share hard-to-reach states and edge cases without needing to run your whole app. Widgetbook is open-source and free to use.
Still don't get what Widgetbook really is? Maybe the Flutter team can explain it better (note that this is a very old version of Widgetbook, and the UI has changed since then).
The Problem
While developing widgets or screens, you have probably faced one of the following problems:
- Hard-to-reach states: You need to test a widget in a specific state (e.g. error, loading, etc.) but it is hard to reach that state in your app.
- Time consuming: You need to run your whole app to test a single widget or screen, and even spend more time to test in in different configurations (e.g. dark mode, different locales, etc.).
- API/Datasource dependencies: You need to mock data or APIs to test your screens, which is time-consuming and error-prone, and it is even not always possible to do that.
- Collaboration: You need to share your widgets with your design team or other developers, but it is hard to do that without a proper documentation or cataloging system.
The Solution: Widgetbook
With Widgetbook you can build UI in isolation without the depending on any external data source or API. This allows you to:
- Easily test your widgets in different states (e.g. error, loading, etc.) via Knobs, and configurations (e.g. dark mode, different locales, etc.) via Addons.
- Mock your data so you can test your widgets without the need to run your whole app (learn more about Mocking).
- Catalog your widgets and screens in a single place, so you can easily share them with all your team members (e.g. developers, designers, product managers, QA testers).
Salto Systems
Salto Systems is a company that specializes in smart locks and access control systems. They use Widgetbook to build their widgets in isolation, which allows them to speed up their development process.
How Salto prevents UI problems while saving 50% of their time
We build new features by starting with Widgetbook, allowing us to immediately develop the UI in isolation and see how new components behave. Building in isolation is especially helpful for larger components and screens that handle various data states — like loading, loaded, or error. Before Widgetbook, testing error states was time-consuming because they’re naturally hard to reproduce; the data often comes from sources we can’t easily control. But with Widgetbook’s isolation-first approach, we can inject mocked data and test all component states. Once a component is ready, other developers can easily explore its different variations. — Arthur Schenk, Mobile Team Lead at Salto