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

Our Free Plans just got better! | Auth0

With up to 25k MAUs and unlimited Okta connections, our Free Plan lets you focus on what you do best—building great apps.

You asked, we delivered! Auth0 is excited to expand our Free and Paid plans to include more options so you can focus on building, deploying, and scaling applications without having to worry about your security. Auth0 now, thank yourself later.

Try free now

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

7 days ago

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