Custom Card 101

So I want to write some custom cards. I am aware of the boilerplate card and I have went through the docs but I am really looking for an up to date walk through of writing your own custom card and the steps it takes. Sending in varibles to the card, using those in the card etc. If I have missed obvious sources I appoligize I have tried to search for this well before creating a post. I am not wanting to use the boilerplate because I want to understand all the workings of this process. It also seems that any time I make a change to my custom card .js file it doesn’t refresh cause HA is cacheing the old one. I need to use Chrome and disable cache.
Is this the only way etc. Thanks.

This seems to be a bit of an issue on how to begin in the community. The boilerplate has been very outdated and would give you more frustration than learning it, and it wasn’t maintained. I believe they just removed the link from the tutorial overview.

Someone has started what looks to be the backbones of a comprehensive tutorial:

That may get you started, and maybe you can contribute to the tutorial once you finish your journey.

2 Likes

Absolutely. I have been able to kind of reverse engineer a few things but thats not really a good way to learn as its more brute force. I also think there is an issue with the fact there are ways to do things if your in GUI mode and then ways to do things if your in YAML mode. That adds to the confusion.
Thanks for link I will take a look.

2 Likes

This is the best I have found so far, but the community would do itself a good service to provide more to people that are trying to learn.

1 Like

The leaders of the community are in the process of developing a HA Cookbook that is literally what you are suggesting. Please understand, it is a work in progress.

2 Likes

That is really great, thanks for sharing on the stale but still very pertinent thread. Will check it out and see if I can contribute.

1 Like

Thank you for this link also from my side.
Some nice additional info after reading the official dev-docs, that I would have missed otherwise. :slightly_smiling_face::+1:

1 Like