Skip to main content
The @std/dynamic template lets you build custom UIs by composing a tree of components. Unlike other templates that render a single content type, dynamic templates give you full control over layout and structure.

​
Examples

​
Simple Example: Login Form

A basic login form using Card, Stack, Input, and Button components. 
curl -X POST https://genui.sh/api/artifacts \
  -H "Authorization: Bearer $GENUI_API_KEY" \
  -H "Content-Type: application/json" \
  -d '{
    "template": "@std/dynamic",
    "title": "Login Form",
    "content": {
      "root": "card",
      "elements": {
        "card": {
          "key": "card",
          "type": "Card",
          "props": { "title": "Welcome back", "subtitle": "Sign in to your account" },
          "children": ["form"]
        },
        "form": {
          "key": "form",
          "type": "Stack",
          "props": { "direction": "vertical", "gap": "md" },
          "children": ["emailInput", "passwordInput", "submitBtn"]
        },
        "emailInput": {
          "key": "emailInput",
          "type": "Input",
          "props": { "label": "Email", "type": "email", "placeholder": "you@example.com" }
        },
        "passwordInput": {
          "key": "passwordInput",
          "type": "Input",
          "props": { "label": "Password", "type": "password", "placeholder": "Enter your password" }
        },
        "submitBtn": {
          "key": "submitBtn",
          "type": "Button",
          "props": { "text": "Sign in", "variant": "primary", "fullWidth": true }
        }
      }
    }
  }'

​
Comprehensive Example: Analytics Dashboard

A full dashboard with metrics, charts, tables, and activity feed. 
curl -X POST https://genui.sh/api/artifacts \
  -H "Authorization: Bearer $GENUI_API_KEY" \
  -H "Content-Type: application/json" \
  -d '{
    "template": "@std/dynamic",
    "title": "Analytics Dashboard",
    "content": {
      "root": "dashboard",
      "elements": {
        "dashboard": {
          "key": "dashboard",
          "type": "Stack",
          "props": { "direction": "vertical", "gap": "lg" },
          "children": ["header", "metricsGrid", "chartsGrid", "bottomSection"]
        },
        "header": {
          "key": "header",
          "type": "Stack",
          "props": { "direction": "horizontal", "justify": "between", "align": "center" },
          "children": ["title", "headerBadge"]
        },
        "title": {
          "key": "title",
          "type": "Heading",
          "props": { "level": "h1", "text": "Dashboard Overview" }
        },
        "headerBadge": {
          "key": "headerBadge",
          "type": "Badge",
          "props": { "text": "Live", "variant": "success" }
        },
        "metricsGrid": {
          "key": "metricsGrid",
          "type": "Grid",
          "props": { "columns": 4, "gap": "md" },
          "children": ["metric1", "metric2", "metric3", "metric4"]
        },
        "metric1": {
          "key": "metric1",
          "type": "Metric",
          "props": { "label": "Total Revenue", "value": "$45,231", "trend": "up", "trendValue": "+20.1%" }
        },
        "metric2": {
          "key": "metric2",
          "type": "Metric",
          "props": { "label": "Active Users", "value": "2,350", "trend": "up", "trendValue": "+15%" }
        },
        "metric3": {
          "key": "metric3",
          "type": "Metric",
          "props": { "label": "Conversion Rate", "value": "3.2%", "trend": "down", "trendValue": "-0.4%" }
        },
        "metric4": {
          "key": "metric4",
          "type": "Metric",
          "props": { "label": "Avg Order Value", "value": "$89", "trend": "neutral", "trendValue": "0%" }
        },
        "chartsGrid": {
          "key": "chartsGrid",
          "type": "Grid",
          "props": { "columns": 2, "gap": "md" },
          "children": ["revenueCard", "trafficCard"]
        },
        "revenueCard": {
          "key": "revenueCard",
          "type": "Card",
          "props": { "title": "Revenue Over Time" },
          "children": ["revenueChart"]
        },
        "revenueChart": {
          "key": "revenueChart",
          "type": "Chart",
          "props": {
            "type": "area",
            "data": [
              { "month": "Jan", "revenue": 4000 },
              { "month": "Feb", "revenue": 3000 },
              { "month": "Mar", "revenue": 5000 },
              { "month": "Apr", "revenue": 4500 },
              { "month": "May", "revenue": 6000 },
              { "month": "Jun", "revenue": 5500 }
            ],
            "config": {
              "categoryKey": "month",
              "series": [{ "key": "revenue", "label": "Revenue", "color": "#6366f1" }]
            }
          }
        },
        "trafficCard": {
          "key": "trafficCard",
          "type": "Card",
          "props": { "title": "Traffic Sources" },
          "children": ["trafficChart"]
        },
        "trafficChart": {
          "key": "trafficChart",
          "type": "Chart",
          "props": {
            "type": "donut",
            "data": [
              { "source": "Organic", "value": 45 },
              { "source": "Direct", "value": 30 },
              { "source": "Referral", "value": 15 },
              { "source": "Social", "value": 10 }
            ],
            "config": {
              "categoryKey": "source",
              "series": [{ "key": "value" }]
            }
          }
        },
        "bottomSection": {
          "key": "bottomSection",
          "type": "Grid",
          "props": { "columns": 2, "gap": "md" },
          "children": ["ordersCard", "activityCard"]
        },
        "ordersCard": {
          "key": "ordersCard",
          "type": "Card",
          "props": { "title": "Recent Orders" },
          "children": ["ordersTable"]
        },
        "ordersTable": {
          "key": "ordersTable",
          "type": "Table",
          "props": {
            "columns": [
              { "key": "id", "header": "Order ID" },
              { "key": "customer", "header": "Customer" },
              { "key": "amount", "header": "Amount", "align": "right" },
              { "key": "status", "header": "Status" }
            ],
            "rows": [
              { "id": "#3210", "customer": "Alice Johnson", "amount": "$250.00", "status": "Completed" },
              { "id": "#3209", "customer": "Bob Smith", "amount": "$125.00", "status": "Processing" },
              { "id": "#3208", "customer": "Carol White", "amount": "$89.00", "status": "Completed" }
            ],
            "config": { "striped": true }
          }
        },
        "activityCard": {
          "key": "activityCard",
          "type": "Card",
          "props": { "title": "Recent Activity" },
          "children": ["activityList"]
        },
        "activityList": {
          "key": "activityList",
          "type": "List",
          "props": {
            "items": [
              { "text": "New user registered", "description": "2 minutes ago" },
              { "text": "Order #3210 completed", "description": "15 minutes ago" },
              { "text": "Payment received", "description": "1 hour ago" },
              { "text": "New review submitted", "description": "2 hours ago" }
            ]
          }
        }
      }
    }
  }'

