vacuum-card is a free, open source internet of things (iot) project written in TypeScript and released under MIT. It has 1,262 GitHub stars, 634 forks and 23 open issues, and was last pushed 9 days ago. On this registry it ranks #67 of 90 tracked projects in Internet of Things (IoT), with 5 head-to-head comparisons available.

What is vacuum-card?

Vacuum Card is an MIT-licensed custom Lovelace card for Home Assistant that displays the state of a robot vacuum and provides controls for it, aimed at Home Assistant users who want their vacuum represented on a dashboard rather than left without any dedicated card.

What it is

Vacuum Card is a TypeScript-built custom card for the Home Assistant Lovelace UI, distributed as a single vacuum-card.js file and registered in a dashboard as custom:vacuum-card. It lives in the Home Assistant ecosystem and is published through HACS, the Home Assistant Community Store, where it appears in the plugins tab under the name Vacuum Card; it can also be installed manually by placing the file in config/www and adding it as a JavaScript Module resource.

The problem it solves is specific: Home Assistant does not, by default, provide any card for controlling vacuum cleaners, so a vacuum entity has no dedicated visual representation or control surface on a dashboard. Vacuum Card replaces that gap with a purpose-built card that shows the vacuum's state and lets the user operate the robot directly from the Lovelace interface.

Key capabilities

  • Displays the state of any entity in the vacuum domain, with the friendly name and status text toggled independently through show_name and show_status.
  • Provides a toolbar of actions controlled by show_toolbar and configured through an actions object, which maps commands such as start to Home Assistant services with their own service_data — the README example calls xiaomi_miio.vacuum_clean_segment with segments: [16, 20].
  • Streams a live vacuum map from an entity in the camera domain via the map option, with the refresh interval set in seconds by map_refresh (default 5).
  • Shows battery state and icon from a sensor entity passed as battery_entity.
  • Renders per-state statistics through a stats object, covering attributes such as filter_left, side_brush_left, main_brush_left and sensor_dirty_left, each with a subtitle and unit.
  • Accepts a list of named shortcuts, each pairing a service call with an icon, such as a script.clean_living_room entry using mdi:sofa.
  • Takes an image path (PNG or SVG recommended) for the vacuum illustration, plus a compact_view mode that drops the image entirely.

Who uses it and how

  • Home Assistant users with an integrated robot vacuum who want start, pause and dock controls on a dashboard instead of a bare entity, including room-by-room cleaning through segment service calls.
  • Households with a camera entity that renders the vacuum's map, who stream it inside the card and rely on the periodic refresh to keep it current.
  • Owners tracking consumable life, using the stats block to watch remaining filter, side-brush, main-brush and sensor-cleaning time before ordering replacements.
  • Multi-room setups that expose one shortcut per area — living room, bedroom, kitchen — each firing a separate script from the card.
  • HACS users who prefer installing and updating the card through the store rather than copying files into config/www by hand.

Getting started

Install it through HACS by searching for Vacuum Card in the plugins tab, or download vacuum-card.js from the latest release into config/www and add it as a JavaScript Module resource at /local/vacuum-card.js. The card is then added to a dashboard as custom:vacuum-card with an entity from the vacuum domain.

How it compares

No paid products or comparable tools are named in the facts for this entry, so it stands alone in this registry as the only Home Assistant vacuum card listed here. It should be evaluated on its own terms: an MIT-licensed, community-maintained card distributed through HACS.

When to use it — and when not to

A self-hoster must already be running Home Assistant and be comfortable managing Lovelace resources, either through HACS or by placing the file in config/www and registering it manually. The visual editor does not yet support actions, shortcuts and stats, so anyone who wants a purely point-and-click configuration will have to fall back to YAML for those features. Users outside the Home Assistant ecosystem, or those wanting a card maintained as part of Home Assistant itself, should not pick it.

project readme (upstream, from github) — read inline

SWUbanner

Vacuum Card

npm version hacs GitHub Sponsors Patreon Buy Me A Coffee Twitter

Vacuum cleaner card for Home Assistant Lovelace UI

By default, Home Assistant does not provide any card for controlling vacuum cleaners. This card displays the state and allows to control your robot.

Preview of vacuum-card

Installing

💡 Tip: If you like this project, consider giving me a tip for the time I spent building this project:

Buy Me A Coffee

HACS

This card is available in HACS (Home Assistant Community Store).

Just search for Vacuum Card in plugins tab.

