Since Bit’s first release in 2018, it helped tens of thousands of teams and developers discover, share and compose components to build their apps.

During the past months, we’ve worked hard to improve this experience. We’ve learned from many (many) amazing feedbacks and ideas from people in the community, and from teams sharing their components with Bit.

Today, we’re excited to introduce Bit’s new experience for discovering and sharing reusable components, with your own eyes. Read below to learn more, or jump right in and take a look. Don’t hesitate to share your thoughts!

So what’s new? TL:DR

New home at the bit.dev domain

New design and visual experience for your components

New features: component search, playground, labels and much more

Performance and stability improved by up to 700%

Let’s jump in :)

What’s new in Bit’s hub?

Bit’s Component Hub was redesigned for discovering and experiencing components. The rule of thumb is “choose, play, use”. Let’s see how.

Meet bit.dev

Bit’s component hub now has a new home at the bit.dev domain.

Apart from being an awesome domain name 😻, this new domain reflects Bit’s values of developers-first, community, and open source. Learn more:

Explore components with your eyes

Discover components: React spinners example

We added new features to make components more visual to our own eyes. When browsing components Bit presents preview examples for the components, powered with video-based animations.

This helps you get a quick and intuitive understanding of the components and make the best choice for your needs. To make it look shiny all examples go through prettify. Examples are available for server-side code too.

Ramda functions available with Bit

The new component lobby helps you search and discover components by your teammates and the community, in a visual way.

The new collections lobby helps you discover collections shared by your team and the community, making it easy to collaborate and share code.

Labels and filters were added to help navigate your way through components so that you can quickly find code relevant to your specific context.

Live component playground

React Pacman loader in Bit’s playground: Play, learn, install

We built a new and quite ground-breaking technology for isolating and running components anywhere. It’s called the “component capsule”.

Based on the component capsule we are building new features, including a brand new component playground. Playing with a component helps you learn how it works and decide if you want to use it.

The new playground supports React, Vanilla JS and Serverside modules (Vue and Angular support coming up). It supports features such as external package installations, example snapshots, side-by-side view and more.

We’ll keep on improving the performance of the playground and add new features (feel free to suggest ideas).

A search built for code components

Searching for “loaders”

A big part of discovering components is searching for them.

Bit’s new search was built to make components discoverable not only by text, but also by context and functionality. For example, you can search for “React loaders” and get loader component relevant to React based on the environment and context of the component.

Bit leverages semantic analysis of natural language and semantic representation of source code functionality for an accurate algorithm.

The new search itself was built almost entirely out of Bit components, which means it can now be extended and rapidly improved over time.

Labels and filters help screen the results when needed, balancing the search algorithms with hands-on control, so that you can find what you need.

Automatic component labels