Skip to content
Stand with Ukraine flag

Gateway Markdown/HTML Card

  • Widget
  • v1.0.0
  • Sep 1, 2026
  • MIT license
  • v4.2+ | Built-in

Renders markdown/HTML using the configurable pattern or function with applied attributes or time series values.

Widget Type
  • Latest
Category
  • Cards & Info
Use Cases
  • Industrial Automation

Who it’s for

Engineers building a ThingsBoard IoT Gateway dashboard who need a formatted block that names the gateway it belongs to — a header identifying the current gateway, a note summarizing its configuration, an instruction panel that adapts to the device being viewed rather than repeating a generic sentence.

What it does

The Gateway Markdown/HTML card renders markdown or HTML from a pattern that carries live values from the gateway device. The default pattern prints a heading followed by **Current entity**: ${entityName} and **Current value**: ${Random}, so the block names the gateway it is attached to instead of being captioned by hand on every dashboard.

  • Markdown for the formatting, placeholders for the data — ${entityName} and ${keyName} resolve against the gateway datasource.
  • HTML works in the same box where markdown is not enough, so a block can mix a list with a table.
  • A value function replaces the pattern when the wording has to depend on the data, receiving the data array and returning the markdown to render.
  • Custom CSS layers on top of the platform’s default markdown styling, or replaces it entirely.
  • The Gateway Markdown/HTML card renders text: it shows no connector state, no logs and no live statistics, which are covered by the dedicated gateway widgets.

How to set up

Data keys

The Gateway Markdown/HTML card takes any number of data keys from the gateway device, addressed by name in the pattern.

KeyRoleTypeDescription
AnyA value referenced from the textTimeseriesWritten as ${key name} in the pattern. Gateway attributes work equally well, and ${entityName} is available without declaring a key.

Point the datasource at the gateway device, then add the keys the text refers to. An unmatched placeholder renders as literal ${...} text rather than raising an error.

Content

SettingDefaultEffect
Use markdown/HTML value functionOffSwitches from a fixed pattern to a function that returns the markdown
Markdown/HTML patternA heading plus entity name and valueThe text rendered, with ${...} placeholders resolved live
Markdown/HTML value functionReturns a title and the entity nameUsed instead of the pattern when the toggle is on

How to customize

  • To change the wording — edit the Markdown/HTML pattern; headings, lists, tables and links all render.
  • To decide the text from the data — turn on Use markdown/HTML value function and return a markdown string.
  • To match the dashboard’s typography — turn off Apply default markdown style and supply rules in Markdown/HTML CSS.
  • To reference another gateway reading — add its data key and put ${that key name} in the text.

Tips

  • Use the card as the header of a gateway dashboard, printing ${entityName} and the connector count. A page that names the gateway it is showing prevents the most common mistake on multi-gateway installations, which is reading the right numbers about the wrong device.
  • Keep the pattern rather than the function unless the wording genuinely has to branch. Gateway dashboards tend to be maintained by whoever is on shift, and a pattern stays editable by someone who does not write JavaScript.

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.