Sortable List Card

Installation

This card is not in the default HACS store — you need to add it as a custom repository first. Manual installation is also supported.

Custom repository required
Sortable List Card is not part of the default HACS index. Add the repository URL below as a Custom repository in HACS to install it.

HACS (custom repository)

  1. In Home Assistant, open HACS.
  2. Click the ⋮ menu in the top-right and choose Custom repositories.
  3. Add the repository URL https://github.com/flixlix/sortable-list-card with category Dashboard, then click Add.
  4. Search for Sortable List Card in HACS and click Download.
  5. Reload your dashboard / clear browser cache.

The button below opens the repository inside HACS and pre-fills the dialog if you have My Home Assistant set up.

Open in HACS

Manual installation

Download sortable-list-card.js from the latest release and copy it into config/www/.

If you configure dashboards via YAML, register the resource:

yaml
lovelace:
  resources:
    - url: /local/sortable-list-card.js
      type: module

If you prefer the graphical editor: enable advanced mode in your user profile, go to Settings → Dashboards → ⋮ → Resources, click Add resource and paste:

text
/local/sortable-list-card.js
HACS users
When installed via HACS the path becomes /hacsfiles/sortable-list-card/sortable-list-card.js. HACS usually registers it automatically.

Create a helper to store the order

By default the card reads and writes the order to an input_text helper. Create one (Settings → Devices & Services → Helpers, or via YAML) before adding the card:

yaml
input_text:
  my_order:
    name: My order
    max: 255
    initial: alpha,beta,gamma
No entity needed
If you persist through a custom service (a script, for example) and don't need the order read back into the card, you can omit entity entirely.

Verify the install

  1. Reload your browser cache (hard refresh).
  2. Edit a dashboard and click Add card → Custom: Sortable List Card.
  3. Use the UI editor or paste the minimal config below.
yaml
type: custom:sortable-list-card
title: My order
entity: input_text.my_order
items:
  - key: alpha
    name: Alpha
  - key: beta
    name: Beta
  - key: gamma
    name: Gamma