{"id":51522969,"url":"https://github.com/vectojs/vectojs","last_synced_at":"2026-07-28T01:00:36.290Z","repository":{"id":367320649,"uuid":"1280205760","full_name":"vectojs/vectojs","owner":"vectojs","description":"Canvas-native UI runtime with a Virtual Math Tree, semantic accessibility projection, WebGL/WebGPU backends, and agent-drivable controls.","archived":false,"fork":false,"pushed_at":"2026-07-25T20:53:48.000Z","size":71579,"stargazers_count":2,"open_issues_count":1,"forks_count":0,"subscribers_count":0,"default_branch":"main","last_synced_at":"2026-07-25T21:10:03.931Z","etag":null,"topics":["a11y","accessibility","ai-agents","canvas","high-performance-ui","runtime","scene-graph","semantic-ui","threejs","typescript","webgl","webgpu"],"latest_commit_sha":null,"homepage":"https://vectojs.org","language":"TypeScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/vectojs.png","metadata":{"files":{"readme":"README.md","changelog":"CHANGELOG.md","contributing":"CONTRIBUTING.md","funding":null,"license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":"SECURITY.md","support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null,"zenodo":null,"notice":null,"maintainers":null,"copyright":null,"agents":"AGENTS.md","dco":null,"cla":null}},"created_at":"2026-06-25T11:14:26.000Z","updated_at":"2026-07-25T20:11:04.000Z","dependencies_parsed_at":null,"dependency_job_id":"2b32dcc6-da5b-4d19-9f9e-e1a7fbb7c82c","html_url":"https://github.com/vectojs/vectojs","commit_stats":null,"previous_names":["xuepoo/vecto-ui","vectojs/vectojs"],"tags_count":118,"template":false,"template_full_name":null,"purl":"pkg:github/vectojs/vectojs","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/vectojs%2Fvectojs","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/vectojs%2Fvectojs/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/vectojs%2Fvectojs/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/vectojs%2Fvectojs/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/vectojs","download_url":"https://codeload.github.com/vectojs/vectojs/tar.gz/refs/heads/main","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/vectojs%2Fvectojs/sbom","scorecard":null,"host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":286080680,"owners_count":35970843,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2026-07-20T02:08:10.276Z","status":"online","status_checked_at":"2026-07-27T02:00:06.776Z","response_time":101,"last_error":null,"robots_txt_status":"success","robots_txt_updated_at":"2025-07-24T06:49:26.215Z","robots_txt_url":"https://github.com/robots.txt","online":true,"can_crawl_api":true,"host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["a11y","accessibility","ai-agents","canvas","high-performance-ui","runtime","scene-graph","semantic-ui","threejs","typescript","webgl","webgpu"],"created_at":"2026-07-08T18:00:12.884Z","updated_at":"2026-07-28T01:00:36.223Z","avatar_url":"https://github.com/vectojs.png","language":"TypeScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"\u003cp align=\"center\"\u003e\n  \u003cpicture\u003e\n    \u003csource media=\"(prefers-color-scheme: dark)\" srcset=\"https://cdn.vectojs.org/brand/vectojs-logo-dark.svg\"\u003e\n    \u003cimg src=\"https://cdn.vectojs.org/brand/vectojs-logo-light.svg\" alt=\"VectoJS\" width=\"380\"\u003e\n  \u003c/picture\u003e\n\u003c/p\u003e\n\n\u003ch1 align=\"center\"\u003eVectoJS\u003c/h1\u003e\n\n\u003cp align=\"center\"\u003e\n  \u003cem\u003eA canvas-native UI runtime: render like a scene engine, remain operable like the DOM.\u003c/em\u003e\n\u003c/p\u003e\n\n\u003cp align=\"center\"\u003e\n  \u003ca href=\"https://github.com/vectojs/vectojs/actions/workflows/ci.yml\"\u003e\u003cimg alt=\"CI\" src=\"https://github.com/vectojs/vectojs/actions/workflows/ci.yml/badge.svg\"\u003e\u003c/a\u003e\n  \u003ca href=\"./LICENSE\"\u003e\u003cimg alt=\"MIT license\" src=\"https://img.shields.io/badge/license-MIT-6366f1.svg\"\u003e\u003c/a\u003e\n\u003c/p\u003e\n\n\u003cp align=\"center\"\u003e\n  \u003ca href=\"https://www.npmjs.com/package/@vectojs/core\"\u003e\u003cimg alt=\"core\" src=\"https://img.shields.io/npm/v/@vectojs/core?label=core\u0026color=22d3ee\"\u003e\u003c/a\u003e\n  \u003ca href=\"https://www.npmjs.com/package/@vectojs/ui\"\u003e\u003cimg alt=\"ui\" src=\"https://img.shields.io/npm/v/@vectojs/ui?label=ui\u0026color=22d3ee\"\u003e\u003c/a\u003e\n  \u003ca href=\"https://www.npmjs.com/package/@vectojs/text\"\u003e\u003cimg alt=\"text\" src=\"https://img.shields.io/npm/v/@vectojs/text?label=text\u0026color=22d3ee\"\u003e\u003c/a\u003e\n  \u003ca href=\"https://www.npmjs.com/package/@vectojs/layout\"\u003e\u003cimg alt=\"layout\" src=\"https://img.shields.io/npm/v/@vectojs/layout?label=layout\u0026color=22d3ee\"\u003e\u003c/a\u003e\n  \u003ca href=\"https://www.npmjs.com/package/@vectojs/math\"\u003e\u003cimg alt=\"math\" src=\"https://img.shields.io/npm/v/@vectojs/math?label=math\u0026color=22d3ee\"\u003e\u003c/a\u003e\n  \u003ca href=\"https://www.npmjs.com/package/@vectojs/animation\"\u003e\u003cimg alt=\"animation\" src=\"https://img.shields.io/npm/v/@vectojs/animation?label=animation\u0026color=22d3ee\"\u003e\u003c/a\u003e\n  \u003ca href=\"https://www.npmjs.com/package/@vectojs/markdown\"\u003e\u003cimg alt=\"markdown\" src=\"https://img.shields.io/npm/v/@vectojs/markdown?label=markdown\u0026color=22d3ee\"\u003e\u003c/a\u003e\n  \u003ca href=\"https://www.npmjs.com/package/@vectojs/three\"\u003e\u003cimg alt=\"three\" src=\"https://img.shields.io/npm/v/@vectojs/three?label=three\u0026color=22d3ee\"\u003e\u003c/a\u003e\n  \u003ca href=\"https://www.npmjs.com/package/@vectojs/devtools\"\u003e\u003cimg alt=\"devtools\" src=\"https://img.shields.io/npm/v/@vectojs/devtools?label=devtools\u0026color=22d3ee\"\u003e\u003c/a\u003e\n  \u003ca href=\"https://www.npmjs.com/package/@vectojs/graph3d\"\u003e\u003cimg alt=\"graph3d\" src=\"https://img.shields.io/npm/v/@vectojs/graph3d?label=graph3d\u0026color=22d3ee\"\u003e\u003c/a\u003e\n  \u003ca href=\"https://www.npmjs.com/package/@vectojs/video-exporter\"\u003e\u003cimg alt=\"video-exporter\" src=\"https://img.shields.io/npm/v/@vectojs/video-exporter?label=video-exporter\u0026color=22d3ee\"\u003e\u003c/a\u003e\n\u003c/p\u003e\n\nVectoJS draws a scene graph onto one `\u003ccanvas\u003e`. Layout, hit-testing, animation, text flow, and\nrender scheduling operate on a Virtual Math Tree (VMT), while interactive entities project a thin\nsemantic DOM layer for accessibility and automation.\n\nThis is not an ECS and it does not claim allocation-free rendering. It is a retained-mode rendering\nruntime for interfaces whose visual or interactive complexity is a poor fit for one DOM element per\nshape, glyph, point, or row.\n\n[Documentation](https://vectojs.org/learn/introduction/) ·\n[Live demos](https://vectojs.org/demos/) ·\n[Component reference](https://vectojs.org/reference/ui-components/) ·\n[Issues](https://github.com/vectojs/vectojs/issues)\n\n## Why VectoJS\n\n- **Canvas-native visuals** — Canvas 2D is the default renderer; WebGL point batching and WebGPU\n  compute paths cover high-volume workloads.\n- **Semantic projection** — buttons, links, inputs, checkboxes, sliders, and other controls expose\n  role/name/state through transparent DOM counterparts.\n- **Real browser input** — `Input` and `TextArea` mirror native controls, preserving IME composition,\n  selection, clipboard, undo, and automation APIs.\n- **Mathematical interaction** — transforms, bounds, spatial hashing, event capture/bubble, clipping,\n  and hit-testing live in one coordinate model.\n- **Deterministic rendering tools** — on-demand redraw, fixed-step `Scene.step()`, and the video\n  exporter support tests, simulations, and offline capture.\n- **Framework-neutral** — mount a canvas from React, Vue, Svelte, vanilla TypeScript, or a Three.js\n  scene; VectoJS does not own your application state.\n\n## Packages\n\n| Package                                                | Purpose                                                                                                                        |\n| ------------------------------------------------------ | ------------------------------------------------------------------------------------------------------------------------------ |\n| [`@vectojs/core`](./packages/core)                     | Scene/Entity runtime, events, hit-testing, accessibility projection, Canvas/WebGL/WebGPU support; re-exports the engines below |\n| [`@vectojs/text`](./packages/text)                     | Standalone text-shaping primitives: BiDi, Arabic shaping, CSS-parity typography, MSDF fonts, prepared content grids            |\n| [`@vectojs/layout`](./packages/layout)                 | Standalone layout engine: line breaking, BiDi-aware inline layout, exclusion flow, off-thread layout worker                    |\n| [`@vectojs/math`](./packages/math)                     | Standalone spatial/physics math: spatial hash grid broad-phase and spring physics                                              |\n| [`@vectojs/animation`](./packages/animation)           | Standalone easing library plus tween and spring value drivers                                                                  |\n| [`@vectojs/ui`](./packages/ui)                         | Canvas-native layout, form, content, data, navigation, and overlay components                                                  |\n| [`@vectojs/markdown`](./packages/markdown)             | Markdown + TeX-math rendering entity (`Markdown`, `CodeBlock`) built on `@vectojs/ui`, with `marked` + MathJax                 |\n| [`@vectojs/three`](./packages/three)                   | Project a VectoJS scene onto a Three.js texture and route raycast/XR input back into 2D                                        |\n| [`@vectojs/devtools`](./packages/devtools)             | In-page Virtual Math Tree inspector: entity tree, click-to-pick, live geometry readout and nudging                             |\n| [`@vectojs/graph3d`](./packages/graph3d)               | 3D force-directed graph rendering on instanced Three.js, with an in-house dependency-free Barnes-Hut layout                    |\n| [`@vectojs/video-exporter`](./packages/video-exporter) | Fixed-step Chromium + FFmpeg H.264 MP4 export for local modules or hosted scenes                                               |\n\n## Install\n\n```bash\nbun add @vectojs/core\nbun add @vectojs/ui       # optional high-level components\n```\n\nThe packages are standard ESM/CJS npm packages and also work with npm, pnpm, and yarn.\n\n## Quick start\n\n```html\n\u003cdiv id=\"app\"\u003e\u003ccanvas id=\"canvas\"\u003e\u003c/canvas\u003e\u003c/div\u003e\n\u003cstyle\u003e\n  #app {\n    position: relative;\n    width: 100vw;\n    height: 100vh;\n  }\n  canvas {\n    display: block;\n    width: 100%;\n    height: 100%;\n  }\n\u003c/style\u003e\n```\n\n```ts\nimport { Scene } from '@vectojs/core';\nimport { Button, Input, Stack, Text, Toggle } from '@vectojs/ui';\n\nconst canvas = document.querySelector\u003cHTMLCanvasElement\u003e('#canvas')!;\nconst scene = new Scene(canvas, { maxFPS: 60 });\nscene.renderMode = 'onDemand';\n\nconst panel = new Stack({ direction: 'vertical', gap: 14 });\npanel.setPosition(40, 40);\npanel.add(new Text('Runtime settings', { font: '700 24px Inter' }));\npanel.add(new Input({ width: 280, placeholder: 'Project name' }));\npanel.add(new Toggle({ checked: true, label: 'GPU acceleration' }));\npanel.add(\n  new Button('Save', {\n    onClick: () =\u003e console.log('saved'),\n  }),\n);\n\nscene.add(panel);\nscene.start();\n\nwindow.addEventListener('resize', () =\u003e {\n  scene.resize(window.innerWidth, window.innerHeight);\n});\n\n// Release renderers, workers, observers, and projected DOM when unmounting.\n// scene.destroy();\n```\n\nThe visual controls are canvas-rendered. Their semantic counterparts remain discoverable:\n\n```ts\nawait page.getByRole('textbox', { name: 'Project name' }).fill('Nexus');\nawait page.getByRole('button', { name: 'Save' }).click();\n```\n\n## Architecture\n\n\u003cp align=\"center\"\u003e\n  \u003cimg src=\"https://cdn.vectojs.org/assets/architecture.svg\" alt=\"VectoJS Architecture\"\u003e\n\u003c/p\u003e\n\nThe DOM projection is deliberately not the visual renderer. It carries semantics and native input;\nthe canvas remains the source of visible pixels.\n\n## Where it fits\n\nGood candidates:\n\n- infinite canvases, graphs, timelines, whiteboards, node editors;\n- dense dashboards, traces, order books, virtualized data, streaming output;\n- particle fields, simulations, educational/diagramming tools;\n- 2D panels embedded in Three.js/WebXR;\n- interfaces that need both canvas scale and role-based accessibility/automation.\n\nPrefer ordinary HTML/CSS for document-first pages, SEO-heavy prose, native text selection, small\nstatic forms, or applications that do not benefit from a retained scene graph.\n\n## Render and interaction model\n\n1. Add `Entity` instances to a `Scene`.\n2. Layout resolves local boxes and transforms.\n3. Dirty scenes render through the selected backend.\n4. Pointer input is mapped into scene coordinates, spatially queried, then dispatched through\n   capture and bubble phases.\n5. Interactive entities synchronize role/name/state and native input through the semantic layer.\n\nRead the [core guide](https://vectojs.org/learn/core-scene/) for lifecycle and rendering, and\nthe [accessibility guide](https://vectojs.org/learn/accessibility/) before shipping controls.\n\n## Devtools\n\n`@vectojs/devtools` ships an in-page VMT inspector — a canvas-rendered panel (dogfooding\n`@vectojs/ui`) with the live entity tree, click-to-pick, a selection highlight overlay, geometry\nreadouts, and arrow-key nudging:\n\n```ts\nimport { attachDevtools } from '@vectojs/devtools';\n\nconst devtools = attachDevtools(scene);\n// …\ndevtools.detach();\n```\n\n## Agent skills\n\nThe [vectojs-skills](https://github.com/vectojs/vectojs-skills) repository packages Claude/agent\nskills that teach coding agents the VectoJS paradigm — most importantly\n`vectojs-paradigm`, which replaces HTML/CSS instincts with scene-graph thinking and a\nstate-space debugging ladder (inspect numbers and `getA11yTree()` before reaching for\nscreenshots). Skills also cover the core runtime, responsive layout, UI/animation, performance,\nThree.js embedding, and the video exporter. Install them into `.claude/skills` or\n`.agents/skills` of any project that uses VectoJS.\n\n## Demos\n\nThe separate [vectojs-website](https://github.com/vectojs/vectojs-website) repository hosts live,\nsource-available stress tests:\n\n- large danmaku streams and WebGPU particle fields;\n- streaming Markdown/chat rendering;\n- a knowledge graph;\n- a VectoJS panel embedded in a Three.js scene;\n- game-style pointer and keyboard interaction.\n\nPerformance depends on renderer, entity shape, text, hardware, and workload. Use the checked-in\nbenchmarks instead of treating demo counts as universal guarantees.\n\n## Development and verification\n\n```bash\nbun install\njust verify          # = just check + just test (the pre-push habit)\n```\n\n`just check` is the same gate CI runs: `oxfmt --check` (formatting authority),\n`oxlint --deny-warnings`, `markdownlint-cli2`, and `actionlint`. Individual\nrecipes are available too — run `just --list` to see them all:\n\n```bash\njust fmt             # format in place (oxfmt)\njust test-pkg core   # one package's unit tests\njust wasm            # build the Rust wasm core\njust e2e             # real-browser e2e (HiDPI + text projection)\n```\n\nAdditional reproducible workloads:\n\n```bash\nbun run benchmark     # real browser frame-time workloads\nbun run compare:dom   # CDP layout/style/heap comparison\nbun run compare       # text-layout comparison\n```\n\nThe project is pre-1.0. Read package changelogs before upgrading and pin versions in production.\n\n## License\n\n[MIT](./LICENSE) © 2026 Xuepoo\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fvectojs%2Fvectojs","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fvectojs%2Fvectojs","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fvectojs%2Fvectojs/lists"}