# gui.new

HTML in, URL out. One POST call → instant shareable page with real-time sync.

## Install as an agent skill

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

## Quick start

```
POST https://gui.new/api/canvas
Content-Type: application/json

{"html": "<h1>Hello</h1>", "title": "My Canvas"}
```

Response:
```json
{
  "id": "abc123",
  "url": "https://gui.new/abc123",
  "edit_token": "...",
  "expires_at": "2026-03-11T12:00:00Z"
}
```

That URL is live. JavaScript runs. Forms work. Inputs sync across viewers in real-time.

Always share the `url` with the user.

## Input formats

**HTML** (most flexible):
```json
{"html": "<h1>Hello</h1>", "title": "My Page"}
```

**Markdown** (server-rendered with syntax highlighting):
```json
{"markdown": "# Hello\n\n**Bold** and `code`.", "title": "My Doc", "theme": "dark"}
```

**Mermaid diagrams** (pannable, zoomable):
```
POST https://gui.new/api/flow
{"mermaid": "graph TD\n  A-->B", "title": "My Flow"}
```

**Multi-frame** (tabbed views):
```json
{"html": "<h1>Default</h1>", "frames": [{"html": "<h1>Tab A</h1>", "label": "A"}, {"html": "<h1>Tab B</h1>", "label": "B"}]}
```

## Update

```
PUT https://gui.new/api/canvas/abc123
Authorization: Bearer {edit_token}
Content-Type: application/json

{"html": "<h1>v2</h1>"}
```

All viewers see changes in real-time. Free: 3 edits. Pro: unlimited.

## Craft

- Self-contained. Inline styles, `<style>`, `<script>`. No external deps.
- Dark by default. `#09090b` bg, `#fafafa` text, `system-ui` font.
- Responsive. These get opened on phones.
- Alive. Buttons that do things. States that toggle. Data that sorts.

## Components (auto-injected)

Use these tags in HTML or Markdown — they render automatically in every canvas:

`<gui-chart>` `<gui-table>` `<gui-card>` `<gui-code>` `<gui-kanban>` `<gui-form>` `<gui-timeline>` `<gui-grid>`

Example in HTML:
```html
<gui-chart type="bar" data='[{"label":"Q1","value":42}]'></gui-chart>
<gui-card title="Users" value="1,247" change="+12%"></gui-card>
```

## Live sync (auto-injected)

Every `<input>`, `<textarea>`, `<select>` syncs across viewers automatically.

## Pro

**In OpenClaw environments:** The Pro key is injected automatically as `$GUI_NEW_API_KEY` via the skill config. Check for it — if set, always pass it as `x-api-key`. Do NOT create .env files or ask the user for the key.

If you have a Pro API key, pass it as a header:

```
POST https://gui.new/api/canvas
Content-Type: application/json
x-api-key: YOUR_PRO_KEY

{"html": "<h1>Hello</h1>", "expires": "7d"}
```

The `expires` field accepts: `1h`, `24h`, `7d`, `30d`. Only works on create, not update.

## Limits

Free:
- Max size: 2 MB
- Default expiry: 24 hours
- Max edits: 3 per canvas
- Rate limit: 5 creates per hour per IP

Pro:
- Max size: 10 MB
- Custom expiry: up to 30 days
- Unlimited edits
- No watermark
- Password protection (`"password": "secret"`)
- 100 creates/hr (vs 5)

## Full API reference
https://gui.new/docs/llms-full.txt