Bubble Card 3

v3.1.0-rc.1

This version is the first stable release candidate! 🥳 If you are updating from a previous beta, here's the changelog of this new version:

Text scrolling speed fix:
Fixed an issue with the text scrolling effect speed in some cases.
Text scrolling layout:
Disabling the scrolling effect is not changing the line height anymore. #2048
Pop-up preview cropping fix:
Fixed an issue in the editor where a pop-up was cropped after opening the “more info” pop-up of an entity in the preview.
Keep Bubble pop-up open when opening “more info”:
When opening the “more info” pop-up of an entity (or any other HA pop-up) from a Bubble Card pop-up, the Bubble pop-up isn’t closed anymore. #2055
“Update cards in background” pop-up fixes:
Fixed multiple issues when “Update cards in background” is enabled in a pop-up.
Easier automatic row calculation toggle:
Automatic row calculation is now easier to enable when adding bottom sub-buttons on a card with rows that are already set. #2043
Sub-button group alignment fix:
In a sub-button group, the “Buttons alignment” setting is now respected in all cases. #2052
Sub-button group usage refinement:
Improved the sub-buttons groups feature to only use groups when a group is created with a mix of ungrouped sub-buttons. #2049
Select sub-button icon fix:
Sub-buttons using select menu were not always showing an icon anymore. #2050
Hold action context menu on touchscreen PC:
Hold actions doesn’t brings up the right click context menu on touchscreen PCs anymore. #1845
Editor UI polish:
Some minor styling, descriptions and structure improvements in the editor.
Dropdown opening direction fix:
Opening a dropdown close to the left side of the page or in a pop-up now opens it in the correct direction (I forgot to add this one in the previous changelog).

These past four months have been intense, and after two years working on this huge project, I still can’t believe I’m able to manage almost all of it on my own. Seeing my passion so strongly supported is incredibly motivating, and I have no plans to stop anytime soon ❤️

Thank you so much again for all your feedback on the previous betas! I’m still counting on you if you spot any new issues in this release (but please don’t 🙏).

Also, if you never installed a Bubble Card pre-release, all the steps to get it are explained below:

Tip

How to test this pre-release?

The easiest way is to click on the button below, or go to HACS, search for Bubble Card, and click on it. Then, click the three dots icon in the top-right corner and select "Redownload". You'll be able to choose the beta version under "Need a different version?". You can then change back to your previous version if needed.

And now, here’s the final (huge) changelog, combining all the new features and fixes from the previous betas (go grab a coffee):

Hi everyone!

I’m finally confident enough to release Bubble Card v3.1.0! And this new version is… well… once again… huge. You might want to read this one carefully 😄

This update was a real challenge for me, with many major new features and fixes that make Bubble Card more customizable, faster, and more fun to use! Also, thanks to a major change, the editor is now up to 100 times faster (for real!) on dashboards with many pop-ups! For many of you, this finally makes the editor fully responsive and much more enjoyable to use!

Bubble Card Tools

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 truly important to improve stability, reliability and make the whole system more future proof. Another benefit of moving to a custom component is that setup is now much easier, and if you already used the Module Store in the past, all your modules will be migrated automatically! You can even do it later since this is not a breaking change, but it is requested if you want to install new modules.

New "Sub-buttons only" card

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.

For module developers:
Please make sure to update your modules to support this card if needed. You can now even use the “All” setting to make this easier and future-proof.

New "Slider" sub-buttons

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.

Design your dream card ❤️

Here's the biggest part of this release, and also my favorite one! This version finally 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!

This release also brings new Slider layout options to control orientation, value placement, and inversion!

And more...

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.

My goal was to release the final version before the end of the year. The reason is also a very happy one, I will very (very) soon become a dad for the second time and I couldn’t be happier about that! ❤️ My development time will be limited for a while, so I worked harder than ever to release the best version of Bubble Card to date, and I truly hope you will love it!

