API Reference

Install as an agent skill

Works with Cursor, Claude Code, Codex, Windsurf, OpenClaw, and any agent supporting the Skills protocol.

npx skills add stratuslabs/gui-new-skill --skill gui-new -g

Base URL

https://gui.new/api

Create a new canvas. Returns a shareable URL. Accepts HTML, Markdown, or structured components.

Request Body

* One of html or markdown is required. Use <gui-*> component tags directly in either format.

Pro API Key

Pass as a header to unlock Pro limits:

x-api-key: YOUR_PRO_KEY

Examples

curl -X POST https://gui.new/api/canvas \
  -H 'Content-Type: application/json' \
  -d '{
    "title": "My Dashboard",
    "html": "<h1 style=\"color:white\">Hello World</h1>"
  }'

curl -X POST https://gui.new/api/canvas \
  -H 'Content-Type: application/json' \
  -d '{
    "markdown": "# Sprint Report\n\nShipped **3 features** this week.",
    "title": "Sprint Report"
  }'

curl -X POST https://gui.new/api/canvas \
  -H 'Content-Type: application/json' \
  -d '{
    "html": "<gui-grid columns=\"2\"><gui-card title=\"Revenue\" value=\"$12,450\" change=\"+8.2%\"></gui-card><gui-chart type=\"bar\" data=\'[{\"label\":\"Q1\",\"value\":42}]\'></gui-chart></gui-grid>",
    "title": "Dashboard"
  }'

curl -X POST https://gui.new/api/canvas \
  -H 'Content-Type: application/json' \
  -d '{
    "html": "<h1>Default view</h1>",
    "frames": [
      {"html": "<h1 style=\"color:red\">Option A</h1>", "label": "Red"},
      {"html": "<h1 style=\"color:blue\">Option B</h1>", "label": "Blue"}
    ]
  }'

Response

{
  "id": "abc123xyz",
  "url": "https://gui.new/abc123xyz",
  "edit_token": "tok_...",
  "expires_at": "2026-02-28T16:00:00Z",
  "pro": false,
  "format": "html"
}

Create a Mermaid diagram. Rendered as a pannable, zoomable SVG. Supports flowcharts, sequence, class, state, ER, gantt, pie, mindmap, timeline.

curl -X POST https://gui.new/api/flow \
  -H 'Content-Type: application/json' \
  -d '{
    "mermaid": "graph TD\n  A[Start] --> B{Decision}\n  B -->|Yes| C[Do it]\n  B -->|No| D[Skip]",
    "title": "My Flow"
  }'

Update an existing canvas. Requires edit_token. All viewers see changes live via SSE. Free: 3 edits. Pro: unlimited.

Headers

Body fields

curl -X PUT https://gui.new/api/canvas/abc123xyz \
  -H 'Content-Type: application/json' \
  -H 'Authorization: Bearer tok_...' \
  -d '{"html": "<h1>Updated!</h1>"}'

Extend canvas expiry by 24 hours from now.

curl -X POST https://gui.new/api/canvas/abc123xyz/extend

Server-Sent Events stream. Receive real-time updates when canvas content changes.

const source = new EventSource(
  'https://gui.new/api/canvas/abc123xyz/events'
);

source.onmessage = (e) => {
  const data = JSON.parse(e.data);
  if (data.type === 'update') {
    // data.html, data.title, data.frames
  }
};

Events: connected (on subscribe), update (content changed).

Component Library

Auto-injected into every canvas. No imports needed — just use the HTML tags.

<gui-chart type="bar" data='[{"label":"Q1","value":42},{"label":"Q2","value":58}]'></gui-chart>

<gui-table data='[{"name":"Alice","role":"Eng"},{"name":"Bob","role":"PM"}]'></gui-table>

<gui-card title="Users" value="12,847" change="+12.3%"></gui-card>

<gui-code language="python">def hello(): print("world")</gui-code>

<gui-kanban columns='[{"title":"Todo","items":["Task 1"]},{"title":"Done","items":["Task 2"]}]'></gui-kanban>

<gui-timeline data='[{"date":"Mar 1","title":"Launch"}]'></gui-timeline>

<gui-form fields='[{"name":"email","type":"email","label":"Email"}]'></gui-form>

<gui-grid columns="3">...</gui-grid>

* Pie and radar charts require Pro. Form inputs sync across all viewers automatically.

Built-in Features

Every canvas automatically gets:

Limits

Free tier requires no account or API key. Rate limited by IP address.

SDKs

npm install gui-new

import { GuiNew } from 'gui-new'
const gui = new GuiNew()

const canvas = await gui.create('<h1>Hello</h1>')
console.log(canvas.url)

await gui.update(canvas.id, '<h1>v2</h1>', canvas.edit_token)

pip install gui-new

import gui_new

canvas = gui_new.create(
    "<h1>Hello</h1>",
    title="My Dashboard"
)
print(canvas.url)

gui_new.update(canvas.id, "<h1>v2</h1>", canvas.edit_token)

For AI agents

Point your agent at these files to teach it gui.new: