Apart from the webpage card, is there a card that lets me pull bookmarks (a file containing URLs) from an external source?
The webpage card introduces a scroll bar which makes it unsuitable.
Hard to advice not knowing what exactly you want to achieve… perhaps some screenshot of you got and is not working for you (scrollbars you mentioned)? What is the source of your bookmarks?
Now, without these details I see few options:
- use card mod to hide scrollbars on webpage card, perhaps something like:
card_mod:
style: |
ha-card {
overflow-y: hidden !important;
padding-top: 0px;
padding-botton: 0px;
}
- if you can somehow scrap these bookmarks to sensor (to list, json, or directly to attribute, assuming list is more than 255 characters to be used in state), you can use markdown card to display these bookmarks (and have them clickable) via templating its content.
Thanks, I like to replicate in HA something similar to my Newt Chrome Extension where beside each icon is a clickable URL, and yes, I can make the data available
- Will a JSON URL suffice?
- Must it be into a sensor?
- Do you have an example of the markdown card mentioned?
Thanks again
Yes, JSON or XML are the best formats, as these can be directly read into sensor or sensor attribute. Below are two examples of how I use markdown card to display dynamic data.
Fingbox sensor I use to display list of of all network devices in my LAN with their statuses. It is read as JSON via API from Fingbox, parsed to attribute of sensor and then displayed by markdown card. Here is source JSON as read from Fingbox via API:
{
"networkId": "wifi-C8B373606577",
"devices":
[
{
"mac": "A0:A3:B3:21:C1:60",
"ip":
[
"192.168.52.170"
],
"state": "DOWN",
"name": "Buderus",
"type": "SMART_HOME",
"make": "Espressif",
"model": "ESP32",
"first_seen": "2024-04-28T14:36:08.530Z",
"last_changed": "2025-09-05T10:13:02.747Z"
},
{
"mac": "B8:27:EB:0E:A3:EF",
"ip":
[
"192.168.52.55"
],
"state": "UP",
"name": "Volumio LAN",
"type": "WIFI_EXTENDER",
"make": "Apple",
"model": "AirPort",
"first_seen": "2021-01-05T09:47:34.129Z",
"last_changed": "2025-09-04T19:02:29.349Z"
},
{
"mac": "30:C6:F7:84:B7:74",
"ip":
[
"192.168.52.66"
],
"state": "UP",
"name": "Shelly Driveway",
"type": "SMART_HOME",
"make": "Shelly",
"model": "Shelly Pro 2",
"first_seen": "2022-06-11T08:20:40.529Z",
"last_changed": "2025-05-17T13:51:18.152Z"
},
{
"mac": "50:14:79:1A:AC:5E",
"ip":
[
"192.168.52.105"
],
"state": "UP",
"name": "Roomba i7+",
"type": "CLEANER",
"make": "iRobot",
"model": "Roomba",
"first_seen": "2020-04-07T12:18:38.291Z",
"last_changed": "2025-08-10T11:27:39.206Z"
},
{
"mac": "C4:D8:D5:0D:A2:E8",
"ip":
[
"192.168.52.76"
],
"state": "UP",
"name": "Shelly Coffee Table",
"type": "SMART_HOME",
"make": "Shelly",
"model": "Shelly Dimmer",
"first_seen": "2025-04-27T14:32:36.631Z",
"last_changed": "2025-08-22T18:19:06.683Z"
},
...
{
"mac": "14:49:BC:51:8C:CC",
"ip":
[
"192.168.52.18"
],
"state": "UP",
"name": "Mesh Node (Ground Floor)",
"type": "WIFI",
"make": "DrayTek",
"model": "VigorAP 903",
"first_seen": "2022-09-24T18:45:42.817Z",
"last_changed": "2024-08-14T14:06:59.414Z"
}
]
}
Here is code of sensor I use to read this data:
sensor:
- platform: rest
name: all_network_devices
resource: http://192.168.52.59:49090/1/devices?auth=rKHYN9LNQ4yFQFnkyXmIGjzt
value_template: >-
{{ value_json.networkId }}
json_attributes:
- devices
scan_interval: 10
And sensor state in HA:
Now, I use markdown card to display this data in dashboard. Here is the code for markdown I use (please note |—|—| code I use. for displaying data in table:
type: markdown
title: ""
content: >-
||||||||||
|---|---|---|---|---|---|---|---|---|
|<font color=white><b>State|<font color=white><b>IP Address|<font
color=white><b>Device Name|<font color=white><b>MAC Address|<font
color=white><b>Type|<font color=white><b>Make|<font color=white><b>Model|<font
color=white><b>Last Changed|
{% set devices=state_attr('sensor.new_network_devices', 'details') |
sort(attribute='order') %}
{%- for i in range(state_attr('sensor.new_network_devices', 'details') |
count) -%}
|{{ "<font color=#F03A3E>" if devices[i].state == 'DOWN' else "<font
color=#3BCC64>" }}<ha-icon icon="mdi:circle-medium"></ha-icon>|{{
devices[i].ip + ' ' }}|{{ devices[i].name + ' ' }}|{{
devices[i].mac + ' ' }}|{{ devices[i].type + ' ' }}|{{
devices[i].make | default("N/A") + ' ' }}|{{ devices[i].model |
default("N/A") + ' ' }}|{{ devices[i].last_changed }}|
{% endfor %}
And here is final result in dashboard:
Note the LED light in from of each item, with is icon and its color is dynamic, depending on state.
So, if you have your bookmarks available somehow as JSON (via REST API or as a file) it should be easily readable into sensor and in similar way transformed to table of bookmarks. Few notes:
- if your JSON contains url to icon, it could be easily used to display proper icon in markdown.
- I do not use it my example, but markdown specification allows to add to every element in displayed information clickable URL. It can be icon or text. Here is another example of markdown card used to create large list (my movies library); you can see last column contains the clickable link pointing to IMDB movie page. Here the entire code for whole web page is way more complicated, so I’m not sharing for unneeded complexity. But as you can see also images can be displayed within markdown, if needed.
