# packages/core/src/lib/pibbl.ts This is the source snapshot used to build these API details. [View this revision on GitHub](https://github.com/benlesh/pibbl/blob/272a94aaf62e0bd6ad8726a4c607a76a9ec44ca1/packages/core/src/lib/pibbl.ts#L22). [Back to reference](/reference/functions/pibbl/)

1 import { GLOBAL_STATE } from './global-state.js';
2 import { mountPibbl } from './mount-pibbl.js';
3 import { assertCompatibleRootNode } from './element/children.js';
4 import { PibblController, type PibblNode } from './types.js';
5 import { update } from './update.js';
6 import type { PibblConfig } from './surface/types.js';
7 
8 /**
9  * Mounts or updates a canvas render component on a given HTMLCanvasElement.
10  * The first mount captures the surface configuration; later calls update only
11  * the root element until that controller is disposed.
12  * @param canvas The canvas to render on
13  * @param element The Pibbl element to render
14  * @param config The mount lifetime, logical viewport, fit, and pixel density. See
15  * {@link PibblConfig} .
16  * @returns The stable {@link PibblController} for this canvas; dispose it to release the mount.
17  *
18  * @see {@link PibblNode}
19  * @see {@link PibblConfig}
20  * @see {@link PibblController}
21  */
22 export function pibbl(
23   canvas: HTMLCanvasElement,
24   element: PibblNode,
25   config?: PibblConfig,
26 ): PibblController {
27   assertCompatibleRootNode(element);
28   const mountedInstance = GLOBAL_STATE.pibblInstances.get(canvas);
29   if (mountedInstance) {
30     update(canvas, element);
31     return mountedInstance.controller;
32   }
33 
34   const controller = mountPibbl(canvas, element, config);
35   if (GLOBAL_STATE.pibblInstances.has(canvas)) {
36     update(canvas, element);
37   }
38   return controller;
39 }
40

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