Template
Data dashboard template
A self-contained HTML dashboard – KPI tiles, a weekly bar chart, and a source table in one file with no external dependencies. Publish it to a URL in one click, no account.
- free – no account
- a URL in seconds
- yours if you claim it
Publishing this from your own stack? See display.dev for data dashboards.
Preview
What it looks like published
Source – data-dashboard.html
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Signups dashboard – July 2026</title>
<style>
:root {
color-scheme: light dark;
--bg: oklch(0.99 0.004 85);
--card: oklch(1 0 0);
--fg: oklch(0.16 0.006 85);
--muted: oklch(0.5 0.008 85);
--line: oklch(0.92 0.006 85);
--accent: oklch(0.48 0.18 145);
--bar: oklch(0.87 0.008 85);
}
@media (prefers-color-scheme: dark) {
:root {
--bg: oklch(0.15 0.005 85);
--card: oklch(0.19 0.006 85);
--fg: oklch(0.97 0.004 85);
--muted: oklch(0.65 0.008 85);
--line: oklch(0.3 0.006 85);
--accent: oklch(0.68 0.18 145);
--bar: oklch(0.35 0.008 85);
}
}
* { box-sizing: border-box; }
body {
margin: 0;
background: var(--bg);
color: var(--fg);
font-family: ui-sans-serif, system-ui, sans-serif;
line-height: 1.5;
padding: clamp(1.5rem, 4vw, 3rem);
}
.wrap { max-width: 960px; margin: 0 auto; }
header h1 {
font-size: clamp(1.5rem, 3vw, 2rem);
font-weight: 700;
letter-spacing: -0.02em;
margin: 0;
}
header p { color: var(--muted); margin: 0.25rem 0 0; font-size: 0.9375rem; }
.kpis {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
gap: 0.75rem;
margin: 1.5rem 0;
}
.kpi {
background: var(--card);
border: 1px solid var(--line);
border-radius: 10px;
padding: 1rem 1.125rem;
}
.kpi .label { font-size: 0.75rem; color: var(--muted); text-transform: uppercase; letter-spacing: 0.06em; }
.kpi .value { font-size: 1.625rem; font-weight: 700; letter-spacing: -0.02em; margin-top: 0.25rem; }
.kpi .delta { font-size: 0.8125rem; margin-top: 0.125rem; color: var(--muted); }
.kpi .delta.up { color: var(--accent); font-weight: 600; }
.panel {
background: var(--card);
border: 1px solid var(--line);
border-radius: 10px;
padding: 1.25rem;
margin-bottom: 0.75rem;
}
.panel h2 { font-size: 1rem; font-weight: 600; margin: 0 0 1rem; }
.chart { display: flex; align-items: flex-end; gap: 6px; height: 160px; }
.chart .col { flex: 1; display: flex; flex-direction: column; justify-content: flex-end; height: 100%; }
.chart .bar { background: var(--bar); border-radius: 3px 3px 0 0; }
.chart .col.current .bar { background: var(--accent); }
.chart .col span {
font-size: 0.6875rem;
color: var(--muted);
text-align: center;
margin-top: 0.375rem;
}
table { width: 100%; border-collapse: collapse; font-size: 0.875rem; }
th, td { text-align: left; padding: 0.5rem 0.75rem; border-bottom: 1px solid var(--line); }
th { font-size: 0.6875rem; text-transform: uppercase; letter-spacing: 0.06em; color: var(--muted); }
tr:last-child td { border-bottom: 0; }
td.num, th.num { text-align: right; font-variant-numeric: tabular-nums; }
footer { color: var(--muted); font-size: 0.8125rem; margin-top: 1.5rem; }
</style>
</head>
<body>
<div class="wrap">
<header>
<h1>Signups dashboard</h1>
<p>1–21 July 2026 · self-serve funnel · refreshed daily from the warehouse</p>
</header>
<div class="kpis">
<div class="kpi">
<div class="label">Signups</div>
<div class="value">1,284</div>
<div class="delta up">+18% vs June</div>
</div>
<div class="kpi">
<div class="label">Activation (first key action)</div>
<div class="value">41%</div>
<div class="delta up">+3 pts vs June</div>
</div>
<div class="kpi">
<div class="label">Paid conversions</div>
<div class="value">57</div>
<div class="delta">flat vs June</div>
</div>
<div class="kpi">
<div class="label">Median time to activate</div>
<div class="value">26 min</div>
<div class="delta up">−9 min vs June</div>
</div>
</div>
<div class="panel">
<h2>Signups per week</h2>
<div class="chart" role="img" aria-label="Bar chart: weekly signups, weeks 23 to 30, rising from 210 to 458">
<div class="col"><div class="bar" style="height:46%"></div><span>W23</span></div>
<div class="col"><div class="bar" style="height:41%"></div><span>W24</span></div>
<div class="col"><div class="bar" style="height:55%"></div><span>W25</span></div>
<div class="col"><div class="bar" style="height:52%"></div><span>W26</span></div>
<div class="col"><div class="bar" style="height:63%"></div><span>W27</span></div>
<div class="col"><div class="bar" style="height:71%"></div><span>W28</span></div>
<div class="col"><div class="bar" style="height:84%"></div><span>W29</span></div>
<div class="col current"><div class="bar" style="height:100%"></div><span>W30</span></div>
</div>
</div>
<div class="panel">
<h2>Top acquisition sources</h2>
<table>
<thead>
<tr><th>Source</th><th class="num">Signups</th><th class="num">Activation</th><th class="num">Paid</th></tr>
</thead>
<tbody>
<tr><td>Organic search</td><td class="num">512</td><td class="num">44%</td><td class="num">26</td></tr>
<tr><td>Direct</td><td class="num">308</td><td class="num">47%</td><td class="num">18</td></tr>
<tr><td>GitHub README</td><td class="num">211</td><td class="num">38%</td><td class="num">9</td></tr>
<tr><td>Newsletter</td><td class="num">142</td><td class="num">31%</td><td class="num">3</td></tr>
<tr><td>Referral links</td><td class="num">111</td><td class="num">29%</td><td class="num">1</td></tr>
</tbody>
</table>
</div>
<footer>Source: events warehouse, <code>signups_daily</code> · owner: growth · numbers are sample data, replace with your own.</footer>
</div>
</body>
</html>
What this template is for
A metrics page you can send as a link instead of a screenshot. Four KPI tiles with month-over-month deltas, a weekly bar chart with the current week highlighted, and a per-source breakdown table – all in one HTML file with inline styles, dark mode included, no chart library, no CDN.
Because it's a single self-contained file, it's exactly the shape agents produce well: your agent queries the warehouse, writes the numbers into the markup, and publishes. The rendered page is what your team sees – styled, responsive, and behind your company's sign-in if you gate it.
How teams use it
- A weekly growth or ops readout. The agent refreshes the numbers and publishes a new version; the URL in your team channel stays current.
- A one-off analysis that deserves better than a paste. Funnel breakdowns, launch retros, load-test results – anything with four numbers and a trend.
- A starting point, not a cage. It's plain HTML – add a second chart, swap the table, extend it however the analysis needs.
Publish your first artifact in 15 seconds.
Free tier. No credit card. One-time password auth on free, Google + Microsoft SSO on Pro (€49/month flat).