But there is a lot more in this update, 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., if your sub-button is named "My sub-button" the class to target will be .my-sub-button), making it easier to apply custom styles to specific sub-buttons. Sliders sub-button can also be targeted with .bubble-sub-button-slider-x (index aligned with the sub-button).
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!
Slider layout options:
Added fill orientation (left, right, top, bottom), value position (right, left, center, hidden).
Invert slider direction:
Added optional inverted behavior where 100% fill equals the minimum value for sliders. #1968
Template conditions in modules:
Experimental support for Jinja template conditions directly inside modules that support conditions.
Numeric conditions in modules:
Modules can now evaluate numeric conditions. #1981
Improved object selector for modules
A new and better object selector replaces the default Home Assistant one in modules that use it (like Bubble Badges 2), shows changes live, and finally supports the attribute selector correctly.
“Enable unsupported modules” option in editor
Added a toggle in the Modules section to enable modules that aren’t yet marked as supporting certain card types (great for “Sub-buttons only” cards).
Sub-button pop-up toggle behavior
Pressing a sub-button that navigates to a pop-up now closes it when pressed again. #1999

✔️ Bug fixes and improvements

Editor responsive boost with many pop-ups
The editor is now up to 100 times faster on dashboards with many pop-ups (like my own dashboard), thanks to hiding pop-up content while editing! This change finally makes the editor fully responsive for everyone! #1936
All slider issues fixed:
Fixed all known slider responsiveness and functionality issues. Sliders now work reliably across all supported entity types.
Dropdown opening direction fix:
Opening a dropdown close to the left side of the page or in a pop-up now opens it in the correct direction.
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.
API limit warning in Module Store
When the GitHub API rate limit is reached after many refreshes, a warning is shown and cached content is displayed instead.
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.
Correct icon state for lock entities:
Icons for lock entities now change correctly based on their state.
Memory leak fix in sub-buttons:
A slight memory leak inside the sub-buttons system has been fixed for better performance.
Unnecessary text scrolling:
The text scrolling effect was still running in cases where it should have been disabled. This is now fixed.
Calendar event sorting:
Fixed ordering to handle both all-day and timed events correctly. PR #1937 by @nomis52.
Media player buttons:
Restored missing buttons in the media player card in some cases. #1930 #1846.
Custom styles templates:
Resolved a case where JS templates blocked the CSS declaration immediately following them. #1978.
Horizontal scrolling:
Fixed unwanted horizontal scrolling appearing on some cards.
Slider steps on release:
Respect the configured steps when releasing the slider so values snap correctly (finally!). #1607
Calendar gradient mask:
Tweaked styling for a cleaner gradient mask effect on the calendar card.
Global modules enabled across all cards
Global modules now correctly show as enabled (not greyed out) on all cards in the editor. #2027
Module Store filtering issues
Fixed some filtering problems in the Module Store so search results behave more reliably.
Modules editor UI fixes
Resolved an issue where the code editor panel could deform the layout.
Module Store version comparison issue
Fixed version comparison bugs in the modules editor.
Pop-up preview cropping fix:
Fixed an issue in the editor where a pop-up was cropped after opening the “more info” pop-up of an entity in the preview.
“Update cards in background” pop-up fixes:
Fixed multiple issues when “Update cards in background” is enabled in a pop-up.
Menu clarity in modules editor
The “Create new Modules” and “Import from YAML” menu now hides when “Import from YAML” is selected to avoid confusion.
Hold action context menu on touchscreen PC:
Hold actions doesn’t brings up the right click context menu on touchscreen PCs anymore. #1845
Editor UI polish:
Some minor styling, descriptions and structure improvements in the editor.
Various performance optimizations:
- Dashboards with a lot of custom styles and modules now use less CPU and memory.
- Faster dashboard loading.
- CSS caching for faster style processing.
- Optimized pop-up opening.
- Better memory management.

ℹ️ Bubble Card news

Over the past years, 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.

This is why I decided to create a Patreon as a way to offer something more for those who want to support me. A few days ago, I refreshed my Patreon with two new modules: Bubble Badges v2 (unlimited badges on any sub-button or the main icon) and Bubble Weather (animated weather backgrounds with daily/hourly forecasts). The custom dropdown module is still there if you want full control over labels, icons, and actions on select cards and sub-buttons.

I’m also finally happy with my own dashboard, built entirely with Bubble Card v3.1.0-beta and only new custom modules I've been working on for months! Like one that adds unique colors and styles to all cards, one for the weather, one for graphs, square cards, time... I’ll release more of these modules soon, with a detailed post on Patreon and a new YouTube video. I would love to know what you think!

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

I’ve been wanting to start my own YouTube channel for a while, focusing on tutorials around Home Assistant and Bubble Card, and I really hope you will enjoy my videos. Don’t hesitate to subscribe to help give my channel more visibility. Thank you in advance!

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!