mrr-dashboard.canvakit.html

mrr-dashboard v1.0.0

Live revenue dashboard — one tool source, re-rendering this refreshes the numbers without re-emitting HTML.

data sources

stripe : tool

{
  "kind": "tool",
  "ref": "stripe.mrr",
  "params": {
    "period": "2026-Q2"
  }
}

source

open in playground →

---
template: true
name: mrr-dashboard
version: 1.0.0
description: Live revenue dashboard — one tool source, re-rendering this refreshes the numbers without re-emitting HTML.
author: canvakit
refreshEvery: 60s
variables:
  title: "MRR dashboard"
  period: "2026-Q2"
dataSources:
  stripe:
    kind: tool
    ref: stripe.mrr
    params:
      period: "2026-Q2"
---
<!doctype html>
<html>
  <head>
    <meta charset="utf-8" />
    <title>{{title}} · {{period}}</title>
    <style>
      body { font-family: ui-sans-serif, system-ui, sans-serif; padding: 3rem; max-width: 50rem; margin: 0 auto; }
      .stat { padding: 1.5rem; border: 1px solid #e5e5e5; border-radius: 10px; }
      .value { font-size: 3rem; font-weight: 700; letter-spacing: -0.03em; }
      .label { text-transform: uppercase; font-size: 0.75rem; letter-spacing: 0.08em; color: #666; }
      .delta { color: #0a7d30; font-weight: 500; }
      .grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1rem; margin-top: 2rem; }
    </style>
  </head>
  <body>
    <header>
      <p class="label">{{period}}</p>
      <h1>{{title}}</h1>
    </header>

    <div class="grid">
      <div class="stat">
        <p class="label">MRR</p>
        <p class="value">${{stripe.amount}}</p>
        <p class="delta">+{{stripe.delta}} MoM</p>
      </div>
      <div class="stat">
        <p class="label">Customers</p>
        <p class="value">{{stripe.customers}}</p>
      </div>
      <div class="stat">
        <p class="label">ARPU</p>
        <p class="value">${{stripe.arpu}}</p>
      </div>
    </div>

    <p style="margin-top:3rem;color:#999;font-size:0.85rem">
      Last refreshed: {{$meta.renderedAt}}
    </p>

    <script id="canvas-data" type="application/json">{{{_data}}}</script>
  </body>
</html>

install

curl -L canvakit.sh/api/template/mrr-dashboard -o mrr-dashboard.canvakit.html