Manual

  1. Download vacuum-card.js file from the latest-release.

  2. Put vacuum-card.js file into your config/www folder.

  3. Add reference to vacuum-card.js in Lovelace. There's two way to do that:

    1. Using UI: Configuration → Lovelace Dashboards → Resources Tab → Click Plus button → Set Url as /local/vacuum-card.js → Set Resource type as JavaScript Module. Note: If you do not see the Resources Tab, you will need to enable Advanced Mode in your User Profile

    2. Using YAML: Add following code to lovelace section.

      resources:
        - url: /local/vacuum-card.js
          type: module
      
  4. Add custom:vacuum-card to Lovelace UI as any other card (using either editor or YAML configuration).

Usage

This card can be configured using Lovelace UI editor.

  1. In Lovelace UI, click 3 dots in top left corner.
  2. Click Configure UI.
  3. Click Plus button to add a new card.
  4. Find Custom: Vacuum Card in the list.
  5. Choose entity.
  6. Now you should see the preview of the card!

Sorry, no support for actions, shortcuts and stats in visual config yet.

Typical example of using this card in YAML config would look like this:

type: 'custom:vacuum-card'
entity: vacuum.vacuum_cleaner
actions:
  start:
    service: xiaomi_miio.vacuum_clean_segment
    service_data:
      entity_id: vacuum.vacuum_cleaner
      segments: [16, 20]
stats:
  default:
    - attribute: filter_left
      unit: hours
      subtitle: Filter
    - attribute: side_brush_left
      unit: hours
      subtitle: Side brush
    - attribute: main_brush_left
      unit: hours
      subtitle: Main brush
    - attribute: sensor_dirty_left
      unit: hours
      subtitle: Sensors
  cleaning:
    - entity_id: sensor.vacuum_main_brush_left
      value_template: '{{ (value | float(0) / 3600) | round(1) }}'
      subtitle: Main brush
      unit: hours
    - attribute: cleaning_time
      unit: minutes
      subtitle: Cleaning time
shortcuts:
  - name: Clean living room
    service: script.clean_living_room
    icon: 'mdi:sofa'
  - name: Clean bedroom
    service: script.clean_bedroom
    icon: 'mdi:bed-empty'
  - name: Clean kitchen
    service: script.clean_kitchen
    icon: 'mdi:silverware-fork-knife'

Here is what every option means:

Name Type Default Description
type string Required custom:vacuum-card
entity string Required An entity_id within the vacuum domain.
battery_entity string Optional An entity_id within the sensor domain to display battery state and icon.
map string Optional An entity_id within the camera domain, for streaming live vacuum map.
map_refresh integer 5 Update interval for map camera in seconds
image string default Path to image of your vacuum cleaner. Better to have png or svg.
show_name boolean true Show friendly name of the vacuum.
show_status boolean true Show status of the vacuum.
show_toolbar boolean true Show toolbar with actions.
compact_view boolean false Compact view without image.
stats object Optional Custom per state stats for your vacuum cleaner
actions object Optional Override default actions behavior with service invocations.
shortcuts array Optional List of shortcuts shown at the right bottom part of the card with custom actions for your vacuum cleaner.

stats object

You can use any attribute of vacuum or even any entity by entity_id to display by stats section. You can also combine attribute with entity_id to extract an attribute value of specific entity:

Name Type Default Description
entity_id string Optional An entity_id with state, i.e. sensor.vacuum.
attribute string Optional Attribute name of the stat, i.e. filter_left.
value_template string Optional Jinja2 template returning a value. value variable represents the entity_id or attribute state.
unit string Optional Unit of measure, i.e. hours.
subtitle string Optional Friendly name of the stat, i.e. Filter.

actions object

You can defined service invocations to override default actions behavior. Available actions to override are start, pause, resume, stop, locate and return_to_base.

Name Type Default Description
service string Optional A service to call, i.e. script.clean_bedroom.
service_data object Optional service_data for service call

shortcuts object

You can defined custom scripts for custom actions i.e cleaning specific room and add them to this card with shortcuts option.

Name Type Default Description
name string Optional Friendly name of the action, i.e. Clean bedroom.
service string Optional A service to call, i.e. script.clean_bedroom.
target object Optional A HassServiceTarget, to define a target for the current service call.
icon string Optional Any icon for action button.
service_data object Optional service_data for service call

Theming

This card can be styled by changing the values of these CSS properties (globally or per-card via card-mod):

