Skip to content
dopejs
← All projects

dope-canvas

Design phase

An infinite canvas for large collections of AI-generated web artifacts.

Hundreds of live iframes do not scale; flattening every page to an image loses selection and event targeting. dope-canvas keeps artifacts retained — source, durable state, interaction tree, paint cache and an optional live runtime — so Figma-like selection and activation survive. The repository is at its pre-development baseline: architecture, delivery plan and security model, not yet a working canvas.

Repository ↗

Overview

Every iframe retains a browsing context, DOM/CSS state, a script realm, resources and rendering state, so keeping hundreds of generated pages alive scales badly. The design answer here is a retained artifact model — `artifact = source + durable state + interaction tree + paint cache + optional live runtime` — in which a snapshot is only a paint cache. The document and interaction model stay available for selection, event routing, activation and revision-safe restoration.

The canvas itself owns camera movement, spatial virtualization, live/snapshot lifecycle, interaction metadata, resource budgets and rendering composition; artifacts contribute HTML, CSS and controlled JavaScript. The package split follows those boundaries — protocol, spatial, core, artifact, security, runtime, renderer, editor — and every package is private and versioned 0.0.0, with none presented as a stable public contract.

Two limits are stated up front: the M0 browser-evidence gates have not been exited, so support for experimental HTML-in-Canvas APIs remains a capability rather than a claim; and no license has been selected, so until the owners add one the contents are not offered under an open-source license.

What it does

  • Retained artifact model: a snapshot is only a paint cache, so selection and event targeting survive.
  • Canvas owns camera, spatial virtualization, live/snapshot lifecycle, resource budgets and composition.
  • Package boundaries mirror the design: protocol, spatial, core, artifact, security, runtime, renderer, editor.
  • Security is a first-class package — sanitizer, URL policy, quotas and capabilities — not a later hardening pass.
  • Documented up front: technical design, delivery plan, security model, compatibility strategy, benchmark protocol and open questions.

Get started

Requirements: Node.js 22.12+ and pnpm 10.33.2.