Vaktor - Showcases

E-commerce admin Live demo

Two tabs: a KPI dashboard and an orders table (inline rows, renders offline).

Screenshot

{
  "contract_version": "0.1.0",
  "service": {
    "id": "shop-demo",
    "name": "Shop — demo",
    "tint": "indigo",
    "tabs": [
      {
        "id": "summary",
        "title": "Summary",
        "icon": "chart.bar",
        "page": "/showcases/shop/pages/summary.json"
      },
      {
        "id": "orders",
        "title": "Orders",
        "icon": "cart",
        "page": "/showcases/shop/pages/orders.json"
      }
    ]
  }
}

{
  "contract_version": "0.1.0",
  "page": {
    "id": "summary",
    "title": "Summary",
    "items": [
      {
        "type": "section",
        "header": "Today",
        "columns": 2,
        "items": [
          {
            "type": "metric",
            "title": "Revenue",
            "value": "$12,480",
            "trend": "+8%",
            "trend_direction": "up",
            "sentiment": "positive"
          },
          {
            "type": "metric",
            "title": "Orders",
            "value": "146",
            "trend": "+3%",
            "trend_direction": "up",
            "sentiment": "positive"
          }
        ]
      },
      {
        "type": "section",
        "header": "Health",
        "items": [
          {
            "type": "status",
            "label": "Payments",
            "role": "success"
          },
          {
            "type": "status",
            "label": "Fulfillment queue",
            "role": "warning"
          }
        ]
      }
    ]
  }
}

{
  "contract_version": "0.1.0",
  "page": {
    "id": "orders",
    "title": "Orders",
    "items": [
      {
        "type": "table",
        "columns": [
          {
            "id": "order",
            "title": "Order"
          },
          {
            "id": "customer",
            "title": "Customer"
          },
          {
            "id": "total",
            "title": "Total"
          },
          {
            "id": "status",
            "title": "Status"
          }
        ],
        "rows": [
          {
            "id": "142",
            "cells": {
              "order": "#142",
              "customer": "Jane Doe",
              "total": "$120",
              "status": "paid"
            }
          },
          {
            "id": "143",
            "cells": {
              "order": "#143",
              "customer": "John Roe",
              "total": "$56",
              "status": "pending"
            }
          },
          {
            "id": "144",
            "cells": {
              "order": "#144",
              "customer": "Ada Lovelace",
              "total": "$310",
              "status": "paid"
            }
          }
        ]
      }
    ]
  }
}

tabssectionmetricstatustable

Public status page (data binding) Live demo

A single page rendered from a JSON payload via data binding (same-origin source, renders live).

Screenshot

{
  "contract_version": "0.1.0",
  "service": {
    "id": "status-demo",
    "name": "Service status",
    "tint": "teal",
    "root_page": "/showcases/status/pages/status.json"
  }
}

{
  "contract_version": "0.1.0",
  "page": {
    "id": "status",
    "title": "Status",
    "source": {
      "url": "/showcases/status/data/summary.json"
    },
    "maps": {
      "compRole": {
        "operational": "success",
        "degraded_performance": "warning",
        "major_outage": "error",
        "_default": "neutral"
      }
    },
    "items": [
      {
        "type": "section",
        "items": [
          {
            "type": "row",
            "title": "Overall",
            "status": "{data.status.indicator | map:compRole}"
          }
        ]
      },
      {
        "type": "section",
        "header": "Components",
        "data": "data.components",
        "template": {
          "type": "row",
          "title": "{context.name}",
          "status": "{context.status | map:compRole}",
          "wrap": true
        }
      }
    ]
  }
}

{
  "status": {
    "indicator": "operational",
    "description": "All systems operational"
  },
  "components": [
    {
      "name": "API",
      "status": "operational"
    },
    {
      "name": "Dashboard",
      "status": "operational"
    },
    {
      "name": "Webhooks",
      "status": "degraded_performance"
    },
    {
      "name": "Payments",
      "status": "major_outage"
    }
  ]
}

root_pagesourcetemplatemap

Live analytics Live demo

