Bit is a tool build to turn your components into building blocks which can be easily shared and synced in different projects.

Part of Bit’s workflow is to make your components discoverable to find and choose from. But, how do you choose the right component for the job?

React Hero component rendered live with Bit

Components could have thousands of stars, comments, even bug fixes, and still not fit your project. Maybe it has a rounded theme when you need squares? Maybe it doesn’t work with Promises and that’s a problem?

Personally, I think the best way to choose is through your own eyes. This is why I built an interactive playground where all the components you share with Bit are up and running in real time and can be played with on the web.

Creating an interactive version of code is made easy as Bit does most of the work for you. Basically, all you have to do is use Bit to share a React component, compile it as a UMD, add a usage example and see it live.

How it works

Rendering components on a webpage sound easy. After all, that’s the purpose of the code, right? In practice, code doesn’t run that well on its own. It gets a lot of support from frameworks, compilers, code servers and more.

To make it render like we want it to, we’re going to have to provide it with everything it needs and all the support it could get.

Step 1: Compiling the code

Even in the amazing world of just-in-time javascript, some compilation is required. For example, even popular libraries like React and Vue have their own syntax that browsers can’t chew on their own.

To make the code ready for the real world, we use a compiler based on Webpack. The compiler digests the code, and turns it into a UMD. The great thing about this format is that it works in all environments, including the browser, Node.js, and your own project’s workspace.