Connectors
Connectors let you draw visual lines between cards on the Drag & Drop canvas.
They are useful when you want to show relationships, flows, dependencies, power paths, data movement, room connections, or status links between dashboard elements. A connector can be a simple static line, or it can become a live animated line that reacts to a Home Assistant entity state.
Connectors are part of the dashboard layout. They live behind or between cards, follow the current tab and layer context, and can be styled independently from the cards themselves.
What Connectors Are For
Use connectors when the dashboard needs to explain how things relate to each other visually.
- Power flow between solar, battery, grid, and house cards.
- A line from a room card to a climate, light, or sensor card.
- A visual path showing active media, ventilation, heating, or energy direction.
- A live status line that animates when an entity is on, open, charging, playing, heating, or above a numeric threshold.
- A subtle decorative link between related dashboard areas.
Creating a Connector
Connectors are created in Edit Mode. You can add a connector from the toolbar using Add Line, or drag from a card hook point to start a line directly from that card.
When drawing a connector manually, click points on the canvas to create the line path. Double-click, press Enter, or finish the line to create the connector.
If you drag from one card hook point to another card hook point, the connector can attach itself to those cards. Attached connectors can follow the card positions and keep the line connected when cards move.
Hook Points
Cards expose connector hook points around their edges and corners in Edit Mode. These hook points are used to connect a line to a specific side or corner of a card.
Hook points make connectors easier to keep clean, especially when cards are moved or resized.
Connector Editor
Click a connector in Edit Mode to open the connector editor. The connector editor has three main sections: Behavior, Appearance, and Shape.
Behavior
Behavior controls when the connector is active, whether it animates, and which direction the flow should move.
Entity lets you bind the connector to a Home Assistant entity. Active states defines which states should make the connector active. You can enter multiple states separated by commas, such as on,open,charging,>0.
A connector is active when its selected Home Assistant entity matches one of the active states. It is idle when the entity does not match, or when no active state is currently true.
Arrows and Flow
Arrows show direction. Use arrows when direction matters, such as power flow, data flow, air movement, water flow, or a process path.
Flow direction controls which way animated motion travels along the connector. Auto follows the connector's natural direction, Forward moves from first point to last point, and Reverse moves the other way.
Animation
Animate controls when the connector animation should run. Never keeps the line static. When active animates the line only when the entity state matches the active states. Always keeps the connector animated regardless of entity state.
For dashboards with many connectors, When active is usually the best choice. It keeps the dashboard calm until something important is happening.
Appearance and Shape
Appearance controls line style, thickness, arrow size, active color, inactive color, glow, and rounded corners.
Shape controls the connector path and stacking order. Bends are useful when a connector needs to route around cards. Layer order controls whether a connector sits behind or in front of other connectors.
Tabs and Layers
Connectors follow the current dashboard context. A connector belongs to the tab where it was created. If a connector is related to cards with layer assignments, it can follow that layer context as well.
Recommended Use
Use connectors sparingly. A few meaningful connectors can make a dashboard feel premium and easier to understand. Too many connectors can make the dashboard feel busy.
- Use connectors to explain real relationships.
- Use animation only when the state matters.
- Keep inactive colors subtle.
- Use active colors for clear status feedback.
- Use arrows only when direction matters.
- Keep line thickness consistent across similar connector types.
Settings reference
| Dashboard setting | YAML setting | What it does | Value possibilities |
|---|---|---|---|
| Connector list | responsive_connectors | Stores the connector definitions for the dashboard. | List of connector definitions and responsive connector data. |
| Entity | entity | Binds the connector to a Home Assistant entity state. | Home Assistant entity id or empty value. |
| Active states | active_states | Defines which entity states make the connector active. | Comma-separated or listed states such as on, open, playing, charging, >0. |
| Arrows | arrows | Shows direction on the connector. | None, start, end, both, or boolean style depending on version. |
| Flow direction | flow_direction | Controls which way animated movement travels along the line. | Auto, forward, or reverse. |
| Animate | animate_mode | Controls when connector animation runs. | Never, when active, or always. |
| Animation style | animation_style | Chooses the visual animation effect. | Flow, pulse, particles, flowing arrows, or pulse with arrows where supported. |
| Animation speed | animation_speed | Controls how fast the connector animation moves. | Number from slow to fast. |
| Line style | line_style | Controls the pattern or routing feel of the line. | Solid, dashed, dotted, smooth, or supported line style. |
| Thickness | thickness | Controls the width of the connector line. | Number. |
| Active color | active_color | Sets the connector color when it is active. | CSS color value. |
| Inactive color | inactive_color | Sets the connector color when it is idle. | CSS color value. |
| Glow | glow | Adds a soft glow around the connector. | true or false. |
| Rounded corners | rounded | Makes connector bends feel softer. | true or false. |
| Bend points | points | Stores the manual route points used to shape the connector. | List of connector points. |
| Layer order | z | Controls how this connector stacks against other connectors. | Number where supported. |
Troubleshooting
If a connector does not appear, make sure you are on the tab where it was created.
If a connector does not animate, check Animate, Entity, and Active states.
If a connector should react to an entity, confirm that the entity exists in Home Assistant and that the active state matches the real state value.
If a connector is hidden behind another connector, adjust its z-index or use Bring forward.
If a connector path looks wrong, select it in Edit Mode and adjust the bend handles.