WebGPUjs / live shader editor

Edit. Translate. Rebuild.

Choose an existing example. Every shader gets an editable source window with linked WGSL beside it, including native WGSL stages. Typing JavaScript updates the translation; Rebuild applies the complete shader set and restarts the example. A failed build keeps the last working preview.

← All examples
Loading…

Preparing WebGPU…

Loading the selected example.

Ctrl/⌘ + Enter rebuilds. Edits stay in this tab when you switch examples. Reset code restores the original source; the preview changes when you rebuild.

Example setup and animation code

Setup


        

Animation / update