New web development tools Canvas UI and M3E Canvas released

Two new web development and design tools have been introduced to enhance visual effects and UI prototyping.

Canvas UI, created by David Haz, is an open-source component library that allows developers to overlay rich visual effects like liquid, fire, mist, and glass shattering onto web pages. It utilizes the experimental “html-in-canvas” browser feature, which enables the rendering of DOM elements within a Canvas element. This allows effects to be applied to real HTML, ensuring that underlying text and buttons remain interactive. The library supports various frameworks including React, Vue, Svelte, and Solid, and offers both WebGL and WebGPU rendering options.

M3E Canvas is a design tool focused on Material 3 Expressive layouts. It allows users to build mobile and desktop interfaces via drag-and-drop components. The tool features interactive screen transitions, such as fades and slides, which can be previewed in real-time. A key functionality is its ability to automatically generate AI coding prompts based on the designed layout, which can be used with tools like Claude Code or Codex. It also supports theme customization and can be self-hosted using Node.js.