← ClaudeAtlas

fused-html-artifactslisted

Authoring standalone HTML artifacts — `scripts/<name>/main.html` documents that Fused and Flow serve full-bleed and wire to a `window.fused` runtime (callUdf / runSql / params). Use when the output of a project is a bespoke interactive HTML page — a custom chart, a form, a report, a small app — that calls UDFs and runs SQL directly, rather than a JSON-UI widget. Covers the `window.fused` API, the `{{ref}}`/`$param` data grammar, load-order gotchas, host differences, and how the artifact gets rendered in front of a human.
fusedio/skills · ★ 5 · Data & Documents · score 63
Install: claude install-skill fusedio/skills
# HTML artifacts — authoring a `main.html` that talks to Fused An **HTML artifact** is an agent-authored, standalone HTML document — `scripts/<name>/main.html` — that the host (Fused's `widget-host`, or the Flow app) serves full-bleed in an iframe and wires to a `window.fused` runtime. You write one self-contained page; the host injects `window.fused`, and your page calls UDFs, runs SQL, and reads/writes params through it. It is backed by the **same UDFs and SQL** the rest of the project uses. It is the **third shape** a `scripts/<name>/` folder can take, alongside a Python UDF (`main.py`) and a JSON UDF (`main.json`): where those are **functions the host runs**, an HTML artifact is a **document the host serves and frames** — a small, self-contained app you author once and the human interacts with directly. ## When to author one (vs a JSON-UI widget) Reach for an HTML artifact when the JSON-UI widget catalog (`fused-widgets`) can't express the interface — a bespoke layout, a custom visualization, a multi-step form, a mini-app with its own interaction logic. Reach for a **JSON-UI widget** (the default) when a dashboard of standard charts / tables / inputs is enough: it's less code, renders on more surfaces (including deployed URLs), and is self-verifiable headlessly. > **HTML artifacts are completely independent from JSON-UI widgets.** Different folder > (`scripts/<name>/main.html`, not `widgets/<stem>.json`), different runtime > (`window.fused`, not the widget renderer).