Code-Backed Shader Fills & Effects

Shaders in Design are code, not opaque assets. Each shader is a GLSL fragment source + JSON uniforms manifest persisted directly in the screen HTML, rendered live by a self-contained WebGL runtime that is embedded in the same HTML — so shaders work in the editor, in shared links, and in exported standalone files. Users see and edit the GLSL in the Code panel; uniform knobs appear automatically in the inspector (Fill → Shader paint type, and Effects → Shader).

The canonical format module is shared/shader-fills.ts. Always prefer its helpers over hand-assembling markup.

Persisted format (v1)

One definition block per shader (place before </body>):