Tutorials: How to develop a custom card and ship HACS repositories?

Hello all,

cards are the core feature of the HA frontend. It is surprisingly hard, to get started with the development of a custom card. The official documentation is sparse. A boilerplate card on GitHub is somewhat outdated and the project is quite inactive. Seemingly there is no vivid community of card developers on discord, too. Really, I am surprised taking into account that Home Assistant is one of the big players in home automation. Tickets addressing the gaps in the documentation on GitHub get half-hearted closed without getting an improvement.

Now, it doesn’t help to complain. Make it better! So I started a series of tutorials addressing card development. So far it does cover what I find in the official documentation with more text and images.

In one of the next steps will be to show how you can ship the cards as HACS repositories. That’s one reason I decided to bundle each tutorial as a GitHub repository.

I now published the first three of the tutorials: Home Assistant Tutorials · GitHub

For sure people can only make use of them, if they know about. Leave some stars. Tell about.

If you like to provide tutorials in the same format, please join the club. It is set up as an organisation on Github.

27 Likes

Today I did reach an important milestone in the row of tutorials: How to ship the card with as a custom HACS repository.

Meanwhile there are seven tutorials done.

01. Setting up the development environment

  • how to use the container of the core developers

02. Hello world card

  • how to get some hello world output from a card
  • how to define the card as a custom Element of HTML
  • how to add the card as a new resource

03. Hello world card plus

  • how to assist the setup with error messages
  • how to provide a default configuration for the card
  • how to add the card to the visual selection

04. Plain vanilla javasript toggle card

  • how to do an interactive toggle card with plain vanilla javascript
  • how to create the toggle helper entity
  • how to organize the class
  • how to encapsulate CSS by use of a prefix (BEM inspired)
  • how to read and write from/to the hass object (full roundtrip)
  • how to bind the card to the event callback

05. Toggle card with shadow DOM

  • how to attach a shadow dom inside the constructor
  • how to clean up the lifecycle
  • how to get rid of the prefixes
  • how to migrate from BEM methodology to nested CSS modifiers

06. Toggle with graphical card configuration (vanilla js)

  • how to create and organize the class of the editor
  • how to register the editor
  • about the lifecycle of the editor
  • how to implement minimal requirements

07. Toggle card to hacs

  • how to install HACS
  • how to layout the Github repository for a custom HACS card
  • how to use the HACS repository
9 Likes

08. Toggle card with a toolchain

  • how to install nodejs and npm into the development container
  • how to update them to recent versions
  • how to use npm (the basics)
  • how to install Parcel
  • how to setup and organize the projects layout
  • how to inline HTML and CSS files
3 Likes

09. Toggle card with Lit

  • what Lit is
  • how to install Lit with NPM
  • how it differs from vanilla javascript
  • how to use it for the card editor
  • how to use it for the toggle card
  • how to keep the footprint small
4 Likes

10. Toggle card with TypeScript

  • how to install the required tools for TypeScript
  • how to set up the configuration files
  • how to migrate the code to TypoScript
  • how to enrich the code with typing
  • how to import some interfaces for custom card development
3 Likes

Hello i want to ask in the second example (02. Hello world card) how can i remove the title?

This is gold! Thanks.
- Ingrid