Bulma CSS - Open-Source LIVE Editor
Tags: bulma, webdev, tools
Published: 2021-01-12 18:14:27

---
title: Bulma CSS - Open-Source LIVE Editor
published: true
description: Open-source components editor for Bulma CSS, the popular Framework based on Flexbox
tags: bulma, webdev, tools
canonical_url: https://blog.appseed.us/bulma-css-live-editor/
cover_image: https://raw.githubusercontent.com/app-generator/static/master/bulma-css/bulma-live-editor-screen.png
---
Hello Coders, 

This article presents an open-source tool for **[Bulma CSS](https://appseed.us/apps/bulma-css/bulmaplay)**, a popular framework based on Flexbox. The product allows to edit and download components crafted on top of this popular framework. The core project can be downloaded from Github and used locally for unlimited hobby & commercial projects.

---

> Thank you! **Content provided by [AppSeed - App Generator](https://appseed.us)**.

---

- [Bulma CSS Editor](https://components.bulma-css.com/) - the LIVE deployment
- [Bulma CSS Editor Sources](https://github.com/app-generator/bulma-css) - published on Github
- More **[Bulma CSS](https://bulma-css.com/)** resources 

---

![Bulma CSS - LIVE Editor, animated presentation.](https://raw.githubusercontent.com/app-generator/static/master/bulma-css/bulma-live-editor.gif)

--- 

Using the product is fairly simple. We can access the LIVE deployment, edit the existing components and download the code or clone the project from the public repository and compile from sources.

---

> Sections and elements

---

- Elements: [Buttons](https://components.bulma-css.com/components/buttons.html), [Badges](https://components.bulma-css.com/components/badges.html), [Avatars](https://components.bulma-css.com/components/avatar.html)
- Sections: [CTAs](https://components.bulma-css.com/components/cta.html), [Teams](https://components.bulma-css.com/components/team.html), [Features](https://components.bulma-css.com/components/feature.html)
- [Widgets](https://components.bulma-css.com/components/pricing.html), [Avatars](https://components.bulma-css.com/components/avatar.html), [Layouts](https://components.bulma-css.com/components/form.html), [Pricing cards](https://components.bulma-css.com/components/shopping.html)

---

For each element, we can toggle the **dark-mode** and all changes are reflected instantly in the viewer. Samples:

---

> [Bulma CSS](https://bulma-css.com/) - Pricing Card

---

![Bulma Css - Pricing card component.](https://raw.githubusercontent.com/app-generator/static/master/bulma-css/bulma-live-editor-component-card.png)

---

> [Bulma CSS](https://bulma-css.com/) - Login Box

---

![Bulma CSS - Login Box Component.](https://raw.githubusercontent.com/app-generator/static/master/bulma-css/bulma-live-editor-component-login.png)

---

> [Bulma CSS](https://bulma-css.com/) - eCommerce widget

---

![Bulma CSS - eCommerce product card, animated presentation.](https://raw.githubusercontent.com/app-generator/static/master/bulma-css/bulma-live-editor-component-ecommerce.gif)

---

> Being a young project, the feedback/suggestions and contributions are welcomed - More resources:

- [Bulma CSS](https://bulma.io/) - official website
- [Bulma CSS starters](https://appseed.us/apps/bulma-css) - provided by AppSeed

---

> Btw, my (nick) name is **Sm0ke** and I'm pretty active also on [Twitter](https://twitter.com/Sm0keDev).