UrVis — Multi-Backend 2D Rendering Engine

Part of UrStack, my open-source organization for TypeScript libraries. Siblings: UrColor, UrCharts, UrDock.

Overview

UrVis is a retained-mode 2D scene graph with interchangeable rendering backends. You describe a scene once, and UrVis renders it through SVG, Canvas, WebGL or WebGPU without a line of backend-specific code.

The scene graph tracks dirty regions, so a frame only redraws what actually changed. The same graph runs on the server, where it emits SVG directly or rasterizes to PNG, JPEG and WebP.

Why I built it

Picking a rendering backend usually happens on day one, before you know what the workload looks like, and reversing that choice later means rewriting the drawing layer. SVG is convenient until the node count climbs. WebGL is fast until you need crisp text or server-side output.

UrVis makes the backend a runtime detail, so the scene description outlives the decision.

Key features

• Four interchangeable renderers behind one scene API: SVG, Canvas, WebGL, WebGPU
• A retained-mode scene graph whose dirty marking limits redraws to what changed
• An animation system with keyframes, easings and spring presets, modelled on the Web Animations API
• Server-side rendering: SVG output, or rasterization to PNG, JPEG and WebP through an optional Node package
• Plain TypeScript, with no framework runtime required
• Tree-shakeable ESM, so unused renderers never reach the bundle

Tech stack

TypeScript

WebGL

WebGPU

VitePress

• Core: TypeScript, retained-mode scene graph, ESM
• Backends: SVG, Canvas 2D, WebGL, WebGPU
• Server: Node rasterization to PNG, JPEG, WebP
• Docs: VitePress