Markdown/HTML Card
Renders markdown/HTML using the configurable pattern or function with applied attributes or time series values.
Who it’s for
Dashboard builders who need a block of formatted text that changes with the data — a summary sentence naming the current entity and its reading, a status note that rewrites itself, an instruction panel that names the device it is talking about. Markdown covers the formatting, and placeholders bring in the values.
What it does
The Markdown/HTML card renders markdown or HTML from a pattern that carries live values. The default pattern, ### Markdown/HTML card followed by **Current entity**: ${entityName} and **Current value**: ${Temperature}, renders as a heading and two bold-labelled lines with the entity’s name and its current temperature filled in.
- Markdown for the formatting, placeholders for the data —
${entityName}and${keyName}resolve against the datasource, so a sentence reads naturally rather than as a table of values. - HTML works where markdown does not, in the same box, so a block can mix a markdown list with an HTML table.
- A value function replaces the pattern when the text has to be decided rather than filled in — it receives the data and returns the markdown to render, which covers conditional wording and computed sentences.
- The platform’s default markdown styling can be applied or turned off, and custom CSS layers on top.
- The Markdown/HTML card renders text: it draws no chart and animates nothing, and a placeholder naming a key that is not in the datasource is left as written.
How to set up
Data keys
The Markdown/HTML card takes any number of data keys, addressed by name in the pattern.
| Key | Role | Type | Description |
|---|---|---|---|
Temperature | Any value referenced from the text | Timeseries | Written as ${Temperature} in the pattern, matching the key’s name. Attributes work equally well. ${entityName} is available without declaring a key. |
Add the keys the text refers to before writing the pattern; an unmatched placeholder renders as literal ${...} text rather than raising an error, which is what a card showing braces is telling you.
Content
| Setting | Default | Effect |
|---|---|---|
| Use markdown/HTML value function | Off | Switches from a fixed pattern to a function that returns the markdown |
| Markdown/HTML pattern | A heading plus entity name and value | The text rendered, with ${...} placeholders resolved live |
| Markdown/HTML value function | Returns a title and the entity name | Used instead of the pattern when the toggle is on; receives the data array |
How to customize
- To change the wording — edit the Markdown/HTML pattern; headings, lists, tables, links and emphasis all render.
- To decide the text from the data — turn on Use markdown/HTML value function and return a markdown string from the function, which is the way to write conditional sentences.
- To match the dashboard’s typography — turn off Apply default markdown style and supply your own rules in Markdown/HTML CSS.
- To reference another reading — add its data key and put
${that key name}where the value belongs.
Tips
- Stay on the pattern for anything a colleague may need to edit later. A one-line function is more flexible, but a pattern is legible to someone who does not write JavaScript, and most cards never need the extra power.
- Write the block with real key names and confirm the values resolve before styling anything. Unresolved placeholders are easy to miss inside styled text and obvious inside plain text.
Share Your Widget with the Community
Built a custom widget? Export it as a JSON from ThingsBoard and publish it to the IoT Hub through a simple 4-step wizard (Upload, Listing, Readme, Review & Submit). Share it with thousands of ThingsBoard developers worldwide and get featured in the catalog.