Playground — canvakit.sh

Loaded from gallery: mrr-dashboard

Template

.canvakit.html source

---
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>

Context

JSON map of tool-ref → value (fixtures for kind: tool)

Rendered body

live

Theme (designkit bridge):

Sources

per-source resolution report