Syntax - Tasty Web Development Treats · Wes Bos & Scott Tolinski - Full Stack JavaScript Web Developers

959: TypeScript on the GPU with TypeGPU creator Iwo Plaza

December 1, 2025·26 min·2 clips

TypeGPU lets you write shaders in JavaScript instead of WebGPU's complex shading language.

Iwo Plaza, creator of TypeGPU, is interviewed at JSNation. He describes his background in C++ and OpenGL before moving to JavaScript, motivated primarily by the browser's ability to share work instantly across platforms. TypeGPU was born from frustration with WebGPU's raw API, which requires communicating with the GPU by sending instructions in WGSL and packaging data as typed binary arrays with precise memory padding — errors in padding produce wrong pixels with no meaningful debug output. TypeGPU solves the data layer first: using Zod-inspired schema definitions, developers define struct shapes once and the library handles both TypeScript type generation and serialization to GPU-compatible binary format. This creates a single source of truth that eliminates the class of bugs caused by mismatches between CPU and GPU data representations. The second and more recent feature is writing shaders directly in JavaScript. Functions marked with a 'use gpu' directive are processed by a compiler plugin built on the Unjs ecosystem, which extracts the function's AST, compresses it to a format called TinyEST (tiny embeddable syntax tree), injects that metadata into the JavaScript bundle, and generates WGSL at runtime when the function is used. This allows the shader to import and reference CPU-side values with full TypeScript type safety, similar to how tRPC and SvelteKit eliminate REST API boilerplate for server calls. Plaza describes an upcoming Three.js integration where TypeGPU functions can be passed directly to Three.js's TSL node system to customize material shaders or write compute shaders without leaving JavaScript. He emphasizes that TypeGPU is not a Three.js replacement — for putting a 3D model on a page, Three.js remains the right tool — but a low-level layer for developers who want direct GPU control, which can be composed with higher-level frameworks. The project's documentation philosophy emerged from a constraint: whenever an API was hard to explain in a paragraph, it was probably the wrong API. Examples serve simultaneously as documentation, design validation, and end-to-end regression tests.

Listen to the show on

Apple Podcasts Spotify

Play clips from this episode More from Syntax - Tasty Web Development Treats