Storybook for Native

Raj Vasikarla
3 min readAug 7, 2020

--

Storybook is an open-source tool for developing UI components in React, Vue, Angular, and more. Storybook for Native is a new project to bring Storybook to the native mobile development community!

Wait, but why?

Storybook is the most popular component workshop on the planet with over 51k stars on Github and 7M+ monthly npm downloads.

Storybook is popular because it makes building UIs organized and efficient. Developers can build components in isolation. Doing this enables better testing, documentation, and even collaboration. For large organizations, Storybook solves a critical problem of discoverability by bringing all their components together.

While the web community is happily leveraging all these benefits, what about the mobile community? As a mobile developer who has used Storybook for the web, I sure wish we could do the same! Having a single place where both web and mobile components live would be particularly valuable. The recent announcement on Storybook Composition could be found here.

Muti-Platform Storybook using Composition

Ok, but how?

Storybook is optimized for the web, and mobile components are typically written for native platforms, so making these two worlds work together seems like a huge challenge.

Fortunately, the folks at appetize.io have already solved a big chunk of this problem by allowing us to run native mobile applications in the browser! 🤯

Appetize is typically used for sharing, testing, and getting feedback on native apps. But what if we could integrate Appetize with Storybook to enable the sharing of native mobile components in the same space.

It turns out we can! 🎉

Introducing Storybook for Native

In the following prototype, we’ve embedded Appetize in Storybook, and can interact with native components through Storybook’s standard UI:

Native Storybook for iOS and Android

We can even take advantage of Storybook’s addon ecosystem. For example, here we use Knobs to update the device parameters in Appetize:

Native Storybook for iOS and Android with Knobs

Cool, What’s Next?

This proof of concept shows that it’s possible to seamlessly connect Storybook and Appetize to bring isolated development to native mobile components.

We’re working with the Storybook team on a more robust integration, including a native-friendly developer experience, full documentation, and official public release.

A big shout out to Michael Shilman for reviewing the post!

Raj Vasikarla, Engineering Leader, Intuit Inc.

--

--