I have been playing around with Home Assistant for just a little while now, and while I am impressed with what it does, I find the documentation and the examples to be less than helpful. One thing I wanted to do was simply add a “card” of web links to the UI. Since the Home Assistant interface (Lovelace) is web based you would think that this would be easy.
But Googling showed people asking how to do it but getting no clear, clean answers.
In Home Assistant you can add to the interface by adding “cards”. There are predefined cards for a lot of things, including one to embed a web page into the interface (as long as the page address is https:). But nothing as simple as adding a bunch of web links.
I was about to delve into how to make a custom card with programming (ugh!) when I notice a predefined card called “Markdown”.
Reading the fine print shows that it will allow you to add links to web pages. All you need to do is learn the Markdown language. Not what I wanted to do, learn/use yet another language. I already can code html. Fortunately there is an on-line converter from html to markdown.
And to make things easier, most of the links I wanted to add are in my browser bookmarks. So here is what I did.
I exported my bookmarks from Chrome by going to the Bookmarks manager and exporting.
Then I edited the exported file to clean up the html code. I had to add <br> tags to the end of the <href> tags and I removed all the html code except for the headers (<h1> and <h2> tags). When I had the html code cleaned I copied and pasted it into an online html to markdown converter (https://www.browserling.com/tools/html-to-markdown)
Now I had the markdown code. In Home Assistant I edited the dashboard and added the Markdown card.
Editing the “Markdown” card, I simply replaced the “Content” with my “Markdown” code and I got my card with links!
