update_html
Write an HTML surface's body. Pass any of html / css / js; omitted fields stay unchanged. Pass empty string to clear. The surface renders in a sandboxed iframe on a separate origin (render.trydock.ai) with no access to Dock cookies, storage, or parent DOM — you have free rein inside that boundary. Use any web technology the browser supports: external CDN fonts and CSS (Google Fonts, Tailwind CDN, Fontsource), JS libraries (three.js, GSAP, Chart.js, anime.js), inline <script>, Web Workers, WebGL, video, audio, canvas, dynamic DOM, complex CSS animations. Per-field caps: html 256 KB, css 200 KB, js 200 KB, total 600 KB. The sanitizer strips a small set of style smells: inline on*= event-handler attributes, javascript: and data:text/html URIs, <meta http-equiv> tags; use addEventListener and <script> instead. Layout: Dock renders the surface EDGE-TO-EDGE (full-bleed) inside the workspace — the surface itself is the frame. Do NOT put border-radius, an outer border, or a drop-shadow on the root/outermost element unless the owner explicitly asked for that framing, or the specific design genuinely needs it; keep the page root flush and apply rounding to inner cards only. DESIGN LANGUAGE: Dock injects a base stylesheet into every surface — semantic tokens + a small component kit — that automatically follows each VIEWER's light/dark theme. PREFER these over hardcoded colors so the surface matches Dock and themes correctly for everyone (a surface with hardcoded dark colors looks broken for a light-mode teammate on a shared surface, and vice-versa). Tokens: var(--dock-canvas|surface|surface-muted|border|border-strong|text|text-2|text-muted|accent|accent-ink|data|data-strong|good|warn|crit), var(--dock-radius|shadow|gap); font is Inter via var(--dock-font). Component classes: .dock-card, .dock-stat/.dock-stat-value/.dock-stat-label, .dock-delta.up|.down, .dock-badge.good|warn|crit|neutral|accent (add a ), .dock-btn(.primary), .dock-table (use td.name for the primary cell, .dock-num for tabular figures), .dock-grid, .dock-eyebrow, .dock-row, .dock-avatar, .dock-field + .dock-input, .dock-bars/.dock-bar(.hot). Put .dock-num on any number so it aligns. This is only a DEFAULT floor — write your own CSS to override any of it; nothing in the baseline is !important, so a surface that brings its own styles always wins. Requires editor role.
Input Schema
| Name | Required | Description | Default |
|---|---|---|---|
| js | No | JS source. Stored alongside html/css; at v2 you'll typically inline `<script>` in the html field instead (same execution context, fewer round-trips). 200 KB cap (matches the top-level `update_html` description; the server enforces `HTML_SURFACE_LIMITS.jsBytes` = 200_000). | |
| css | No | CSS source. Applied inside the sandbox iframe. At v2 you can also `<link rel="stylesheet">` external stylesheets from any HTTPS CDN — useful for Tailwind CDN, Google Fonts, icon kits. | |
| html | No | HTML body. Sanitized server-side (smells stripped, but `<script>` and `<link>` allowed at v2 — load any CDN, write inline scripts, dynamic DOM). Use `validate_html` first for a pre-flight check. | |
| slug | Yes | The workspace slug. | |
| surface_slug | No | Optional html surface slug. Omit to write the primary html surface. |