StorybookJS: Tips & Tricks

Import Markdown files as Docs only pages, use a CDN to load dependencies & sort stories.

David Dal Busco
ITNEXT
Published in
4 min readMay 5, 2021

--

Photo by Florencia Viadana on Unsplash

I just migrated the documentation of DeckDeckGo to StorybookJS. More than its ability to simplify building and testing, I like to use it for documentation purpose because it allows me to integrate the README.md files that StencilJS generates automatically. Sparring steps between code and documentation is the best don’t you think?

Here are a couple of tips & tricks I reused, or discovered, along the process.

Import Markdown Files Into StorybookJS

One particularly cool feature of StencilJS is that, out of the box, it auto-generates readme.md files in markdown from the code’s comments. Isn’t that neat?

I think it is. Therefore, to even push to concept further, I set up StorybookJS to import these Markdown files as Docs only pages. In that way, the documentation remains and, is edited as close as possible of the code and delivered to the end user without any interruption.

Meta

At the time of writing the StorybookJS issue #11981 list miscellaneous solutions, including using the transcludeMarkdown settings or raw loader. If following solution does not suit you, try one of these.

--

--