Home Assistant’s to-do lists have quietly become how our house runs its shopping, and I
wanted to see them the way we actually think about them: a few lists side by side, with
items moving between them as plans change. So I built a card for it. It has earned its
place here, so I have tidied it up and put it out in case it is useful to anyone else.
Todo Kanban Card puts any number of todo entities side by side as lanes, and lets
you drag items from one lane to another. That last part is where most of the work went —
there is no service for moving an item between lists, so the card handles it itself.
What it does
- Drag an item to another list — the reason the card exists.
- Drag within a list to reorder (a real
todo/item/move, so the order sticks). - Tap an item to edit it in place: rename, due date, note, delete — and a Move to row
that does the same job as a drag, for when a drag is not practical. - Add and tick off items, with a foldaway “done” section per lane.
- Lanes fold away when they are empty, so a five-lane board stays readable.
- Live: one
todo/item/subscribeper lane, so the board follows changes made from the
companion app, another tablet, or an automation, with no refresh.
It is not only for shopping
The lanes are just to-do entities, so anything you would put on a board works. There are
worked examples in the repo for a Backlog / Doing / Done project board, chores by
room, and a meal plan with a lane per day — where the point is dragging Thursday’s
dinner to Saturday instead of retyping both.
Lanes are laid out with auto-fit, so they use as many columns as will fit and stack
into one on a phone. Nothing to configure and no separate mobile layout.
There is a visual editor
You do not have to touch YAML. Add the card from the picker and you get a form: which
lists, what each is called, an icon and a colour for each, plus the card-wide options.
The pickers are Home Assistant’s own, so the entity list is filtered to your todo
entities and the colours are your theme’s palette.
Installing
Not in the default HACS store yet — the submission is in the queue — so for now add it as
a custom repository:
HACS → ⋮ (top right) → Custom repositories → https://github.com/DennisdeBest/HaTodoKanbanCard, category Dashboard → Add, then download it.
Or use the button:
It works with any todo provider — Local To-do, CalDAV, Google Tasks, Shopping List —
though moving an item needs the source list to allow deleting and the target to allow
adding. Local To-do does everything.
MIT licensed, no build step and no dependencies: it is one plain JavaScript file you can
read.
What I would like feedback on
It is new, and it has really only been used in one house, so:
- Touch dragging. It works on my phone and my tablet. Phones vary enormously in how
they handle pointer events, and this is the part most likely to behave differently for
you. If a drag does not start, or the page fights you while dragging, please say so —
and note that the Move to button in the item editor does the same job if dragging
misbehaves. - Other to-do providers. I have only really exercised it against Local To-do.
- Bigger boards. Five or seven lanes on a tablet is the layout I am least sure about.
Bug reports and ideas very welcome on the issue
tracker — there are templates
that ask for the card version, your YAML and whether it happened on a phone or a desktop,
which are the three things that make a card problem quickly fixable.