Noting that while Browser Mod borrows the Home Assistant Sidebar settings dialog, it stores the setting in Browser Mod store and sets on Browser load for Global/Browser/User. If a user themself has used the new Home Assistant method outside of Browser Mod, you will have no Frontend way to clear, except if that user is an admin and you login as that user and go to Browser Mod Sidebar settings area, where there will be a warning and clear button. This is due to Home Assistant providing no way to query another users settings, only the current user.
1 Like
Does Browser Mod need a kill switch for Frontend settings
With so many options, and the new Default action possibly allowing to get yourself in a knot if you apply Globally, it is proposed to have a kill switch for Frontend settings. i.e. http://localhost:8123/?noBrowserModFrontendSettings.
As there may be scenarios where you use Browser Mod, that we have not considered, does this proposal meet merit or not. Thomas and I believe so and there is a current PR ready for the next version.
If you have any thoughts on this, please share. 
yes that would be a very important thing to implement imho. Thanks for considering that.
With heavy impacters like this, it is important to be able to delete its impact completely with the touch of a single button.
make it simpler though and have a peek at Kiosk-mode plugin, which uses ?disable_km
so, suggesting ?disable_browser_mod to be as short and simple as possible
Super charge Browser Defaults with Default action
There have been requests across the years for different actions based on Browser attributes. For example, have a default view based on device width. To assist with allowing for various defaults, the Default action Frontend setting was introduced in Browser Mod version 2.4.0.
A simple example uses an action to navigate to a view, which you could set against a known User or Browser.
action: browser_mod.navigate
data:
path: /my-dashboard/second-view
But what if you wish to perform something more dynamic for all your Browsers, or for a User who may be on different devices?
See the complete Super charge Browser Defaults with Default action wiki article for full write up of a script solution you can take an extend for your own needs.
Interesting thought. The kill switch would not disable all Browser Mod functionaility, just the Frontend settings. So a short key may be confusing 
right, I didnt understand that. I which case your wording is precise 
Iād still suggest/prefer using disable over no though, as no to my eyes always indicates Number first when used in an abbreviation type of syntax like this.
Aware it isnt in this case, but it could be taken as such apparently.
Anyways, great addition, please keep up the heavy pace your lifting there.
1 Like
I like disable. 
1 Like
Sidebar settings 2.4.0 and Home Assistant 2025.6
A quick note to let you know that in some circumstances you may see the old Edit mode instructions for Sidebar settings. If you do, switch to another panel and then back to Browser Mod panel. An internal refresh is not taking place when it should. Only proceed to add/edit settings when you donāt see the old Edit mode instructions.
This will be fixed in the next release.
Browser Mod 2.4.1-beta.3 is available for testing
Notable features / fixes.
- Header icons for popups
- Fix
media_playerinteraction requirements for Browsers. Also addingmedia_playerattributesvideo_interaction_requiredandaudio_interaction_required, which will be true if that Browser requires interaction to be able to play video/audio. So you can automate based on these if you wish.
1 Like
Coming back from GitHub Issue that I posted there regarding card_mod in browser_mod, my requirement is to:
- set different color other than the primary-color as default to popupās via theme file as well overwrite that value on demand for specific popup with another color or transparentā¦
- Customize the default padding on each popup via theme as well as individually similarly
- I donāt want title in some/all popups. But if removed, the top/ bottom padding is not aligned. is there anything I can do.
Here is individual browser_mod.popup config example that I am using currently.
tap_action:
action: >
[[[ if (variables.state == '0') return 'none'; else return 'fire-dom-event'; ]]]
browser_mod:
service: browser_mod.popup
data:
title: >
[[[ return states[variables.entity].attributes.friendly_name || '??'; ]]]
size: classic
dismissible: true
card_mod:
style: |
ha-dialog {
--mdc-dialog-min-width: 280px !important;
--mdc-dialog-max-width: 345px !important;
--mdc-dialog-min-height: 150px !important;
--mdc-dialog-max-height: 600px !important;
z-index: 9999 !important;
position: fixed !important;
}
.content {
width: auto !important;
height: auto !important;
}
content: >
................
theme.yaml with browser_mod specific variables referred from here
It seems most of these not working with browser_mod v2 or may be i am doing mistake 
not sure!
#browser_mod.popup
dialog-backdrop-filter: blur(0.5em) brightness(0.75)
popup-background-color: rgba(34,38,39,0.9) # NOT WORKED
popup-border-width: 1px
popup-border-radius: 2.5em
popup-padding-x: 30px # NOT WORKED
popup-padding-y: 30px # NOT WORKED
popup-min-width: 280px # NOT WORKED
popup-max-width: 345px # NOT WORKED
The browser_mod repo seems missing advanced styling informations. Please help me finding right workaround or any documentation that really helps.
Thanks,
Sam
I have tested your theme and these are working for me. Are you reloading themes between changes? We need to confirm this before working through your other requests. I also note your theme online is different than what you posted here.
Advanced styling is beyond Browser Mod. The most Browser Mod does is to set some standard sizes for the popup, which can be easily modified by straightforward styling like you have shown in your yaml code.
WIth some more time to look at this I have some further findings. I have provided reasons and theme stylings you can use to get to your desired results. As for your request for advance styling techniques, we would be happy to take a Wiki from anyone who has styling advice to give. 
Reason: This can only work for markdown card with text_only: true which is what you get if you select text only in popup card UI.
Theme Styling:
simple:
popup-background-color: red
#mdc-text-field-fill-color: grey
card-mod-theme: simple
card-mod-more-info-yaml: |
.: |
div.buttons {
background-color: var(--popup-background-color) !important;
--divider-color: rgba(0,0,0,0);
}
ha-dialog $: |
div.mdc-dialog__surface {
background-color: var(--popup-background-color) !important;
}
ha-dialog .container * $: |
ha-card {
background-color: var(--popup-background-color) !important;
}
ha-dialog .container * $ * $: |
ha-card {
background-color: var(--popup-background-color) !important;
}
Override in Popup:
ha-dialog {
--my-popup-background-color: blue;
}
Important to note that there may be any sort of card in the popup container, hence the two card-mod * selectors, for single and stacked cards (e.g. vertical-stack). I have tested this for Markdown (non text-only) and Button card both individualy and in a vertical-stack. Also to note is that if you use form fields on popups, they have their own background colour variable --mdc-text-field-fill-color.
Reason:
These Browser Mod variables are only applicable for external padding dialog in size: wide (popup-padding-x) and size: fullscreen (popup-padding-y). They do nothing else.
Theme Styling:
simple:
popup-padding-x: 30px
popup-padding-y: 30px
card-mod-theme: simple
card-mod-more-info-yaml: |
ha-dialog $: |
div.mdc-dialog__surface {
padding: var(--padding-x) var(--padding-y);
}
Override in Popup:
ha-dialog {
--popup-padding-x: 20px;
--popup-padding-y: 20px;
}
Reason:
These are for standard desktop size but not used for media query @media all and (max-width: 450px), all and (max-height: 500px) which I expect may be the size you are testing given the sizes you have provided. Also mdc dialog style overrides max-with below 592px with the style max-width: calc(100vw - 32px); so you need to override on .mdc-dialog__surface. I have tested that the stylings do apply by looking at the inspector, though I did not have time to see how the browser used min-width and max-width e.g. From MDN - The elementās width is set to the value of min-width whenever min-width is larger than max-width or width.
Theme Styling:
simple:
popup-min-width: 280px
popup-max-width: 345px
card-mod-theme: simple
card-mod-more-info-yaml: |
ha-dialog $: |
div.mdc-dialog__surface {
max-width: var(--popup-max-width) !important;
min-width: var(--popup-min-width) !important;
}
Override in Popup:
ha-dialog {
--popup-min-width: 300px;
--popup-max-width: 400px;
}
1 Like
Browser Mod 2.4.1 has been released
Notable features / fixes.
- Header icons for popups
- Fix
media_playerinteraction requirements for Browsers. Also addingmedia_playerattributesvideo_interaction_requiredandaudio_interaction_required, which will be true if that Browser requires interaction to be able to play video/audio. So you can automate based on these if you wish.
1 Like
Can please somebody tell me why my tap_action opens the more_info popup (of my entity āpopup_card_opener_alarmmeldungā) in all registered browsers instead of just the current browser? I have tried various other options like browser_id: THIS, but it did not helpā¦
type: entity
entity: sensor.raspberrymatic_sv_alarmmeldungen
tap_action:
action: perform-action
perform_action: browser_mod.more_info
target: {}
data:
entity: input_button.popup_card_opener_alarmmeldung
ignore_popup_card: false
The answer may lay on this sentence āA server call will perform the service on ALL REGISTERED BROWSERS.ā. But i do not know what i should change to get the popup opens just on the current browser?
You need to make the call a Browser Call by using fire-dom-event. Check out the documentation.
The difference is that when using standard actions they are always sent to the server to process. Using fire-dom-event allows Browser Mod to process locally in the Browser. If you will only use Browser Mod services, you donāt need to specify browser_id. You can also call regular actions either directly if as part of a sequence. This is when you can pass browser_id: THIS which will then be available to the action/script that is called.
Thank you.
I have seen that but it seemed an overkill to me, to have 3 different things to open a popup with a script like this:
In my case:
- an entity card which has a tap_action fire-dom-event
- a script which will be called
- a custom:popup-card which is called from the script
I just want to open the popup-card on click.
I have just tried std. like this, but it does not work:
type: entity
entity: sensor.raspberrymatic_sv_alarmmeldungen
tap_action:
action: fire-dom-event
perform_action: browser_mod.popup
data:
entity: input_button.popup_card_opener_alarmmeldung
ignore_popup_card: false
Sorry but the documentation is really confusing in this part. There is not any example of how we can open a popup card with fire-dom-event.
Edit: Ok this has worked:
tap_action:
action: fire-dom-event
browser_mod:
service: browser_mod.more_info
data:
entity: input_button.popup_card_opener_alarmmeldung
Thank you!
1 Like
Hi, there is also the standard more-info action. Also for an easier way to have a popup, look at custom:popup-card which browser Mod provides.
If you do want to use Browser Mod services locally you need to use fire-dom-event as there is no other way in Home Assistant to achieve something like this. It may seem a few steps for so simple action, but once you have used a few times you get used to the structure for using Browser Mod services locally.
Browser Mod 2.4.3 released
Browser Mod 2.4.3 has the following features and fixes. The Browser Entity variables feature means no more additional templating in scripts to get Browser Snesor entity_id to use in scripts.
New Features
- Add activityType attribute to Activity sensor. While Activity is detected, activityType attribute will be one of
userInteractionorfulyOnMotion. After the activity cooldown actvityType will revert tonone. - Browser entity variables available for Frontend settings templates and for adding to action calls via
browser_entities: THIS.
Fixes
- Fix BrowserID edit field display on small size screens after Frontend Home Assistant style change in 2025.7.
- Donāt require audio interaction when media player disabled by user.
- Only trigger activity on select fullyKiosk events.
Full Changelog: Comparing v2.4.2...v2.4.3 Ā· thomasloven/hass-browser_mod Ā· GitHub
EDIT: (2025.07.27) Update from Beta to Release
6 Likes
Browser Mod 2.4.4 now released
Includes update to use ha-button rather than mwc-button which is being dropped in Home Assistant 2025.8 with button updates. This upate also allows to set the variant and appearance of popup buttons.
EDIT: (2025.08.07) Updated from Beta to Release.
Iām trying to access the browser mod panel in my instance, either through /browser-mod or finding it in the sidebar. I installed it via HACS, tried to remove it and reinstall, but it doesnt show. I havent touched it in a while, so Iām not sure exactly when it broke. When trying to add/remove from integrations, I cant find browser_mod, but neither can I add it because it says single_instance_allowed. Iāve also tried to add browser_mod: to configuration.yaml , but that didnt do anything.
Installation method
Home Assistant OS
Core
2025.8.1
Supervisor
2025.08.1
Operating System
16.1
Frontend
20250811.0
