gui-new

The official SDK for gui.new — instant shareable HTML canvases via API.

Post HTML, get a shareable link. Every canvas gets multiplayer cursors, real-time sync, and persistent state for free.

Install

npm install gui-new

Quick Start

import { createGui } from 'gui-new'

const gui = createGui()

// Create a canvas
const canvas = await gui.create({
  title: 'My Dashboard',
  html: '<h1 style="color:white">Hello World</h1>'
})

console.log(canvas.url) // https://gui.new/abc123xyz

API

createGui(config?)

Create a client instance.

const gui = createGui({
  baseUrl: 'https://gui.new' // default
})

gui.create(options)

Create a new canvas.

const canvas = await gui.create({
  html: '<h1>Hello</h1>',    // required — HTML content (max 2MB)
  title: 'My Canvas',         // optional — display name
  frames: [                    // optional — multiple tabs
    { html: '<p>Tab 1</p>', label: 'First' },
    { html: '<p>Tab 2</p>', label: 'Second' }
  ]
})

// Returns:
// {
//   id: 'abc123xyz',
//   url: 'https://gui.new/abc123xyz',
//   edit_token: 'tok_...',
//   expires_at: '2026-02-28T16:00:00Z'
// }

gui.update(id, editToken, options)

Update an existing canvas. All viewers see changes in real-time.

await gui.update(canvas.id, canvas.edit_token, {
  html: '<h1>Updated!</h1>'
})

gui.subscribe(id, callback)

Listen for real-time updates via SSE.

const unsubscribe = gui.subscribe(canvas.id, (data) => {
  console.log('Canvas updated:', data.html)
})

// Stop listening
unsubscribe()

Built-in Features

Every canvas automatically gets:

• Multiplayer cursors — all viewers see each other
• Cursor chat — press / to type ephemeral messages
• Emoji reactions — press E for radial emoji wheel
• Input sync — all form inputs sync across viewers in real-time
• State persistence — form state survives after all viewers leave
• Component library — <gui-chart>, <gui-table>, <gui-kanban>, <gui-timeline>, <gui-form>, <gui-card>, <gui-grid>, <gui-code>

Limits

| | | |---|---| | Rate limit | 5 canvases/hour per IP | | Max size | 2MB per canvas | | Expiry | 24 hours | | Visibility | All canvases are public |

AI Agent Example

import { createGui } from 'gui-new'

const gui = createGui()

// Agent generates analysis, posts it as a canvas
const analysis = generateAnalysis(data)
const { url } = await gui.create({
  title: 'Q4 Revenue Analysis',
  html: renderToHtml(analysis)
})

// Send the link to the user
sendMessage(`Here's your analysis: ${url}`)

Links

• Website: gui.new
• API Docs: gui.new/docs
• Author: @dylanfeltus

License

MIT