Every dvt dashboard (its theme, layout, panels, and visual properties) lives as a versioned JSON spec in dvt's database. Update it via API or MCP call. No deploy pipeline for a chart color change.
Edit the raw JSON and watch it render, like Slack's Block Kit Builder, for dashboards. Bring your own AI: the skill teaches any harness to write dvt specs.
The whole dashboard is the JSON on the left: flip between examples and see the same engine dvt ships render it live.
{
"schemaVersion": 1,
"meta": { "title": "Monthly Revenue" },
"theme": { "tokens": { "semantic": {
"chart.series.1": "#4F46E5"
} } },
"panels": [{
"id": "rev",
"type": "chart:bar",
"title": "Monthly Revenue",
"data": {
"sourceId": "warehouse-prod",
"query": "SELECT month, SUM(revenue) AS revenue\n FROM analytics.sales GROUP BY month"
},
"spec": {
"xAxis": { "type": "category", "name": "Month" },
"yAxis": { "type": "value", "name": "Revenue ($k)" },
"series": [{ "type": "bar", "barMaxWidth": 48 }]
}
}]
}{
"schemaVersion": 1,
"meta": { "title": "Weekly Active Users" },
"panels": [{
"id": "wau",
"type": "chart:area",
"title": "Weekly Active Users",
"data": { "metricRef": "metric.wau.weekly_series" },
"spec": {
"series": [{
"type": "line",
"smooth": true,
"areaStyle": {}
}]
}
}]
}{
"schemaVersion": 1,
"meta": {
"title": "Signup Funnel",
"createdBy": { "actorType": "agent", "actorId": "claude-opus" }
},
"panels": [{
"id": "funnel",
"type": "chart:funnel",
"title": "Conversion Funnel",
"data": { "metricRef": "metric.funnel.signup_to_paid_30d" },
"spec": {
"steps": ["Signup", "Activated", "Trial", "Paid"],
"series": [{ "type": "funnel", "label": { "show": true } }]
}
}]
}Dashboard specs are database records: update one via REST API or MCP and it's live instantly. dvt tracks every revision server-side. Export to git if you want GitOps; it's never required.
Claude can POST a valid spec to the dvt MCP server and the dashboard appears: no GUI clicks, no screenshots, no copy-pasting JSON by hand.
Every visual property, down to the gap between an axis and its title, is a named, storable parameter in the spec. Nothing is locked by the tool.
Same spec → same pixels, every time. Validate a spec before saving it. Preview changes before applying them. AI agents get a preview loop before persisting.
From a bar chart to an animated chart race, from sankey flows to cohort heat tables: the same declarative JSON describes them all. No imperative drawing code in the authoring surface.
chart:bar:racing Animated ranking over time: temporal storytelling that moves.
chart:area Volume and trend together: baseline must be zero.
chart:funnel Sequential stages where volume narrows at each step.
chart:heatmap Two categories × a value as color: activity grids, matrices.
chart:sankey "Where does it go?" Flows with width ∝ quantity.
chart:line:racing A progressive line that draws itself along the time axis.
chart:radar Compare entities across 5–10 dimensions: profiles, scorecards.
Compare a measure across categories.
The BI workhorse: compare a measure across categories.
chart:bar { "type": "chart:bar",
"data": { "query": "SELECT month, SUM(revenue) AS revenue\n FROM sales GROUP BY month" },
"spec": { "series": [{ "type": "bar", "barMaxWidth": 48 }] } }Long labels or top-N rankings get room to breathe.
chart:bar:horizontal { "type": "chart:bar:horizontal",
"spec": { "series": [{ "type": "bar" }],
"yAxis": { "type": "category" } } }Total and parts at once. Best with 2–4 series.
chart:bar:stacked { "type": "chart:bar:stacked",
"spec": { "series": [
{ "type": "bar", "stack": "plan" },
{ "type": "bar", "stack": "plan" } ] } }Composition share normalized to 100% across categories.
chart:bar:stacked-percent { "type": "chart:bar:stacked-percent",
"spec": { "series": [{ "type": "bar", "stack": "mix" }],
"yAxis": { "max": 100 } } }Icon-repeated bars for editorial, infographic moments.
chart:pictorial-bar { "type": "chart:pictorial-bar",
"spec": { "series": [{ "type": "pictorialBar",
"symbol": "circle", "symbolRepeat": true }] } }How a measure moves over time.
The primary chart for trends over time.
chart:line { "type": "chart:line",
"spec": { "series": [{ "type": "line" }] } }Spline interpolation: only for truly continuous data.
chart:line:smooth { "type": "chart:line:smooth",
"spec": { "series": [{ "type": "line", "smooth": true }] } }Discrete state changes: values hold between events.
chart:line:step { "type": "chart:line:step",
"spec": { "series": [{ "type": "line", "step": "end" }] } }Volume and trend together: baseline must be zero.
chart:area { "type": "chart:area",
"spec": { "series": [{ "type": "line", "areaStyle": {} }] } }Streamgraph: how stream volumes rise and fall over time.
chart:theme-river { "type": "chart:theme-river",
"spec": { "series": [{ "type": "themeRiver" }] } }Composition and proportion.
Part-to-whole for a handful of slices that sum to 100%.
chart:pie { "type": "chart:pie",
"spec": { "series": [{ "type": "pie" }] } }Pie with the center reserved for a headline metric.
chart:donut { "type": "chart:donut",
"spec": { "series": [{ "type": "pie", "radius": ["52%", "74%"] }] } }Sequential stages where volume narrows at each step.
chart:funnel { "type": "chart:funnel",
"spec": { "steps": ["Signup", "Activated", "Trial", "Paid"],
"series": [{ "type": "funnel" }] } }Hierarchical data as nested rectangles, area = value.
chart:treemap { "type": "chart:treemap",
"spec": { "series": [{ "type": "treemap" }] } }Hierarchical part-to-whole as concentric rings.
chart:sunburst { "type": "chart:sunburst",
"spec": { "series": [{ "type": "sunburst" }] } }Relationships and density.
Relationship between two quantitative variables.
chart:scatter { "type": "chart:scatter",
"spec": { "series": [{ "type": "scatter" }] } }Scatter + a size channel encodes a third variable.
chart:scatter (bubble) { "type": "chart:scatter",
"spec": { "series": [{ "type": "scatter", "sizeField": "deal_size" }] } }Ripple emphasis to draw the eye to outliers.
chart:effect-scatter { "type": "chart:effect-scatter",
"spec": { "series": [{ "type": "effectScatter" }] } }Two categories × a value as color: activity grids, matrices.
chart:heatmap { "type": "chart:heatmap",
"spec": { "series": [{ "type": "heatmap" }],
"visualMap": { "min": 0, "max": 10 } } }Structure, networks, and movement.
"Where does it go?" Flows with width ∝ quantity.
chart:sankey { "type": "chart:sankey",
"spec": { "series": [{ "type": "sankey" }] } }Parent–child hierarchies where branching is the message.
chart:tree { "type": "chart:tree",
"spec": { "series": [{ "type": "tree", "orient": "LR" }] } }Entities connected by relationships: topology, knowledge graphs.
chart:graph { "type": "chart:graph",
"spec": { "series": [{ "type": "graph", "layout": "force" }] } }Many dimensions, many entities, across parallel axes.
chart:parallel { "type": "chart:parallel",
"spec": { "series": [{ "type": "parallel" }] } }Distribution and financial shape.
Distribution summary: quartiles, spread, outliers per group.
chart:boxplot { "type": "chart:boxplot",
"spec": { "series": [{ "type": "boxplot" }] } }Financial OHLC: price action, volatility, ranges.
chart:candlestick { "type": "chart:candlestick",
"spec": { "series": [{ "type": "candlestick" }] } }A value's position within a known range (use sparingly).
chart:gauge { "type": "chart:gauge",
"spec": { "series": [{ "type": "gauge", "max": 100 }] } }Compare entities across 5–10 dimensions: profiles, scorecards.
chart:radar { "type": "chart:radar",
"spec": { "series": [{ "type": "radar" }] } }Specs that move: temporal storytelling.
Animated ranking over time: temporal storytelling that moves.
chart:bar:racing { "type": "chart:bar:racing",
"animation": { "frameField": "month" },
"spec": { "categoryField": "plan", "valueField": "revenue" } }A progressive line that draws itself along the time axis.
chart:line:racing { "type": "chart:line:racing",
"animation": { "frameField": "quarter" },
"spec": { "valueField": "revenue" } }Rich tabular layouts, formatted and conditional.
Conditional formatting, deltas, and inline share bars, all declared.
table | Segment | Revenue | MoM | Share |
|---|---|---|---|
| Enterprise | $1.05M | +18% | |
| Pro | $735K | +9% | |
| Team | $580K | +4% | |
| Starter | $180K | −6% |
{ "type": "table",
"spec": {
"columns": [
{ "field": "revenue", "format": { "type": "currency", "currency": "USD" } },
{ "field": "mom", "format": { "type": "percentage" } },
{ "field": "share", "cell": { "kind": "bar" } }
],
"conditionalFormat": [
{ "where": { "field": "mom", "op": "lt", "value": 0 },
"apply": { "fill": "danger.subtle", "textColor": "danger", "weight": "bold" } }
] } }Sparklines, bullet bars, and win/loss strips rendered inside cells.
table | Metric | Trend (6mo) | Pace vs quota | Weekly W/L |
|---|---|---|---|
| ARR | 82 | ||
| Net new logos | 61 | ||
| Churn | 40 |
{ "type": "table",
"spec": { "columns": [
{ "field": "trend", "cell": { "kind": "sparkline", "type": "area",
"source": { "valuesFromColumns": ["m1","m2","m3","m4","m5","m6"] } } },
{ "field": "pace", "cell": { "kind": "bullet", "target": "quota" } },
{ "field": "streak", "cell": { "kind": "winloss" } } ] } }Row grouping with per-group subtotals and a grand total.
table | Rep | Deals | Revenue |
|---|---|---|
| West | ||
| A. Rivera | 14 | $420K |
| J. Okafor | 11 | $330K |
| West subtotal | 25 | $750K |
| East | ||
| M. Chen | 18 | $540K |
| P. Nowak | 9 | $260K |
| East subtotal | 27 | $800K |
| Grand total | 52 | $1.55M |
{ "type": "table",
"spec": { "grouping": {
"groupBy": ["region"],
"aggregations": [
{ "field": "deals", "agg": "count" },
{ "field": "revenue", "agg": "sum" } ],
"subtotals": true, "grandTotal": true } } }Revenue by region × quarter with spanning headers and heat.
table | FY26 revenue | ||||
|---|---|---|---|---|
| Region | Q1 | Q2 | Q3 | Total |
| West | $210K | $255K | $285K | $750K |
| East | $240K | $268K | $292K | $800K |
| EMEA | $160K | $180K | $205K | $545K |
{ "type": "table",
"spec": { "pivot": {
"rows": ["region"],
"columns": ["quarter"],
"values": [ { "field": "revenue", "agg": "sum" } ],
"totals": { "row": true } },
"columns": [ { "field": "revenue",
"colorScale": { "method": "numeric", "palette": "blues" } } ] } }Retention grid with continuous colour-scale heat encoding.
table | Cohort | M0 | M1 | M2 | M3 |
|---|---|---|---|---|
| Jan | 100% | 82% | 71% | 64% |
| Feb | 100% | 85% | 74% | 69% |
| Mar | 100% | 88% | 79% | 72% |
{ "type": "table",
"spec": { "columns": [ { "field": "retention",
"colorScale": { "method": "quantile",
"palette": "blues", "domain": [50, 100] } } ] } }34 chart & table types shown. Every one is a few lines of declarative spec. Try them in the builder →
The table element carries a full presentation vocabulary: all of it declared
in the spec, all of it dvt Core, all computed client-side over rows you already fetched.
A real predicate grammar (eq / gt / between / in / topN / bottomN, cross-column references, and any/all combinators) styling a cell or a whole row.
Continuous per-column encoding: numeric, quantile, or binned, over named ramps (blues, viridis, rdbu…) with an auto or fixed domain.
Sparklines, data bars, bullet bars, win/loss strips, dots, icons, and images, rendered inside the cell, driven by sibling columns.
Nested row groups with per-group subtotals and a grand total, collapsible from the header. No pivot required.
Rows × columns cross-tabs with sum / weighted-average aggregation, generated value columns, and row/column/grand totals.
Multi-row grouped column headers so a wide cross-tab reads as "FY26 revenue → Q1 · Q2 · Q3", not a flat wall of columns.
Drag a column border to resize (40–1200px); wrap long text over multiple lines with a show-more toggle. Sort and filter per column.
Pull column headers and tooltips straight from your warehouse COMMENT metadata: the table documents itself from the source.
Filters, cross-filtering, drill-downs, and context menus. Declared in the spec, no imperative event code.
12 control kinds (select, multiselect, date-range, number-range, search, toggle, number, segmented, radio, button-group, checkbox-list, top-N), bound to named SQL parameters, never string-interpolated.
Drag-select a region of a chart to filter (or just highlight) every other panel on the page.
Right-click a datapoint to navigate to a detail page with the clicked value bound as a parameter.
Declarative right-click actions (filter, drill, open link, copy, export, or open an overlay), templated from the clicked row. No code.
Present a target page as a modal or drawer without leaving the dashboard: a superset of drill-down.
Timezone-aware presets (last 7d, 30d, MTD, QTD, YTD, all-time), resolved at view time.
The spec carries everything a dashboard needs. Not just the picture.
Every visual property, down to the gap between an axis and its title, is a named, storable token. Org and dashboard themes cascade.
Stat panels with currency/percent formatting, period comparisons, deltas, and inline sparklines. Declared, not configured by hand.
Claude POSTs a valid spec through the dvt MCP server and the dashboard appears: no GUI clicks, no screenshots, no pasted JSON.
Validate any spec before saving, preview changes before applying. Same spec → same pixels, deterministically, every time.
Choropleths and geographic flows over bundled USA / world boundaries, or drive geography straight from a GeoJSON column.
Panels carry their own intent, assumptions, and the exact query that built them: the documentation travels inside the spec.
The dvt spec format is Apache-2.0 licensed, and a published JSON Schema is on the way, enabling validation, editor autocompletion, and AI self-correction without needing to query a running server. The spec travels with your data, not with dvt's infrastructure.
The schema is in active design. The examples above reflect the current working draft: field names and structure may shift before v1.
You've already tried the format in the builder above. Early access is how it runs on your own warehouse, arranged directly with us.
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.