logoImejis.io

Metric component

Datatype: "metric"

A stat tile: one big formatted number with an optional label and up/down delta badge — built for KPIs, revenue counters and scorecards.

Edit it — this is the actual editor panel
Design JSON
{
  "title": "Metric sample",
  "description": "A dynamic KPI tile",
  "dimensions": {
    "width": 800,
    "height": 420
  },
  "background": {
    "color": "#ffffff"
  },
  "components": [
    {
      "id": "sample-metric",
      "key": "revenue",
      "type": "metric",
      "position": {
        "x": 250,
        "y": 140
      },
      "rotation": 0,
      "size": {
        "width": 300,
        "height": 140
      },
      "dynamic": true,
      "properties": {
        "value": 48250,
        "label": "Revenue",
        "format": "currency",
        "labelPosition": "top",
        "delta": 12.5,
        "showDelta": true,
        "deltaFormat": "percent",
        "deltaDirection": "up-good",
        "align": "center",
        "opacity": 1
      }
    }
  ]
}

Like what you built? The full editor — canvas, templates and the render API — is free to start.

Open the editor

Metric examples

Real renders of the metric — each one is the same component with different property values, and the API payload below each preview reproduces it exactly.

Daily signups tile

New signups today with a green up-delta — ready for a morning Slack post.

API overrides for this example
{
  "revenue.value": 1382,
  "revenue.label": "Signups today",
  "revenue.format": "number",
  "revenue.delta": 4.6
}

Conversion rate scorecard

Checkout conversion as a percentage, with the delta shown in raw points.

API overrides for this example
{
  "revenue.value": 3.8,
  "revenue.label": "Checkout conversion",
  "revenue.format": "percent",
  "revenue.delta": 0.4,
  "revenue.deltaFormat": "value"
}

All metric styles

Every style rendered live — each is just a different set of property values on the same component, and each has its own page with a dedicated preview, use cases and API example.

CompactLarge numbers abbreviated (48.3K) — dashboards and social cards.
Negative deltaA drop against an up-is-good metric renders the badge in the down color.
Suffix unitsRaw value with a custom suffix instead of built-in formatting.
CurrencyA revenue counter formatted as money with a growth delta badge.

Use cases

What developers typically build with the metric component.

  • Daily revenue or signup tiles posted to Slack
  • OG images with live user or star counts
  • Investor update graphics with growth deltas
  • Follower milestone cards for social media

Use it dynamically via the API

Push the latest number with '<key>.value' (or just '<key>') and the change with '<key>.delta'; label and format are overridable too.

Full API request with the sample design's current values — the playground above sends only the properties you change
curl --location 'https://render.imejis.io/v1/{{YOUR_DESIGN_ID}}' \
--header 'dma-api-key: {{YOUR_API_KEY}}' \
--header 'Content-Type: application/json' \
--data '{
    "revenue.value": 48250,
    "revenue.label": "Revenue",
    "revenue.format": "currency",
    "revenue.labelPosition": "top",
    "revenue.delta": 12.5,
    "revenue.showDelta": true,
    "revenue.deltaFormat": "percent",
    "revenue.deltaDirection": "up-good",
    "revenue.align": "center",
    "revenue.opacity": 1
}'

Only send the properties you want to change — everything else keeps its design value. See the API documentation for all languages.

Property reference

Every property the metric component accepts — in the editor, in design JSON, and as API overrides.

PropertyTypeEdits asDefaultDescription
valuenumber | stringtext—The headline value to display.
labelstringtext""Caption describing the metric.
labelPosition'top' | 'bottom'topbottom"top"Whether the label sits above or below the value.
format'number' | 'compact' | 'percent' | 'currency' | 'none'numbercompactpercentcurrencynone"number"How the value is formatted (48,250 / 48.3K / 48% / $48,250 / raw).
currencySymbolstringtext"$"Currency symbol used with the 'currency' format.
prefixstringtext—Text prepended to the value.
suffixstringtext—Text appended to the value.
deltanumber0—Change amount shown in the delta badge (no badge when unset).
showDeltabooleantrue / false—Show the delta badge.
deltaFormat'percent' | 'value'percentvalue"percent"Whether the delta renders as a percentage or a raw value.
deltaDirection'up-good' | 'down-good'up-gooddown-good"up-good"Which direction counts as positive (colors the badge).
align'left' | 'center' | 'right'leftcenterright"left"Horizontal alignment of the tile content.
valueSizenumber00Font size of the value in pixels.
valueColorcolor#0f172a"#0f172a"Color of the value.
labelColorcolor#64748b"#64748b"Color of the label.
deltaUpColorcolor#16a34a"#16a34a"Badge color for a positive delta.
deltaDownColorcolor#dc2626"#dc2626"Badge color for a negative delta.
opacitynumber11Overall component opacity from 0 (transparent) to 1 (opaque).
borderWidthnumber00Border thickness in pixels around the component.
borderColorcolortransparent"transparent"Border color (any CSS color).
borderStyle'solid' | 'dashed' | 'dotted' | 'double' | 'none'soliddasheddotteddoublenone"solid"Border line style.
borderRadiusnumber00Corner radius in pixels.
boxShadowstringtext—CSS box-shadow applied to the component, e.g. "0 4px 6px rgba(0,0,0,0.1)".

Frequently Asked Questions

Yes — send '<key>.value' (or just the key) plus '<key>.delta' for the change badge; the label and format are overridable too.

format supports number (48,250), compact (48.3K), percent, currency with a custom currencySymbol, or none for raw text — plus prefix and suffix strings.

deltaDirection sets which way is positive: 'up-good' colors increases as positive, 'down-good' does the opposite (useful for costs); both colors are customizable.

Yes — value accepts a string too; combine format 'none' with prefix or suffix when you need units like '1,284 users'.