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.
• 🤖 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.

Initialize a new VectoJS Canvas Scene in seconds:

# Install core packages
bun add @vectojs/core @vectojs/ui

import { Scene } from '@vectojs/core';
import { Button, Text, Stack } from '@vectojs/ui';

// Initialize full-screen scene
const canvas = document.getElementById('my-canvas') as HTMLCanvasElement;
const scene = new Scene(canvas, { maxFPS: 60 });

// Layout a Stack with text & button
const layout = new Stack({ direction: 'vertical', gap: 16 });
layout.add(new Text('Hello VectoJS!', { font: 'bold 24px sans-serif' }));
layout.add(new Button('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.