{
  "id": 9501451,
  "title": "Canvas UI Ships 35 HTML-in-Canvas Components That Run WebGL and WebGPU Effects Over Live DOM",
  "url": "https://urgent.news/2026/09/24/canvas-ui-ships-35-html-in-canvas-components-that-run-webgl-and",
  "topic": "tech",
  "section": "Tech",
  "published": "2026-09-24T06:02:00.000Z",
  "source": {
    "name": "InfoQ",
    "slug": "infoq",
    "url": "https://www.infoq.com/news/2026/09/canvas-ui-webgl/"
  },
  "original_language": "en",
  "account": "Canvas UI, an open-source component library developed by the creator of React Bits, David Haz, has recently been released. This innovative library is the first to utilize the experimental HTML-in-Canvas API, enabling GPU effects to be applied over live, interactive page content. The library includes 35 diverse components, such as fluid, fire, glass lenses, ASCII filters, VHS grain, and particle reveals. Each effect comes with both WebGL and WebGPU implementations using GLSL and WGSL via vgpu, respectively. These components are compatible with a variety of frameworks including React, Solid, Preact, Vue, Svelte, and vanilla TypeScript.\n\nThe library's approach involves integrating the live DOM into a canvas, capturing it with drawElementImage, uploading it as a texture, and then manipulating it through shaders. This method ensures that text remains selectable, links are clickable, and the content stays accessible. However, to utilize the library, users need Chrome with the canvas-draw-element flag, or an origin trial token, which is currently limited to a single domain and is available in Chrome versions 148 through 150.\n\nInstallation of Canvas UI involves copying the code directly into the repository, necessitating reinstallation whenever local edits need to be reconciled. For users looking to switch between WebGL and WebGPU renderers, the process generally involves replacing the installed file with a -webgpu registry item, which includes vgpu and @webgpu/types. The project also notes that with Chrome's 150 update, texElementImage2D and copyElementImageToTexture require no migration, as these functions are handled through the 2D API and standard texImage2D or copyExternalImageToTexture methods.\n\nThe library has received positive feedback from the community, with shadcn praising it as one of the most impressive registries they have encountered, and the Chrome for Developers account commending the empowerment of new frameworks through HTML-in-canvas. Feedback from Flavio Copes highlights the library's thoughtful engineering, including responsive behavior with IntersectionObserver, consideration for reduced motion preferences, and proper cleanup of textures, programs, and listeners upon unmount. While the project's dependence on a Chrome-specific feature might raise concerns about Google's potential dominance in web technologies, the project is open to standardization and is being developed in collaboration with Mozilla and Apple. Notably, the standardization process requires widespread implementations before official standardization.",
  "summary": "Canvas UI is an open-source component library created by David Haz, utilizing the experimental HTML-in-Canvas API. It features 35 components that render GPU effects on live page content while maintaining accessibility. The library integrates with multiple frameworks and requires specific Chrome versions for full functionality. By Daniel Curtis",
  "key_points": [],
  "editors_take": null,
  "illustration": null,
  "coverage": {
    "outlets": 1,
    "also_reported_by": []
  },
  "ai_generated": true,
  "disclaimer": "Summaries, key points and the editor’s take are written by software from other outlets’ reporting and may contain errors — always check the linked original."
}