​
Example Response

{
  "id": "art_dyn_abc123",
  "template": "@std/dynamic",
  "title": "Analytics Dashboard",
  "status": "active",
  "url": "https://genui.sh/a/art_dyn_abc123",
  "createdAt": "2024-01-15T12:00:00Z"
}

​
Content Schema

​
content.root
string
required
The key of the root element in the elements map. This is where rendering starts.
​
content.elements
object
required
A flat map of element definitions keyed by unique string IDs. Each element defines its type, props, and optional children.

​
Element Structure

Each element in the elements map has this structure: 
{
  "key": "uniqueId",
  "type": "ComponentName",
  "props": { ... },
  "children": ["childKey1", "childKey2"]
}
FieldTypeRequiredDescription
keystringYesUnique identifier matching the map key
typestringYesComponent type (see supported components below)
propsobjectYesComponent-specific properties
childrenstring[]NoArray of child element keys (for layout components)

​
Supported Components

The dynamic template supports 21 components across 5 categories.

​
Layout Components

Components that contain and arrange other components.

​
Card

Container with header, content area, and optional footer.
PropTypeRequiredDefault
titlestring | nullNo-
subtitlestring | nullNo-
footerstring | nullNo-
Has Children: Yes

​
Grid

Responsive grid layout with 1-4 columns.
PropTypeRequiredDefault
columnsnumber (1-4)No2
gap”sm” | “md” | “lg”No”md”
Has Children: Yes

​
Stack

Flex container for horizontal or vertical layouts.
PropTypeRequiredDefault
direction”horizontal” | “vertical”No”vertical”
gap”sm” | “md” | “lg”No”md”
align”start” | “center” | “end” | “stretch”No”stretch”
justify”start” | “center” | “end” | “between” | “around”No”start”
Has Children: Yes

​
Tabs

Tabbed navigation with content panels.
PropTypeRequiredDefault
tabsarray of {id, label}Yes-
defaultTabstring | nullNo-
Has Children: Yes (children must have matching tabId props)

​
Content Components

