How to Inline HTML Stories in Storybook 5 Docs

Published on July 7, 2020 for Cloud Four

Storybook (the UI component playground we’ve enjoyed using lately) organizes its component examples into stories. These stories are displayed one at a time by default, but the Docs add-on lets you display as many as you’d like in a single page alongside background information, usage details and more.

Docs have two methods for rendering stories:

Iframe stories render in (you guessed it) an iframe element. Media queries will work as expected and state will be sandboxed, but their height isn’t responsive, and they load rather sluggishly.
Inline stories render directly in the page you’re viewing, which means they load a lot faster and don’t require height to be set. But because Storybook is written in React, this feature only works if our story functions are also written in (or converted to) React.

If you use the HTML “framework” (as we have), you’re limited to iframe stories by default. But we can change that, and with fewer than ten lines of configuration! Here’s how.