Visual Primitives

Building blocks you compose into any layout. Mix, match, and nest freely. Each renders in ~10ms as PNG, SVG, or PDF.

🧩 Data Primitives

⭕

Try in Playground →

Ring

Circular progress indicator. Show completion, goals, or ratios.

{"type":"Ring","current":80,"target":100,"label":"Calories"}

📊

Try in Playground →

BarChart

Comparative data bars. Side-by-side values at a glance.

{"type":"BarChart","title":"Sales","labels":["Mon","Tue","Wed"],"values":[120,200,150]}

📈

Try in Playground →

LineChart

Time-series sparkline. Trends over time, minimal and clear.

{"type":"LineChart","title":"Growth","labels":["Jan","Feb","Mar"],"values":[100,250,400]}

▓░

Try in Playground →

Progress

Horizontal progress bar. Track completion of any metric.

{"type":"Progress","label":"Upload","value":72,"max":100}

🔢

Try in Playground →

Stat

Big number with trend indicator. KPIs at a glance.

{"type":"Stat","value":"$24K","label":"Revenue","change":"+18%"}

✏️

Try in Playground →

Text

Styled text block. Headings, labels, body text.

{"type":"Text","content":"Hello World","size":"xl","weight":"bold"}

📋

Try in Playground →

List

Items with icon + value. Meals, tasks, line items.

{"type":"List","items":[{"label":"Task 1","value":"Done","icon":"✅"}]}

▦

Try in Playground →

Table

Rows and columns. Structured data display.

{"type":"Table","headers":["Name","Score"],"rows":[["Alice","95"],["Bob","87"]]}

🏷️

Try in Playground →

Badge

Status pill / tag. Labels, categories, statuses.

{"type":"Badge","text":"Active","color":"green"}

—

Try in Playground →

Divider

Visual separator between sections.

{"type":"Divider"}

↕

Try in Playground →

Spacer

Vertical space between elements.

{"type":"Spacer","size":24}

📐 Layout Containers

↔️

Row

Horizontal container. Lay children side by side.

↕️

Column

Vertical container. Stack children top to bottom.

⊞

Grid

Grid container. Auto-wrap children into rows.

📄 HTML Rendering

Beyond primitives, you can render arbitrary HTML + inline CSS. Perfect for custom layouts, branded templates, and complex designs.

# Render custom HTML

curl -X POST https://api.clawsoup.com/v1/render \

-H "Authorization: Bearer cs_live_..." \

-d '{"html": "<div style=\'padding:32px;background:#0f172a;color:white\'>Hello!</div>"}'

Try All Primitives in the Playground →