Announcing The CodeSandbox Storybook Add-on

Today, we’re thrilled to announce the release of the official CodeSandbox Storybook add-on, a powerful integration that gives a code playground to every story, making it easy for everyone to learn, share bug reproductions, and work on their ideas collaboratively.

---

Building user interfaces requires a delicate balancing act between product, design, and code. The cost of shipping poor user experiences is higher than ever, so Storybook has filled a much-needed gap as the glue between design and development.

Stories make it much easier to document and maintain components and provide a single source of truth for the design system that can be referenced and used by everyone at any time.

We are big fans of Storybook and use it internally for our own components and libraries such as Sandpack. However, in using it and talking with our users, we felt the potential of taking Storybook to the next level by making it easy to turn a static story into a dynamic code playground. That’s why we’re excited to announce our official Storybook add-on, which you can add to your Storybook instance today!

A code playground for every story

After setting up the integration in your Storybook instance (which should take no more than a few minutes), all your Storybook instances will now be populated with an “Open in CodeSandbox” button.

When someone viewing a story clicks that button, they will instantly create a Sandbox with that code running, allowing them to edit the code, collaborate live, and share with others.

Custom props are persisted, so you can use Storybook to select specific props and open that specific state in a Sandbox.

This integration natively supports private npm packages from your own custom registry, so you can keep everything private by default.

Enhancing bug repros and design systems

Because every Sandbox created from this add-on will follow the same structure and is shareable by default with a URL, the flow of sharing bug reproductions becomes much simpler and more consistent. So, going from a story to a shareable repro is much easier for the end-user, and maintainers get a streamlined experience in reviewing submissions.

This integration also brings a simple yet powerful way to enhance any design system that uses Storybook. Those learning about the design system are one click away from experimenting with the code and can collaboratively work on ideas with others in the same Sandbox.

We recently wrote a blog post about some of the most popular ways to use CodeSandbox in a design system and other flows that you might not have seen before.

Simple member management

One key benefit of this integration is that all Sandboxes will be created in the same workspace where the integration is set up, further improving security and access management.

So, to reduce the friction for everyone wanting to create Sandboxes from stories, we have updated our workspace member management.

Admins can now make a workspace accessible to team members with shared email domains by turning their workspace into an organization and claiming their domain, as shown below. This will allow team members to automatically join a workspace if they have a CodeSandbox account with an email that matches the organization’s domain.

Better together

For us, building this integration is all about making documentation come to life. With a single click, stories can transform from static assets into tools for exploration, communication and iteration.

You can try the add-on by following the instructions in the GitHub repo (and check out the Docs for some additional details).

We are planning some minor updates to this add-on and welcome your feedback and suggestions. Feel free to open an issue on GitHub!