SMARTi watermark
Drag & Drop Card Wiki · Section 05.7

Packages

A comprehensive and user-friendly guide to creating modern, polished, and fully responsive Home Assistant dashboards using the Drag & Drop Card. This wiki combines clear explanations, practical real-world configuration examples, step-by-step walkthroughs, and visual references where they add the most value — making it easy for both beginners and advanced users to design powerful and visually appealing dashboards.

12 sections Config examples HADS-ready exports
Demo focus
Drag, resize, snap, export.
Add screenshots from admin to turn this section into a richer visual guide.

Packages

Packages let you create and manage Home Assistant YAML directly from the Drag & Drop Card dashboard settings.

This feature is meant for dashboard-related Home Assistant logic: helpers, scripts, automations, template sensors, and custom YAML that belong naturally together with the dashboard you are building. Instead of keeping all of that logic scattered across different places, Packages gives you one place to define the backend pieces your dashboard needs.

A package is not a visual card. It does not appear on the canvas by itself. Instead, it creates or stores Home Assistant YAML that can support the cards on your dashboard.

For example, you might use Packages to create an input boolean for a dashboard mode, a script for a scene button, an automation for a panel action, or a template sensor that combines several entities into one cleaner value.

Packages are saved together with the Drag & Drop Card layout. When backend package sync is supported, enabled package entries can also be synced to Home Assistant as package YAML files.

What You Can Create

Packages currently includes shortcuts for common Home Assistant building blocks.

  • Automation creates a Home Assistant automation template with alias, id, trigger, condition, and action sections.
  • Script creates a reusable Home Assistant script that can be called from buttons, cards, automations, or services.
  • Input boolean creates a toggle helper for dashboard modes, manual overrides, guest mode, night mode, or simple on/off states.
  • Input select creates a selectable helper with multiple options, such as Home, Away, Sleep, Movie, Cleaning, or custom dashboard states.
  • Input text creates a text helper that can store text values from automations, scripts, cards, or services.
  • Input number creates a numeric helper with min, max, step, and slider mode. This is useful for setpoints, counters, thresholds, brightness targets, or dashboard-controlled values.
  • Template sensor creates a Home Assistant template sensor. This is useful when you want to calculate or simplify values before showing them on the dashboard.
  • Custom YAML lets you write any Home Assistant package YAML that does not fit one of the guided shortcuts.

How Packages Work

Each package entry has a name, a feature type, a package file name, YAML content, and an enabled state.

The feature name is the friendly name shown in the Packages list. The feature type describes what kind of Home Assistant YAML the entry represents. For guided shortcuts, this is set automatically.

The package file name controls the YAML file name used by package sync. File names are normalized automatically so they are safe to use as package files.

The YAML content is the actual Home Assistant package YAML.

The enabled toggle lets you keep a package entry in the dashboard without treating it as active. This is useful when testing ideas or temporarily disabling a helper, script, or automation without deleting the YAML.

Editing YAML

Each package opens in a focused YAML editor.

The editor shows the package file name, line count, character count, and cursor position. It also validates the YAML while you edit, so obvious syntax issues can be caught before saving.

The editor expects normal Home Assistant YAML formatting. Use 2-space indentation.

Pressing Tab inserts two spaces. Pressing Cmd+S or Ctrl+S saves the package feature. If the YAML is invalid, the feature will not save until the issue is fixed.

Package Sync Diagnostics

The Check package sync button checks whether the backend can support package syncing.

Diagnostics can report whether package sync appears to be supported, which packages directory is detected, whether Home Assistant configuration references packages, and which Drag & Drop Card package files are detected.

Use this when packages are saved in the dashboard but do not appear to become active in Home Assistant.

After changing packages, reload Home Assistant so new helpers, scripts, automations, sensors, and package-based entities are picked up.

Recommended Use

Use Packages for dashboard-owned logic.

  • A helper that controls which dashboard layer or mode should be active.
  • A script that runs when a dashboard button is pressed.
  • An automation connected to a wall panel action.
  • A template sensor that makes dashboard display values cleaner.
  • A set of input helpers used only by this dashboard.

Avoid using Packages as a replacement for your entire Home Assistant configuration. It works best when the YAML belongs directly to the dashboard experience.

Best Practice

Keep each package feature focused.

Use clear names such as Night Mode Toggle, Living Room Scene Script, Wall Panel Wake Automation, Energy Summary Sensor, or Dashboard Mode Select.

Use one package entry per logical feature instead of putting everything into one large custom YAML block.

Use Custom YAML only when the guided shortcuts are not enough.

Keep disabled package entries for experiments, but delete old drafts when they are no longer useful.

After saving package changes, reload Home Assistant before expecting new entities or services to appear.

Settings reference

Dashboard settingYAML / package fieldWhat it doesValue possibilities
Feature nameName fieldThe friendly name shown in the Packages list.Any clear text name.
Feature typeType fieldDecides what kind of Home Assistant package YAML the editor creates.Automation, Script, Input boolean, Input select, Input text, Input number, Template sensor, or Custom YAML.
Package file nameFile name fieldControls the YAML file name used by package sync.Safe YAML file name generated from the feature name or edited manually.
YAML contentYAML editorStores the actual Home Assistant package YAML.Valid Home Assistant package YAML.
EnabledEnabled toggleKeeps a package active or saved as an inactive draft.On or off.
Check package syncDiagnostics actionChecks whether backend package sync appears to be available and configured.Run manually from the Packages area.

Troubleshooting

If a helper or sensor does not appear, reload Home Assistant first.

If package sync does not work, run Check package sync.

If diagnostics say package sync is unknown or unsupported, update the Drag & Drop Card backend integration.

If YAML does not save, check the validation message in the editor.

If the package is saved but not active, make sure the feature is enabled.

If Home Assistant does not load the package, confirm that packages are enabled in the Home Assistant configuration.

Image slotAdd screenshots of the Packages list, YAML editor, validation message, and sync diagnostics.
Last updated 2026-05-27.