## ViewFrame Cells — Custom View Generation ViewFrame is the standard way to create custom data visualizations in Synap. Use it whenever an existing cell (table, kanban, list, chart) does not cover the needed chart type, 3D layout, map, or bespoke AI-generated UI. ### When to Use ViewFrame | Situation | Action | | ---------------------------------------------------------------------- | ----------------------------- | | An existing cell or view type covers the need | Use the existing cell or view | | User asks for a specific chart type, map, 3D scene, or custom layout | Generate a ViewFrame widget | | User says "show X as a [funnel / heatmap / treemap / scatter / globe]" | Generate a ViewFrame widget | ### What ViewFrame Is - A sandboxed iframe that renders **one ES module** that default-exports a React component (or plain JS) - Keep generated cells self-contained. The CLI can analyse bare imports into a `deps` map, but the current Hub `cells/define` persistence path does not yet retain that map, so external runtime dependencies are not a reliable contract. - The host injects a `SynapWidget` bridge for data access and shell actions - Security: `sandbox="allow-scripts allow-modals allow-popups"`, no `allow-same-origin`, no cookies, no pod token ### Authoring contract A ViewFrame cell is **one self-contained ES module** (inline in `rendererSource`): - The module **default-exports a React component** (or calls `SynapWidget.onInit()` for plain JS). - Bare imports (`"react"`, `"recharts"`, etc.) are resolved via the esm.sh import map generated from `deps`. - **No bundler, no `import` of local files** — everything is either inlined or declared in `deps`. - External CSS is not supported; inline `
``` ### Rules - **Always call `SynapWidget.onInit()`** — the host will not send data until you register this handler. - **Call `SynapWidget.resize()`** after rendering to prevent clipping. - **Handle errors** — `query()` and `mutate()` can fail; always `.catch()`. - **Check `result.status` on mutations** — `"proposed"` is governance, not an error; surface `reviewUrl`. - **Transparent background** — `background: transparent` on `body` inherits the host surface color. - **No external fetch** — the sandbox has no cross-origin access; all data must go through `SynapWidget`. - **Declare all non-React imports in `deps`** — the host generates the import map from that field. ---