Variable Default value Description
--vc-background var(--ha-card-background, var(--card-background-color, transparent)) Card background.
--vc-primary-text-color var(--primary-text-color) Vacuum name, stats values, etc.
--vc-secondary-text-color var(--secondary-text-color) Status, stats units and titles, etc.
--vc-icon-color var(--secondary-text-color) Colors of icons.
--vc-toolbar-background transparent Toolbar background (transparent to avoid stacking).
--vc-toolbar-text-color var(--secondary-text-color) Color of the toolbar texts.
--vc-toolbar-icon-color var(--secondary-text-color) Color of the toolbar icons.
--vc-divider-color var(--entities-divider-color, var(--divider-color)) Color of dividers.
--vc-spacing 10px Paddings and margins inside the card.

Styling via theme

Here is an example of customization via theme. Read more in the Frontend documentation.

my-custom-theme:
  vc-background: '#17A8F4'
  vc-spacing: 5px

Styling via card-mod

You can use card-mod to customize the card on per-card basis, like this:

type: 'custom:vacuum-card'
style: |
  ha-card {
    --vc-background: #17A8F4;
    --vc-spacing: 5px;
  }
  ...

Animations

I've added some animations for this card to make it alive. Animations are applied only for image property. Here's how they look like:

Cleaning Docking
Cleaning anumation Returning anumation

Supported languages

This card supports translations. Please, help to add more translations and improve existing ones. Here's a list of supported languages:

  • English
  • Українська (Ukrainian)
  • Deutsch (German)
  • Français (French)
  • Italiano (Italian)
  • Nederlands (Dutch)
  • Polski (Polish)
  • Русский (Russian)
  • Español (Spanish)
  • Čeština (Czech)
  • Magyar (Hungarian)
  • עִבְרִית (Hebrew)
  • Português (Portuguese)
  • Português Brasileiro (Brazilian Portuguese)
  • Svenska (Swedish)
  • Norsk bokmål (Norwegian)
  • Norsk nynorsk (Norwegian)
  • Dansk (Danish)
  • 한국어 (Korean)
  • Suomi (Finnish)
  • Català (Catalan)
  • 正體中文 (Traditional Chinese)
  • Việt Nam (Vietnamese)
  • Lietuvių (Lithuanian)
  • Română (Romanian)
  • Slovensky (Slovak)
  • 简体中文 (Simplified Chinese)
  • 日本語 (Japanese)
  • Your language?

Supported models

This card relies on basic vacuum services, like pause, start, stop, return_to_base, etc. It should work with any robot vacuum, however I can physically test it only with my own robot vacuum.

If this card works with your vacuum cleaner, please open a PR and your model to the list.

  • Roborock S8 (MaxV Ultra, Ultra Pro), S7 (MaxV), S6 (MaxV, Pure), S5 (Max), S50, S4 (Max), E25, E4, Q5 Pro, Qrevo S
  • Mijia Robot Vacuum Cleaner 1C (STYTJ01ZHM)
  • Xiaomi Mi Robot (STYJ02YM), Mi Robot 1S, Mi Roborock V1 (SDJQR02RR), Mijia 1C, Mi Robot Vacuum-Mop P, Robot Vacuum E10
  • Roomba 670, 675, 676, 697, 960, 980, 981, i3, i7+, e5, S9, s9+, j7
  • Braava M6
  • Dyson 360 Eye
  • Neato D7, D6, D4
  • Shark IQ
  • Eufy Robovac 30c, Robovac 35c, Robovac 15C Max, Robovac L70 Hybrid, Robovac X8, Robovac X8 Hybrid, Robovac G40
  • EcoVacs T9 AIVI, Deebot 950, Deebot OZMO T8 AIVI, Deebot N79, Deebot N8, Deebot N8+, T9 AIVI, Deebot T20 Ombi, Deebot X8 PRO OMN
  • Dreame Z10 Pro, L10 Pro, D9, F9
  • 360 S7 Pro
  • KaBum! Smart 500
  • Honiture Q6 Lite
  • Neabot NoMo N1 Plus
  • Kyvol E31
  • Setti+ RV800
  • Your vacuum?

Development

Want to contribute to the project?

First of all, thanks! Check contributing guideline for more information.

Inspiration

This project is heavily inspired by:

  • MacBury Smart House — basically, this project is a refinement of MacBury's custom card.
  • Benji vacuum card — this is where I noticed this vacuum card design for the first time.

Huge thanks for their ideas and efforts 👍

License

MIT © Denys Dovhan

Frequently asked questions

Is vacuum-card free to use?

vacuum-card is open source under the MIT licence. There is no licence fee and no seat count — you can self-host it or, where the project offers one, pay a vendor for a managed version instead.

What does vacuum-card do?

Vacuum cleaner card for Home Assistant Lovelace UI

What is vacuum-card written in?

vacuum-card is primarily written in TypeScript. Its source is publicly available at https://github.com/denysdovhan/vacuum-card, and it has 1,262 GitHub stars.