Canvas UI

Canvas UI is an open-source library of creative, framework-agnostic interface components rendered with canvas and WebGL. It places fluid simulations, shaders, glass effects, fire, particles, and 3D scenes over live HTML interfaces. Through the experimental HTML-in-canvas API, effects can redraw the page while text remains selectable and links remain clickable. Unsupported browsers automatically fall back to standard WebGL overlays so the interface continues working. Components are available for React, Solid, Preact, Vue, Svelte, and vanilla JavaScript. Each component ships as editable source through a shadcn-compatible registry with typed properties and practical defaults. The library is built for developers who want expressive visual effects without replacing accessible, interactive HTML.

Features

Live HTML WebGL effects
Framework-agnostic source components
Experimental HTML-in-canvas rendering
Automatic WebGL overlay fallback
Shadcn-compatible component registry
Typed zero-configuration properties

Project Samples

Project Activity

See All Activity >

Follow Canvas UI

Canvas UI Web Site

Other Useful Business Software

$300 Free Credits for Your Google Cloud Projects

Start building on Google Cloud with $300 in free credits. No commitment, no credit card required until you're ready to scale.

Launch your next project with $300 in free Google Cloud credits—no strings attached. Test, build, and deploy without risk. Use your credits across the entire Google Cloud platform to find what works best for your needs. After your credits are used, continue with always-free tier services. Only pay when you're ready to scale. Sign up in minutes and start exploring.

Start Free Trial

Rate This Project

User Reviews

Be the first to post a review of Canvas UI!

Additional Project Details

Programming Language

TypeScript

Related Categories

TypeScript Libraries

Registered

2026-07-27

Similar Business Software

SurveyJS

SurveyJS is an embeddable, self-hosted, white-label form builder for teams building custom forms, surveys, questionnaires, and other data collection tools inside web applications. It runs entirely on the client and is fully compatible with all modern JavaScript frameworks, including React,...

See Software
Three.js

Three.js is a JavaScript 3D library. The aim of the project is to create an easy-to-use, lightweight, cross-browser, general-purpose 3D library. The current builds only include a WebGL renderer but WebGPU (experimental), SVG and CSS3D renderers are also available in the examples. To actually be...

See Software
DHTMLX

DHTMLX is a JavaScript UI library that provides a set of highly customizable and flexible components for building modern and responsive web applications. The library includes more than 30 UI components, such as Gantt, Scheduler, Kanban, diagrams, charts, grids, spreadsheets, calendars, trees,...

See Software
Webix

JavaScript UI library and framework for speeding up web development. JS Framework for cross-platform web Apps development 102 UI widgets and feature-rich CSS / HTML5 JavaScript controls. Save at least 3000+ development hours by using ready-made widgets and UI controls. Develop Web UI 30% faster....

See Software
VisuallyJs

VisuallyJs is a JavaScript and TypeScript library for building professional diagrams, charts, dashboards, and rich graphical front ends. The platform supports React, Angular, Vue, Svelte, JavaScript, and TypeScript, giving development teams flexible options for building visual applications....

See Software
Emotion

Emotion is a performant, flexible CSS-in-JS library designed for writing CSS styles using JavaScript, supporting both string-based and object-based styles while delivering a strong developer experience, complete with source maps, labels, and testing utilities. It offers two powerful usage...

See Software