# 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/

> 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?" :thinking_face: 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 :smile:

| - | Stencil | Storybook |
| -------- | -------- | -------- |
| Where to install? | Install as a standalone project | Install in your React/Vue/Angular project |
| Where to see changes we made to the component? | After installation, you can see an index.html. That's where you import your component and see the changes.  | Storybook has their own UI, you can even change the props on this UI to see how your component works. |
| Can generate standard web components to other frameworks components? | Yes, since Stencil use low-level component model that is provided by the browser (which all frameworks are built on). It allows integration to React/Vue/Angular/Ember components using Framework Wrappers. | No. It follow the framework you are using on your project |
| Can we use published library on any frameworks? | Yes. From 1 source code, you can generate components for different frameworks, then publish as different libraries and install the packages according to the framework. | No. Storybook library that build with React can only used in another React projects after published |
| Any usage other than building components? | No. It's main and only usage is to create components | Yes. Since storybook has it's own UI, it not only create components, but also manage other components libraries (built with storybook, regardless of frameworks) and allow cooperation between design team and development team |
| Had add-ons to extend library behaviour? | No. | Yes. You can install add-ons created by the community or create your own |

### 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 comeback with a tutorial on how to create and publish component library with Stencil. But. for now, that's it. Thanks for reading :woman-bowing:

<small>
Published date: 2023-11-17 <br/>
Also published <a href="https://medium.com/goalist-blog/storybook-stencil-comparisons-ef24e1098529">here</a>.
</small>