update_html

ai.trydock/dock · Verify this server

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 <span class="dot"></span>), .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.