Echo Editor Source Reference

Echo is an experimental shader editor where the shader is the editor, designed for livecoding visuals in a similar spirit to tools like Hydra, Bonzomatic and VoxelChant. Echo aims to lean into the livecoding aesthetic by making the code integral to the visuals, embracing the more chaotic programming environment it creates with that approach.

The shader is recompiled on each keystroke, with the visuals updating immediately if the shader compiled successfully. For each character in the editor you can freely modify its text color, background color, and the actual character that's displayed on the screen. You can also implement visual feedback loops or audio reactive visuals using builtin functions provided by the Editor, or even extend the vertex and fragment shaders directly. In practice, it's not too different to writing a shader on Shadertoy, but most of the time you're working with a much coarser grid and have more opportunities to play with text and symbols.

The project is written in TypeScript, using CodeMirror for the core text editor but with a custom WebGPU renderer. Shaders are written in WESL, a WGSL langauge extension that allows for importing shader packages like lygia. It runs entirely in the browser, but also runs as a standalone desktop app using tauri.