lecodes-renderer

Formerly canvas-ui. The createCanvasUI(...) factory and Canvas2DPainter keep their names; the npm package is lecodes-renderer.

A clean, portable reimplementation of the UI renderer (the _creatorUI end of the worker authoring layer), built around a canvas backend instead of the DOM. It runs headless under Bun, reuses the existing creator-ui (Yoga) WASM for layout, and can emit the interface as a semantic JSON description as well as paint it to a canvas.

See ARCHITECTURE.md for the design and the C++-port plan.

Usage

import { createCanvasUI, Canvas2DPainter, BrowserHost } from "canvas-ui"

// Headless / tests (deterministic): default HeadlessHost + creator-ui WASM.
const ui = await createCanvasUI()
ui.resize(390, 844)
ui.openScreen(screenNode) // a worker UI node tree

console.log(ui.toText())          // → JSON description of the UI (AI feedback / assertions)

// Browser: paint to a canvas.
const ui2 = await createCanvasUI({ host: new BrowserHost() })
ui2.resize(width, height)
ui2.openScreen(screenNode)
ui2.paint(new Canvas2DPainter(canvas.getContext("2d")!))

ui is a drop-in _creatorUI (openScreen / insertNode / updateStyle / updateNode / …) plus the new rendering surface: resize, renderTree, serialize/toText, paint(painter), and pointerDown/Move/Up.

Test

bun test

Scope

Implemented: screen, box, row, column, text, image, button, input/textarea, scrollable, widget, vlist, video (placeholder), plus pointer input, router (screen history), animations (animateTo/animateFrom + press/focus/responsive layers), gradients, borders, transforms, setSourceRect, tint, background image, registerFont, overflow:hidden, and a simulated keyboard (the UI is re-laid-out above the band, not scaled). Still deferred: toast, scrollbar visuals, true vlist windowing, radial/conic gradients, real video playback. See COMPONENTS.md for the per-component status and ARCHITECTURE.md for the design + C++-port mapping.