Bubble Card 3

v3.1.0-beta.1

Hi everyone!

I’m finally confident enough to release the first v3.1.0 beta, so here it is! And this new version is… well, once again… huge!

This update adds many new features and fixes that make Bubble Card even more flexible, faster and fun to use. You can now build cards that feel much more information rich, more personal, and easier to maintain.

One of the biggest changes is the new integration with Bubble Card Tools. This is a new custom integration for Home Assistant that takes care of the Bubble Card backend. Your modules are now stored in individual YAML files, which makes them easier to back up, share, and edit. This change was important to improve stability, reliability and make the whole system more future proof. The best part is that you only need to install it. All your existing modules will be migrated automatically. You can even do it later since this is not a breaking change, but it is highly recommended, especially if you want to install new modules.

Another big feature is the new “Sub-buttons only” card. It’s perfect if you want to create a simple card made entirely of quick actions or to display information. For example, you can create a menu with a sub-button for each of your rooms, and place it at the bottom of the screen as a fixed footer.

Sub-buttons also got a huge upgrade. You can now choose between three types: Default (button), Slider, and Select / Dropdown. For example, you can create a slider for brightness, another slider for temperature, and a dropdown to choose a scene, all in the same card. Sliders can always stay visible or appear only when tapped, which helps keep your layout clean.

The biggest update, and also my favorite one, brings powerful customization features that give you full control over your card layout. With sub button groups, you can organize related buttons into custom groups with flexible layouts. The new below placement options let you place sub buttons and buttons under the other elements, opening up entirely new design possibilities!

The new sub-button editor lets you copy and paste to duplicate sub-buttons or entire groups, saving time when creating similar setups. Individual size customization allows you to fine-tune the height and width of each sub-button, while icon placement options let you position icons exactly where you want them (top, bottom, left, or right). Together, these features work in harmony to give you the flexibility to create virtually any layout you can imagine!

The module editor has also been improved to be faster and easier to use. You can search your modules, sort them, and even set them as compatible with all card types so they stay future proof.

There is a lot more in this update, but these examples should give you a good idea of what is now possible. This release is another big step toward making Bubble Card a powerful and enjoyable tool for everyone.

Here’s the full changelog:

💡 New features and enhancements

• Bubble Card Tools integration:
  Automatic migration from legacy module storage (entity-based) to file-based storage via Bubble Card Tools. Modules are now stored as YAML files for better management. Installing it is requested if you still want to install or create new modules, but this can be done later as this is not a breaking change.

• New "Sub-buttons only" card:
  A dedicated card type for displaying only sub-buttons, perfect for creating custom button panels. Includes a footer mode option for fixed positioning at the bottom of the screen.

• Sub-button types:
  You can now choose between three sub-button types: Default (button), Slider, or Select (dropdown). Each type offers specific functionality tailored to different use cases.

• Slider sub-buttons:
  Sub-buttons can now be configured as sliders with various options including temperature control, color sliders (hue, saturation, white temperature), and brightness control. Sliders can be set to always show or appear on tap.

• Sub-button groups:
  Create groups of sub-buttons with customizable layouts.

• Sub-buttons/buttons below:
  Sub-buttons and specific buttons can now be displayed below with various new layout options.

• Copy/paste sub-buttons and groups:
  Easily duplicate sub-buttons or entire groups using copy and paste functionality in the editor. Saves time when creating similar configurations.

• Sub-button size customization:
  Customize the height and width of individual sub-buttons for better layout control.

• Icon placement options:
  Control where icons appear within sub-buttons (top, bottom, left, right) for better visual organization.

• Sub-button CSS classes by name:
  Sub-buttons can now be targeted with CSS classes based on their name (e.g., .bubble-sub-button-name-my-button), making it easier to apply custom styles to specific buttons.

• Timer support:
  Timer entities are now fully supported with live countdown display. Finally!

• Text scrolling for sub-buttons:
  Text scrolling effect is now available for sub-buttons, perfect when sub-button width is reduced.

• Module editor improvements:

  • Search bar added to quickly find modules in "My Modules"
  • Better module ordering with multiple sort options (alphabetical, recent first, active first)
  • "All cards" option for module compatibility, allowing modules to work with future card types

• Smooth media player cover transitions:
  Media player covers now fade smoothly between different cover images for a more polished experience.

