Todoist card for Home Assistant Lovelace UI. This card displays items from selected Todoist project.

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

Just search for Todoist Card in HACS Frontend tab.

1. Download todoist-card.js file from the latest release.
2. Put todoist-card.js file into your config/www folder.
3. Add a reference to todoist-card.js in Lovelace. There's two way to do that:
   1. Using UI: Configuration → Lovelace Dashboards → Resources → Click Plus button → Set Url as /local/todoist-card.js → Set Resource type as JavaScript Module.
   2. Using YAML: Add the following code to lovelace section.

      resources:
        - url: /local/todoist-card.js
          type: module

4. Add custom:todoist-card to Lovelace UI as any other card (using either editor or YAML configuration).

This card can be configured using Lovelace UI editor.

1. Add the following code to configuration.yaml:

   sensor:
     - platform: rest
       name: To-do List
       method: GET
       resource: 'https://api.todoist.com/sync/v9/projects/get_data'
       params:
         token: !secret todoist_api_token
         project_id: TODOIST_PROJECT_ID
       value_template: '{{ value_json[''project''][''id''] }}'
       json_attributes:
         - project
         - items
       scan_interval: 30
   
   rest_command:
     todoist:
       method: post
       url: 'https://api.todoist.com/sync/v9/{{ url }}'
       payload: !secret todoist_api_payload
       content_type: 'application/x-www-form-urlencoded'

2. ... and to secrets.yaml:

   todoist_api_token: TODOIST_API_TOKEN
   todoist_api_payload: token=TODOIST_API_TOKEN&{{ payload }}

3. Replace TODOIST_API_TOKEN with your token and TODOIST_PROJECT_ID with ID of your selected Todoist project.

   You can get TODOIST_PROJECT_ID from project URL, which usually looks like this: https://todoist.com/app/project/TODOIST_PROJECT_ID

4. Reload configs or restart Home Assistant.
5. In Lovelace UI, click 3 dots in top left corner.
6. Click Edit Dashboard.
7. Click Add Card button in the bottom right corner to add a new card.
8. Find Custom: Todoist Card in the list.
9. Choose entity.
10. Now you should see the preview of the card!

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

type: 'custom:todoist-card'
entity: sensor.to_do_list
show_header: true
show_completed: 5
show_item_add: true
use_quick_add: false
show_item_close: true
show_item_delete: true
only_today_overdue: false

Here is what every option means:

Note that the completed tasks list is cleared when the page is refreshed.

• Circle marks selected task as completed.
• Plus "uncompletes" selected task, adding it back to the list.
• Trash bin deletes selected task (gray one deletes it only from the list of completed items, not from Todoist archive).
• Input adds new item to the list after pressing Enter.

MIT © Konstantin Grinkevich