Custom HTML

HTML with inline SVG

Add an inline SVG tile when you need a ring, an icon, or a small vector figure that markdown cannot draw.

Net promoter score, trailing quarter

What you can do

Inline <svg> survives the sanitizer (its SVG and SVG-filter profiles are enabled), so rings, gauges, and icons can be drawn as vectors inside the panel.
A <style> block inside the fragment can style the SVG and the text around it; <script>, on* attributes, and javascript: URLs are removed.
Use stroke-dasharray on a circle to draw a progress ring; the theme variables colour it.

Applies to an html panel; for a gauge bound to a query, use chart:gauge from the charts reference.

Spec

View spec

{
  "id": "nps-ring",
  "type": "html",
  "title": "NPS",
  "spec": {
    "html": "<style>.ring{display:flex;align-items:center;gap:18px;height:100%;box-sizing:border-box;padding:12px;} .ring svg{width:96px;height:96px;transform:rotate(-90deg);} .ring .v{font-size:30px;font-weight:800;color:var(--ink);} .ring .l{font-size:12px;color:var(--muted);}</style><div class='ring'><svg viewBox='0 0 36 36' aria-hidden='true'><circle cx='18' cy='18' r='15.9' fill='none' stroke='var(--muted)' stroke-opacity='.25' stroke-width='3'></circle><circle cx='18' cy='18' r='15.9' fill='none' stroke='var(--accent)' stroke-width='3' stroke-linecap='round' stroke-dasharray='72 100'></circle></svg><div><div class='v'>72</div><div class='l'>Net promoter score, trailing quarter</div></div></div>"
  }
}

The circle has radius 15.9, so its circumference is 100 units and stroke-dasharray: 72 100 draws exactly 72 percent of the ring; the <style> block scopes the layout to the .ring class.

Try it live

Open the feature-tour template in the Builder

Open the feature-tour template, page scorecards, panel ft-hero for the custom html tile the variants on these pages grow from.

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.