# The `view` cell — arbitrary user render code in the realm
A **`view` cell** runs your own render code **in the realm** (the browser context), imports
**vendored libraries** through the import-map, gets a handle, and draws into a DOM `mount`.
This notebook is the worked example for WS-NOTEBOOK-VENDOR-VIEW: a view cell whose module
`import`s the vendored **`d3-array`** library (placed under `/vendor` and listed in the
committed manifest), computes with it, and renders a tiny SVG bar chart into its mount —
proving the import resolves and the view runs end-to-end.
The pieces:
1. a `type="module"` cell exporting `render(ctx)` — it `import { max, sum } from 'd3-array'`,
2. a `type="view"` cell that names that module (`module="…#render"`) and selects the realm.
The bare specifier `'d3-array'` resolves via the 2a import-map (it maps `d3-array` →
`/vendor/d3-array/src/index.js`). An UNLISTED specifier would throw in the realm loader and
the cell badge would show **ERROR** (FAIL-LOUD) — there is no arbitrary CDN/network import.
// A view render module. Its export is invoked IN THE REALM with the view `ctx`:
// ctx.mount — a DOM element to render into
// ctx.handle — the frozen ViewHandle for this realm (on/call/start/stop/step/dispose)
// ctx.getBinding — read an `in` binding value (data IN)
// ctx.commit — commit a `produces` value (data OUT, serializable-asserted)
// ctx.imports — pre-resolved blessed helpers (makeChartEnv / makeLiveChartController)
//
// The bare import below is resolved by the realm's vendor import-map (Phase 2a). d3-array
// is genuinely-ESM; the import-map maps the bare specifier to the placed /vendor artifact.
import { max, sum } from 'd3-array';
export function render(ctx) {
// A small dataset; compute with d3-array (the WHOLE point — a vendored lib runs in-realm).
const data = [4, 9, 2, 7, 5, 8, 3];
const peak = max(data); // 9
const total = sum(data); // 38
// Render a tiny inline-SVG bar chart into the mount. No physics — pure user render code.
const W = 320, H = 120, pad = 8, n = data.length;
const bw = (W - pad * 2) / n - 4;
const bars = data.map((d, i) => {
const h = Math.round((d / peak) * (H - pad * 2));
const x = pad + i * ((W - pad * 2) / n);
const y = H - pad - h;
return ``;
}).join('');
ctx.mount.innerHTML =
`
` +
``;
}
## What just happened
- The view module ran **in the realm** (same-cell — its render is local; nothing crossed the
renderer↔realm seam).
- `import { max, sum } from 'd3-array'` resolved through the **import-map** to the placed
`/vendor/d3-array/src/index.js` artifact (and its transitive `internmap` bare dep — the
import-map allowlist covers the whole bare-specifier graph).
- The mount shows a d3-computed SVG bar chart with the summary `max=9, sum=38`.
`liveChart=` on a canvas is a **blessed preset** over this same `view` substrate: it is a
same-cell view that imports the blessed chart module (`makeChartEnv`) and drives
`makeLiveChartController` — both available to any view via `ctx.imports`. The Step-1
`liveChart=` path is unchanged; the `view` cell is the general form beneath it.