What is Learn vgpu?
Learn vgpu is an interactive studio for vgpu, Vercel Labs’ tiny TypeScript WebGPU API. Five calls. One value per step. Then Run.
You edit vec4f() on step 1 and watch the canvas change. Then you walk init, effect, frame, target, and html. Same program in the browser, on Dawn (vgpu/node), and in CI (vgpu/mock). The goal is to get someone from “I have heard of WebGPU” to “I can write one file that is a live canvas, an OG PNG, and a pixel snapshot.”
Why We Built It
WebGPU is easy to name and hard to start. Most libraries want to be an engine. vgpu wants to be a small function: init, effect, frame, target.
The thing that actually matters is one program with three lives. A tab. A serverless PNG. A CI snapshot. Bindings are WGSL names, not bind-group indexes. Change a value, hit Run.
We built Learn vgpu so people can step those five calls instead of only reading the spec.
A Hands-On Way to See the Same Program Three Ways
This is not a slide deck about shaders.
You open the studio, change the four numbers in vec4f, press Run, and the canvas updates. Later steps name one value: tint, the sin frequency, the offscreen vec4, or the HTML warp. No login. No API key. Sign in with your En Dash account if you want progress on another machine.
Built Around Five Calls, Then Three Runtimes
Two doors.
The studio is the lesson: init (one handle), effect (bindings are names), frame (explicit passes), target (readback / OG), html (HTML-in-Canvas extra credit). Each step asks you to change one value.
Runtimes are the same file: browser canvas, vgpu/node (Dawn, no window), vgpu/mock (CI, no GPU). The holographic foil on html-in-canvas.dev is extra credit, not this lesson.
Useful for Engineers Who Need GPU Work Outside the Tab
This is for people who already ship web graphics and are staring at a WebGPU sample that only lives in a window.
OG images. Pixel diffs. Headless CI. If the shader only has to paint a canvas, a demo is enough. Learn vgpu is for the other case: the same WGSL as a live canvas, a serverless PNG, and a snapshot.
Built to Make the Idea Click
Some product ideas fit in one sentence. vgpu needs a color you can change.
Learn vgpu exists so more people can see what the tiny API is for, when an engine is overkill, and what it looks like when one program leaves the tab.
Not official Vercel. A community resource from En Dash, same shop as Learn LangGraph, Learn LangChain, Learn AgentCore, html-in-canvas.dev, and learn-pretext.com.