Set Dashboard Resource
ha_config_set_dashboard_resourceAdd custom cards, modules, or CSS styles to your Home Assistant dashboard by providing inline code or an external URL.
Instructions
Create or update a dashboard resource (inline code or external URL).
Provide exactly one of:
content: Inline JavaScript or CSS code (embedded in the resource URL as a data: URI — no file storage or external hosting involved)
url: External resource URL (/local/, /hacsfiles/, or https://...)
INLINE MODE (content=):
Custom card code written inline
CSS styling for dashboards
Self-contained files up to ~128KB
URLs are deterministic (same content = same URL)
Content must be self-contained: a data: URI has no base URL, so relative imports inside a module and relative url() references inside CSS cannot resolve (use fully-qualified URLs instead)
If Home Assistant is behind a reverse proxy that injects a Content-Security-Policy without 'data:' in script-src/style-src, the browser blocks these resources: this call still succeeds and the card simply never renders. Register the code as a file and use url='/local/...' on such a deployment. (HA itself ships no CSP.)
Supports 'module' and 'css' types only (not 'js')
URL MODE (url=):
Files in /config/www/ directory (/local/...)
HACS-installed cards (/hacsfiles/...)
External CDN resources (https://...)
Supports all types: 'module', 'js', 'css'
RESOURCE TYPES:
module: ES6 JavaScript modules (recommended for custom cards)
js: Legacy JavaScript files (older custom cards, url mode only)
css: CSS stylesheets (themes, global styles)
EXAMPLES:
Inline custom card:
ha_config_set_dashboard_resource(
content="""
class MyCard extends HTMLElement {
setConfig(config) { this.config = config; }
set hass(hass) {
this.innerHTML = <ha-card>Hello ${hass.states[this.config.entity]?.state}</ha-card>;
}
}
customElements.define('my-card', MyCard);
""",
resource_type="module"
)
Add custom card from www/ directory: ha_config_set_dashboard_resource( url="/local/my-custom-card.js", resource_type="module" )
Add HACS card (after installing via ha_manage_hacs(action='download')): ha_config_set_dashboard_resource( url="/hacsfiles/lovelace-mushroom/mushroom.js", resource_type="module" )
Update existing resource: ha_config_set_dashboard_resource( url="/local/my-card-v2.js", resource_type="module", resource_id="abc123" )
Note: After adding a resource, clear browser cache or hard refresh (Ctrl+Shift+R) to load changes.
Input Schema
| Name | Required | Description | Default |
|---|---|---|---|
| url | No | URL of the resource. Can be: /local/file.js (www/ directory), /hacsfiles/component/file.js (HACS), https://cdn.example.com/card.js (external). Mutually exclusive with content. | |
| content | No | JavaScript or CSS code to host inline (max ~128KB). The code is embedded directly in the resource URL as a data: URI - no file storage or external hosting involved. Mutually exclusive with url. Supports 'module' and 'css' types only. | |
| resource_id | No | Resource ID to update. If omitted, creates a new resource. Get IDs from ha_config_list_dashboard_resources() | |
| resource_type | No | Resource type: 'module' for ES6 modules (modern cards, default), 'js' for legacy JavaScript (url mode only), 'css' for stylesheets | module |
Output Schema
| Name | Required | Description | Default |
|---|---|---|---|
No arguments | |||