Meet Webpixels 2.0
Tags: webdev, bootstrap, showdev, startup
Published: 2022-06-02 09:09:18

![Meet Webpixels 2.0](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/np3eqj27n9fqxhod1caw.png)
The new Webpixels website is finally live, after 4 months of continuous development and improvements. This update is focused on how the component library works and the overall experience. The goal is to make it much easier to navigate through examples and preview and copy the stuff you need.

Here are some of the new stuff you can try starting today:

**[Visit the new Webpixels website](https://webpixels.io?utm_campaign=blog&utm_source=devto&utm_medium=article)**

---

## New component explorer

Instead of having categories and clicking each one of them, now you’ll be able to see them all in one place and filter out the ones you need. Also, there is a search bar to get the result you want quickly.

**[Browse components](https://webpixels.io/components?utm_campaign=blog&utm_source=devto&utm_medium=article)**

![Webpixels component explorer](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/9s7vn4ple6mv3gz5fu2b.png)

---

## Preview components in a new sexy modal

Once you find the component you need, click on it to preview the UI, but also the code. Everything happens now in one place, so we hope it will make the whole experience a much better one, with fewer clicks and time spent to get the things you need out of the library.

![Webpixels preview modal](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/6rl3cnju3kffv67hwzd6.png)

---

## Live code editing

Find the component you need, and click on it to preview the UI, but also the code. In the latest version, you will be able to tweak it and see the changes before copying it into your project.

![Webpixels live code editor](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/cgm8a7y7vwjep3nwkccq.png)

---

## Organize components into collections

Since our components are part of an ever-growing library, collections will allow you to create smaller batches of elements based on the category or the project’s type.

![Webpixels new Collection feature](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/92nl6eet2h4arcp60rpv.png)

---

### New tab for listing templates

Instead of mixing components and templates in one place, we thought it would be much better to separate them in two separate sections. This way you can work closer to Atomic Principles.

[**See all Templates](https://webpixels.io/templates?utm_campaign=blog&utm_source=devto&utm_medium=article)**

---

### Improved documentation

We still have many things to add to our docs, but we are pretty happy with the result, so far. We'll keep adding more examples and features, now that Bootstrap started its big move with the v5.2 update. 

Here are some things you should expect in the near future:

- Component CSS variables
- New helpers and utilities
- Groups of variables for root, components, and utilities
- Improved theming capabilities
- Dark mode support out of the box

We expect to release the next major update for @webpixels/css one month from now.

---

## Thank you 🙏

It’s been one year since we officially launched the new Webpixels website. It is such a great feeling to build something that people find useful and brings value to their projects.

And now we are ready for the next milestone.

Hope you enjoyed it.