Streamline Card

Templates are defined in the Home Assistant UI raw configuration editor or in your configuration files under the streamline_templates key. A template consists of a default section (optional) for variable defaults and a card section which defines the actual card configuration. Inside the card configuration, you use double brackets [[variable_name]] to create placeholders that will be filled by variables when the card is used.

streamline_templates:
  light_template:
    default:
      - icon: mdi:ceiling-light
    card:
      type: custom:bubble-card
      card_type: button
      button_type: "[[type]]"
      entity: "[[entity]]"
      name: "[[name]]"
      icon: "[[icon]]"
      tap_action:
        action: toggle
      hold_action:
        action: more-info

To keep your streamline_templates.yaml organized, you can use the standard YAML !include tag to reference external files. Paths are resolved relative to the file containing the !include tag.

Example structure:

streamline_templates.yaml:

light_template: !include templates/light_template.yaml
weather_template: !include templates/weather_template.yaml

templates/light_template.yaml:

default:
  - light_icon: mdi:ceiling-light
card:
  type: custom:bubble-card
  name: "[[room_name]] Light"
  icon: "[[light_icon]]"
  entity: "[[light_entity]]"

For beginners or quick setups, you can define templates directly in the dashboard's Raw Configuration Editor.

1. Open your dashboard.
2. Click the menu icon (⋮) and select Raw configuration editor.
3. At the very top of the file, add your streamline_templates block.

streamline_templates:
  my_light_template:
    default:
      - light_icon: mdi:ceiling-light
    card:
      type: custom:bubble-card
      name: "[[room_name]] Light"
      icon: "[[light_icon]]"
      entity: "[[light_entity]]"

To develop or contribute to Streamline Card, follow these steps:

1. Prerequisites: Install Node.js (v18+) and pnpm.
2. Clone the repo:

   git clone https://github.com/brunosabot/streamline-card.git
   cd streamline-card

3. Install dependencies:

   pnpm install

4. Configure Output (Optional): Create a .env.development.local file to specify where built files should go:

   TARGET_DIRECTORY=/path/to/your/homeassistant/www/streamline-card

5. Run Development Mode:

   pnpm dev

   This watches for changes and rebuilds automatically. If TARGET_DIRECTORY is set, it builds directly into your Home Assistant directory for live testing.

If you cannot use HACS, follow these steps to install manually:

1. Download the file: Download streamline-card.js from the repository.
2. Save to Home Assistant: Place the file in your <config>/www folder.
3. Add to Resources:
   • Open your dashboard and click the menu icon (⋮).
   • Select Edit dashboard.
   • Click the menu icon (⋮) again and select Manage resources.
   • Click Add resource.
   • URL: /local/streamline-card.js?v=1 (increment the version number v=X whenever you update the file to bypass browser cache).
   • Type: JavaScript Module.
   • Click Create.
4. Add to Dashboard: Refresh your browser, enter Edit dashboard mode, and add the Streamline Card.

The easiest way to install Streamline Card is through the Home Assistant Community Store (HACS).

1. Install HACS if you haven't already (follow instructions at hacs.xyz).
2. In your Home Assistant sidebar, go to HACS.
3. Search for Streamline Card.
4. Click on the card and click the Download button.
5. To use it, go to your dashboard, enter Edit dashboard mode, and search for Streamline Card in the Add card menu.

For managing many templates, use YAML files. This is the recommended method for advanced users.

1. Create a directory: Create /config/streamline_templates/ in your Home Assistant configuration directory.
2. Create template files: Add YAML files (e.g., light_template.yaml) inside that folder.
3. Register in Dashboard: In your dashboard's YAML configuration, include the directory using the !include_dir_named tag:

streamline_templates: !include_dir_named ../streamline_templates/

Automatic Loading Fallbacks: If you don't use !include_dir_named, the card automatically looks for a single streamline_templates.yaml file in these locations (in order):

1. /config/www/community/streamline-card/streamline_templates.yaml (HACS default)
2. /config/www/streamline-card/streamline_templates.yaml (Manual default)

The templateLoader performs background revalidation to check for changes in the remote YAML file. If the new templates differ from the currently loaded ones, a custom DOM event is dispatched. You can listen for this event to react to template changes (e.g., to re-render components).

Event Name: streamline-templates-updated
Detail: Contains the url of the template file that was updated.

window.addEventListener('streamline-templates-updated', (event) => {
  console.log('Templates updated from:', event.detail.url);
  // Trigger UI updates here
});

The streamline-card-editor provides a visual interface for configuring cards. The resulting configuration object follows this structure:

• type: Always streamline-card.
• template: The name of the selected template from streamline_templates.
• variables: A dictionary of key-value pairs corresponding to the [[variable_name]] placeholders in the template.
• grid_options: (Optional) Layout settings for the dashboard grid.
• visibility: (Optional) Visibility settings for the card.

When you change a template in the editor, the existing variables are cleared and reset to defaults to prevent configuration mismatch.

{
  "type": "streamline-card",
  "template": "example_tile",
  "variables": {
    "entity": "light.living_room",
    "icon": "mdi:lightbulb"
  },
  "grid_options": {
    "columns": 2
  }
}