A KPI row plus a line chart, auto-refreshing every 30 s (renders live).

Screenshot

{
  "contract_version": "0.1.0",
  "service": {
    "id": "analytics-demo",
    "name": "Analytics",
    "tint": "orange",
    "root_page": "/showcases/analytics/pages/overview.json"
  }
}

{
  "contract_version": "0.1.0",
  "page": {
    "id": "overview",
    "title": "Overview",
    "refresh_interval": 30,
    "items": [
      {
        "type": "section",
        "columns": 3,
        "items": [
          {
            "type": "metric",
            "title": "Users",
            "value": "8,204"
          },
          {
            "type": "metric",
            "title": "Sessions",
            "value": "23,910"
          },
          {
            "type": "metric",
            "title": "Bounce",
            "value": "38%",
            "trend": "-4%",
            "trend_direction": "down",
            "sentiment": "positive"
          }
        ]
      },
      {
        "type": "section",
        "header": "Orders per day",
        "items": [
          {
            "type": "chart",
            "kind": "line",
            "x_label": "Day",
            "y_label": "Orders",
            "series": [
              {
                "label": "This week",
                "points": [
                  {
                    "x": "Mon",
                    "y": 120
                  },
                  {
                    "x": "Tue",
                    "y": 138
                  },
                  {
                    "x": "Wed",
                    "y": 131
                  },
                  {
                    "x": "Thu",
                    "y": 152
                  },
                  {
                    "x": "Fri",
                    "y": 168
                  }
                ]
              }
            ]
          }
        ]
      }
    ]
  }
}

refresh_intervalmetricchart

Auth flow Code only

Server-driven sign-in that grants tokens into the vault; sign-out revokes them. Needs your backend — shown as code only.

Screenshot

{
  "contract_version": "0.1.0",
  "service": {
    "id": "billing",
    "name": "Billing",
    "tint": "pink",
    "guard": {
      "attach": {
        "in": "header",
        "name": "Authorization",
        "scheme": "Bearer",
        "use": "access"
      }
    },
    "root_page": "/pages/account"
  }
}

{
  "contract_version": "0.1.0",
  "page": {
    "id": "login",
    "title": "Sign in",
    "items": [
      {
        "type": "section",
        "items": [
          {
            "type": "field",
            "id": "email",
            "kind": "text",
            "label": "Email",
            "format": "email"
          },
          {
            "type": "field",
            "id": "password",
            "kind": "password",
            "label": "Password"
          },
          {
            "type": "button",
            "title": "Sign in",
            "role": "primary",
            "action": {
              "type": "submit",
              "endpoint": "/auth/login",
              "fields": [
                "email",
                "password"
              ],
              "grant": {
                "access": "access_token",
                "refresh": {
                  "path": "refresh_token",
                  "redeem": "/auth/refresh",
                  "send": {
                    "in": "body",
                    "name": "refresh_token"
                  }
                }
              },
              "on_error": {
                "type": "alert",
                "title": "Sign-in failed",
                "message": "{error.message}"
              }
            }
          }
        ]
      }
    ]
  }
}

{
  "contract_version": "0.1.0",
  "page": {
    "id": "account",
    "title": "Account",
    "items": [
      {
        "type": "section",
        "header": "Profile",
        "items": [
          {
            "type": "row",
            "title": "Plan",
            "value": "Pro"
          },
          {
            "type": "row",
            "title": "Renews",
            "value": "Aug 1, 2026"
          }
        ]
      },
      {
        "type": "section",
        "items": [
          {
            "type": "button",
            "title": "Sign out",
            "role": "destructive",
            "action": {
              "type": "submit",
              "endpoint": "/auth/logout",
              "revoke": true,
              "confirm": {
                "title": "Sign out?",
                "destructive": true
              }
            }
          }
        ]
      }
    ]
  }
}

guardgrantrevokefieldon_error

The live demo is read-only: pages and inline data render, but backend actions (real submit, sign-in, rows_endpoint paging) need a server — that's why the Auth flow is Code only. The domain shown comes from site in astro.config.mjs; in a DEBUG build you can enter localhost:4321 over http to test the dev server.