Component Catalog — why you might want to have one

When I’m working on a js-rich web application I often find it useful to have a component catalog —  a separate application that displays a list of available components and how to use them.

I have implemented this with AngularJS (1.x) and now using vue.js.

One nice-to-have feature for a Component Catalog is the ability to see some snippet of code (html/js/css) and how it actually looks in the browser, like in the pictures below (see a live demo):

I have found that having a component catalog like that is useful for web development for a few reasons:

1. During development, you can have a place to manually test a component, isolated from the rest of your application.
2. If you publish to docs.html somewhere you and your team will have a handy list of available components that you can re-use and avoid re-inventing a few wheels.
3. The ability to see the the actual source code for sample components combined with some diligence and discipline to create sample components for that important parts of your application will give you a documentation system that will save a lot of time of people asking again and again how to use a given component.

So, doing this improves my development process. It might help yours too.