• Lock and error state colors:
  Lock entities now use red when unlocked and the main color when locked, providing clearer visual feedback. Same behavior applies to entities with "error" state. #1874

• Calendar card event limit:
  You can now limit the number of events displayed in the calendar card using the "limit" parameter. This helps improve performance when calendars have many events. PR #1931 by @nomis52, thank you so much for this PR and all the others!

✔️ Bug fixes and improvements

• All slider issues fixed:
  Fixed all known slider responsiveness and functionality issues. Sliders now work reliably across all supported entity types.

• Mobile slider scrolling fix:
  On mobile devices, scrolling up or down by starting on a slider no longer blocks page scrolling, allowing natural page navigation.

• Active sub-button background fix:
  Sub-buttons that are active (colored) on an active card no longer have their background color mixed with the card background, ensuring better visual separation.

• Text scrolling loop fix:
  The text scrolling effect loop no longer restarts after each change (like when "last changed" updates), providing smoother scrolling behavior.

• Pop-up header display:
  Fixed an issue where the pop-up header was not appearing in some cases.

• Pop-up performance improvements (again):
  Pop-ups were slower on low-end devices in recent releases, they are now faster than ever (even with blured backdrop!).

• Pop-up content loading:
  Fixed issues where pop-up contents (gauge card, map card, etc.) weren't loading correctly in some cases.

• Pop-up state management:
  Improved pop-up state tracking with active popups set to prevent conflicts and ensure proper cleanup.

• Live style updates in pop-up editor:
  When editing a module in a pop-up card, styles are now updated in real-time as you make changes.

• Module editor error clearing:
  Fixed an issue where errors weren't clearing when creating or editing a module.

• Sub-button editor restructure:
  The sub-button editor has been completely restructured with a new sectioned approach (Main/Bottom) and better organization. Old configurations are automatically migrated.

• Calendar card "days" option:
  Added "days" option to calendar card editor (was missing in previous version).

• Custom icon pack support:
  Custom icon packs like hass-hue-icons should now work correctly with Bubble Card.

• Improved color management:
  Better overall color handling with more vivid colors, especially for sliders and RGB light sub-buttons. #692

• Hold action improvements:
  Hold actions now include a slight dead zone to prevent accidental triggers from minor finger movement. #1781

• Module registry refactoring:
  Improved module loading system with better caching and performance. Module styles are now preloaded more efficiently.

• Performance optimizations:

  • CSS variable resolution caching for faster style processing
  • Optimized pop-up opening
  • Better memory management for timer intervals and scrolling effects

• Various performance optimizations:
  Multiple optimizations for better performance and memory management throughout the card, especially noticeable on lower-end devices.

ℹ️ Bubble Card news

I’ve been wanting to start my own YouTube channel for a while, focusing on tutorials around Home Assistant and Bubble Card. There are three videos so far, an introduction explaining the project, a first tutorial on how to create your first pop-up and a video about the new features in Bubble Card 3. I really hope you will enjoy them. Don’t hesitate to subscribe to help give my channel more visibility. Thank you in advance!

The next video should cover the new global variables, as well as custom styles, templates and modules, since I’ve noticed more and more questions on these topics.

Over the past year, I’ve been working almost everyday on Bubble Card to make it the best it can be, and I still don't believe how much it have grown in popularity. Watching the community getting this big and seeing so many people using my work has been incredibly rewarding.

I have another announcement to you all, I decided to create a Patreon as a way to offer something more for those who want to support me. On my Patreon, I share advanced modules, custom styles, and templates. For example, I’ve added this module that lets you fully customize the labels, icons, and icon colors of dropdown items, while also defining actions or adding navigation to pop-ups or dashboard pages. It works with both the main select card and sub-buttons in supported cards, making it perfect for quick controls, a vacuum room selector, or even a light color picker.

If you like my project and want to support its development, subscribing to my Patreon is probably the best way to help me keep the project going.

Also, let me know if you have any suggestions or feedback on this. Trying to find a way to monetize my work was not something I ever imagined doing, but I really hope you see it as a way to keep improving the project, and not as a negative step.

Thank you so much for being part of this amazing community, your support will always makes a huge difference! ❤️

I want to highlight that on the GitHub page, in the Discussions section, you can share and discover some amazing YAML examples from the community. Go check it out! Some of the creations are absolutely incredible!

And if you are interested I've opened a Subreddit for Bubble Card where I post my progress on the project. Here it is:

🍻