Storybook & Stencil comparisons

I. What are they

Stencil is a library for building reusable, scalable component libraries. Generate small, blazing fast Web Components that run everywhere, aka, a “Web Components Compiler”
https://stenciljs.com/

and,

Storybook is a frontend workshop for building UI components and pages in isolation.
https://storybook.js.org/

Do you know that we can actually build reusable components with just HTML and Javascript? I didn’t know, until i started writing this blog. I missed out on this because i’ve always used JS framework, and apparently, we can achieve the same things with just plain Javascript and HTML and these components are called “Web Components”. However, the process of creating Web Components is not as easy as creating component in a framework. This is a part of the reason why Stencil was created.

Storybook was built to enhance the experience of creating and managing components in a project regardless of the framework we’re using.

I was confused at first when i see tutorials to use both Stencil and Storybook and i was thinking: “Don’t they do the same thing? Why use both?”

The more i dive into it, the more i realize how different they are, and it makes sense to do that. Here’s what i found.

II. The similarities

One of the most obvious similarities is that both was created to make it easy for developers to build reusable components.

The other one are features, like, component testing, or ability to publish as an npm package so that we can install and reuse on other projects and generate documents for those components.

III. The differences

There is no better way to explain the differences than using a table, so here it is.

IV. Conclusion

I hope at this point, you know why people want to use these 2 libraries. One makes it easy to generate components to multiple frameworks with one source code. One allows extensive tool to make building and testing component at ease. If you google the differences between Stencil and Storybook, you’ll get this:

Developers describe Stencil as “A reusable web component generator”. Stencil combines some of the best features from traditional frameworks, but outputs 100% standards-compliant Custom Elements, part of the Web Component spec. On the other hand, Storybook is detailed as “Build bulletproof UI components faster”.
stackshare.io

I’m expect to work on Stencil soon. After that, maybe i’ll come back with a tutorial on how to create and publish component library with Stencil. But for now, that’s it. Thanks for reading.