Custom HTML

Custom HTML tile

Add an html panel when you need a cover tile, a badge row, or a layout markdown cannot express, styled to match the theme.

Northwind Cloud FY26 Q2

The quarter we crossed $10M ARR

Scorecards, sortable tables, a full chart library, and a canvas story, all from one JSON spec.

$10.2M

ARR, +14% QoQ

What you can do

html is a fragment that passes through a sanitizer: <style> blocks, inline style attributes, SVG, and target and rel on links survive, while <script>, on* handlers, and javascript: URLs are removed.
Four CSS variables carry the active theme into your markup: --accent and --accent-2 (the first two chart series colours), --ink (primary text), and --muted (secondary text); the panel font is the theme typography.fontFamily.
The same {{ field | agg | format }} interpolation as text runs over the fragment, so a tile can print live numbers from its data rows.
Inside a style attribute, write font family names unquoted or in double quotes; a single-quoted family name cuts the attribute short.

Applies to an html panel only; text covers markdown without markup and hero covers a headline block without custom CSS. The three sibling pages show a badge grid, a multi-column tile with live numbers, and inline SVG.

Spec

View spec

{
  "id": "cover-tile",
  "type": "html",
  "title": "",
  "spec": {
    "html": "<div style='height:100%;box-sizing:border-box;display:flex;align-items:center;justify-content:space-between;gap:24px;padding:26px 32px;border-radius:18px;background:linear-gradient(120deg,#EEF2FF 0%,#FFFFFF 50%,#F0FDFA 100%);border:1px solid #E0EAE6;'><div><div style='font-size:12px;font-weight:700;letter-spacing:.15em;text-transform:uppercase;color:var(--accent);'>Northwind Cloud FY26 Q2</div><div style='font-size:26px;font-weight:800;color:var(--ink);margin-top:6px;'>The quarter we crossed $10M ARR</div><div style='font-size:14px;color:var(--muted);margin-top:6px;max-width:760px;'>Scorecards, sortable tables, a full chart library, and a canvas story, all from one JSON spec.</div></div><div style='text-align:right;'><div style='font-size:34px;font-weight:800;color:var(--accent-2);'>$10.2M</div><div style='font-size:12px;color:var(--muted);'>ARR, +14% QoQ</div></div></div>"
  }
}

The gradient and border are literal CSS, while every text colour is a theme variable (var(--accent), var(--ink), var(--muted), var(--accent-2)), so the tile follows the dashboard theme.

Try it live

Open the feature-tour template in the Builder

Open the feature-tour template, page scorecards, panel ft-hero for the cover tile this snippet is modelled on, above the four kpi cards.

Build it in dvt

Every block on this page is a few lines of the same declarative JSON spec. Read the full spec format, or connect an AI agent to your warehouse and build one live in the quickstart.

Follow the build

dvt is in founding research. Leave your email and we'll reach out when there's something to see — no newsletters, no noise.