Components for displaying text and messages.

​
Heading

Typography heading (h1-h4).
PropTypeRequiredDefault
level”h1” | “h2” | “h3” | “h4”No”h2”
textstringYes-

​
Text

Styled paragraph text.
PropTypeRequiredDefault
textstringYes-
variant”default” | “muted” | “lead”No”default”

​
Markdown

Rich markdown content with GitHub Flavored Markdown support.
PropTypeRequiredDefault
contentstringYes-

​
Alert

Status message with icon.
PropTypeRequiredDefault
variant”info” | “success” | “warning” | “error”No”info”
titlestring | nullNo-
messagestringYes-

​
Divider

Horizontal separator, optionally with centered label.
PropTypeRequiredDefault
labelstring | nullNo-

​
Data Components

Components for displaying data and metrics.

​
Chart

Chart visualization (line/bar/area/pie/donut).
PropTypeRequiredDefault
type”line” | “bar” | “area” | “pie” | “donut”Yes-
titlestring | nullNo-
descriptionstring | nullNo-
dataarray of recordsYes-
configobject | nullNo-
footerstring | nullNo-
Config object:
FieldTypeDefault
categoryKeystring”name”
seriesarray of {key, label, color}-
showGridbooleantrue
showLegendbooleantrue
stackedbooleanfalse
horizontalbooleanfalse

​
Table

Data table with optional search, pagination, sorting, and export.
PropTypeRequiredDefault
captionstring | nullNo-
columnsarray of column definitionsYes-
rowsarray of recordsYes-
configobject | nullNo-
Column definition:
FieldTypeDefault
keystring-
headerstring-
align”left” | “center” | “right""left”
sortablebooleanfalse
Config object:
FieldTypeDefault
enableSearchbooleanfalse
enablePaginationbooleanfalse
enableExportbooleanfalse
pageSizenumber10
stripedbooleanfalse

​
Metric

KPI metric with value, trend indicator, and label.
PropTypeRequiredDefault
labelstringYes-
valuestringYes-
trend”up” | “down” | “neutral” | nullNo-
trendValuestring | nullNo-
descriptionstring | nullNo-
iconstring | nullNo-

​
Badge

Status badge or tag indicator.
PropTypeRequiredDefault
textstringYes-
variant”default” | “secondary” | “success” | “warning” | “error” | “outline”No”default”

​
Progress

Progress bar with percentage.
PropTypeRequiredDefault
valuenumber (0-100)Yes-
labelstring | nullNo-
showValuebooleanNofalse
variant”default” | “success” | “warning” | “error”No”default”

​
List

Ordered or unordered list with optional icons.
PropTypeRequiredDefault
itemsarray of {text, icon?, description?}Yes-
orderedbooleanNofalse

​
Avatar

User avatar with image or initials fallback.
PropTypeRequiredDefault
srcstring | nullNo-
altstringYes-
fallbackstringYes-
size”sm” | “md” | “lg”No”md”

​
Interactive Components

Components for user interaction and navigation.

​
Accordion

Collapsible accordion sections.
PropTypeRequiredDefault
itemsarray of {title, content}Yes-
multiplebooleanNofalse
External link (opens in new tab).
PropTypeRequiredDefault
textstringYes-
hrefstringYes-
variant”default” | “muted”No”default”

​
Input

Text input field with optional label and icon.
PropTypeRequiredDefault
labelstring | nullNo-
placeholderstring | nullNo-
type”text” | “email” | “password” | “number” | “tel” | “url”No”text”
disabledbooleanNofalse
iconstring | nullNo-

​
Form Components

Components for building forms.

​
Button

Clickable button with variants.
PropTypeRequiredDefault
textstringYes-
variant”primary” | “secondary” | “outline” | “ghost”No”primary”
size”sm” | “md” | “lg”No”md”
disabledbooleanNofalse
fullWidthbooleanNofalse

​
FormField

Form field wrapper with label, description, and error message.
PropTypeRequiredDefault
labelstring | nullNo-
descriptionstring | nullNo-
errorstring | nullNo-
requiredbooleanNofalse
Has Children: Yes

​
Use Cases

  • Dashboards: Analytics, admin panels, monitoring interfaces
  • Forms: Multi-step wizards, settings pages, data entry
  • Reports: Custom layouts combining metrics, charts, and tables
  • Landing Pages: Marketing content with flexible layouts
  • Documentation: Interactive guides with accordions and tabs