Canvas-native UI runtime with a Virtual Math Tree, semantic accessibility projection, WebGL/WebGPU backends, and agent-drivable controls.
Welcome to the official GitHub organization of VectoJS. We are building a modern, performant, and accessible canvas-based UI paradigm. By throwing away traditional HTML/CSS rendering overhead and replacing it with a backend-agnostic layout engine, VectoJS delivers high-performance interfaces for creative coding, 3D math arts, simulations, and data dashboards.
- ⚡ WebGPU & WebGL Native: Seamlessly transitions from high-efficiency Canvas 2D to compute-heavy WebGPU particle simulations.
- 🌲 Virtual Math Tree (VMT): Core scene-graph architecture managing hierarchical transformations, layout reflows, and transitions.
- ♿ Semantic DOM Projection: Bridges canvas rendering with screen-readers by dynamically synthesizing and mapping readable semantic accessibility nodes.
- ⌨️ Full Keyboard & AT Support: Composite widgets (tree, grid, menu, tabs, radio group) ship real WAI-ARIA roles with roving-tabindex keyboard models, plus forced-colors (High Contrast) awareness.
- 🤖 Agent-Friendly Architecture: Specially structured hooks and selectors that allow AI coding assistants (like Gemini and Claude) to inspect, drive, and write UI components natively.
| Repository | Description | Status |
|---|---|---|
| vectojs | The core Bun monorepo: core, ui, text, layout, math, animation, markdown, three, devtools, graph3d, video-exporter. | Active |
| vectojs-website | The official documentation site and reference guides, powered by Astro. | Live (vectojs.org) |
| vectojs-gallery | The VectoJS Native community showcase site. A full Full-Canvas app. | Live (gallery.vectojs.org) |
| vectojs-skills | System prompts, coding patterns, and agentic workflows to pair-program VectoJS. | Active |
Initialize a new VectoJS Canvas Scene in seconds:
# Install core packages
bun add @vectojs/core @vectojs/uiimport{Scene}from'@vectojs/core';import{Button,Text,Stack}from'@vectojs/ui';// Initialize full-screen sceneconstcanvas=document.getElementById('my-canvas')asHTMLCanvasElement;constscene=newScene(canvas,{maxFPS: 60});// Layout a Stack with text & buttonconstlayout=newStack({direction: 'vertical',gap: 16});layout.add(newText('Hello VectoJS!',{font: 'bold 24px sans-serif'}));layout.add(newButton('Click Me',{onClick: ()=>console.log('Clicked!')}));scene.add(layout);scene.start();We welcome all developers to contribute and submit their creations.
- To showcase your creative work (animations, math-art, games), submit a Pull Request to vectojs-gallery following the sandboxed contribution guidelines.
- To improve the runtime or report issues, head over to the vectojs monorepo.