# Mount, update, and dispose
Own one Pibbl root for a canvas and replace its content without creating another controller.

## APIs demonstrated

- [pibbl](/reference/functions/pibbl/) from `@pibbl/core`
- [Canvas](/reference/types/canvas-runtime/) from `@pibbl/core`
- [PibblController](/reference/types/canvas-runtime/) from `@pibbl/core`

## Complete example

[Plain source](/minimal/lifecycle/mount.tsx). Run as a browser module after the document body exists. TSX uses `jsx: "react-jsx"` and `jsxImportSource: "@pibbl/core"`.

```tsx
import { pibbl, Rectangle, type Canvas, type PibblController } from "@pibbl/core";

const canvas: Canvas = document.createElement("canvas");
canvas.width = 360;
canvas.height = 180;
document.body.append(canvas);
const controller: PibblController = pibbl(
  canvas,
  <Rectangle
    style={{ left: 30, top: 30, width: 220, height: 100, fill: "#087e8b" }}
  />,
);
const update = document.createElement("button");
update.textContent = "Update root";
update.onclick = () => {
  pibbl(
    canvas,
    <Rectangle
      style={{ left: 60, top: 30, width: 220, height: 100, fill: "#b83970" }}
    />,
  );
};
const stop = document.createElement("button");
stop.textContent = "Dispose";
stop.onclick = () => {
  controller.dispose();
  update.disabled = true;
  stop.disabled = true;
};
document.body.append(update, stop);
window.addEventListener("pagehide", () => controller.dispose(), { once: true });

```

## Usage notes

- One canvas has at most one live mount. dispose() is idempotent.

## Documentation version

Documentation built with @pibbl/core 0.0.2, revision 272a94a. ALPHA — NOT FOR PRODUCTION USE.