Narrative

Text with live numbers

Add a text panel when a page needs a heading, a callout, or a paragraph whose figures update with the data instead of going stale.

EMEA closed June at $3.6M. Revenue grew 7.7% over May, for a quarterly total of $10.1M. Every figure in this paragraph is read from the rows of the panel at render time.

What you can do

markdown is GitHub-flavoured markdown: headings, emphasis, lists, links, and tables render, and the output passes through a sanitizer so scripts and event handlers never reach the page.
Live numbers: {{ field | agg | format }} is replaced from the data rows of the panel; the first token names a column, agg is sum, avg, last, first, min, max, count, or delta, and it defaults to last.
Formats are currency (compact USD), percent or percentage (one decimal), number, compact, and date; delta is the percent change between the last two rows and formats as a percent unless you say otherwise.
first and last on a text column pass the string through, so {{ region | first }} prints a name rather than a number; a column that is missing or has no rows prints a dash placeholder.
variant is plain or callout; align is left, center, or right.

Applies to a text panel; the same {{ }} interpolation runs inside hero (headline, eyebrow, subhead) and html, and any snippet that interpolates must carry rows for the fields it names.

Spec

View spec

{
  "id": "quarter-summary",
  "type": "text",
  "title": "Quarter in one paragraph",
  "data": {
    "rows": [
      {
        "month": "Apr",
        "revenue": 3120000,
        "region": "EMEA"
      },
      {
        "month": "May",
        "revenue": 3380000,
        "region": "EMEA"
      },
      {
        "month": "Jun",
        "revenue": 3640000,
        "region": "EMEA"
      }
    ]
  },
  "spec": {
    "variant": "callout",
    "align": "left",
    "markdown": "**{{ region | first }} closed June at {{ revenue | last | currency }}.** Revenue grew {{ revenue | delta | percent }} over May, for a quarterly total of {{ revenue | sum | currency }}. Every figure in this paragraph is read from the rows of the panel at render time."
  }
}

Four expressions read the rows three ways: first on the text column region passes the string through, last | currency formats the June figure, delta | percent compares June with May, and sum | currency totals the quarter.

Try it live

Open the feature-tour template in the Builder

Open the feature-tour template, page customer-book, panel ft-intro2 for a callout that introduces a page; the the-story page closes with the plain panel ft-c-close.

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.