External Editor Mode

Step 1. Save The Web Page Locally

Right click the MidiToy webpage and choose Save As....

It will save a folder that looks like this:

Miditoy.html
Miditoy_files/pako.js
Miditoy_files/upng.js

Step 2. Add GLSL Wrapper Files

Create a hotreload folder inside Miditoy_files.

Miditoy.html
Miditoy_files/pako.js
Miditoy_files/upng.js
Miditoy_files/hotreload/controls.glsl.js
Miditoy_files/hotreload/common.glsl.js
Miditoy_files/hotreload/a.glsl.js
Miditoy_files/hotreload/b.glsl.js
Miditoy_files/hotreload/c.glsl.js
Miditoy_files/hotreload/d.glsl.js
Miditoy_files/hotreload/image.glsl.js

These files must contain JavaScript, not raw GLSL. The simplest format is:

registerMiditoyShader("a", `
void mainImage(out vec4 fragColor, in vec2 fragCoord) {
    fragColor = vec4(1.0, 0.0, 0.0, 1.0);
}
`);

You can also wire buffer inputs inside the wrapper:

registerMiditoyShader("image", {
    source: `
void mainImage(out vec4 fragColor, in vec2 fragCoord) {
    vec2 uv = fragCoord / iResolution.xy;
    fragColor = texture(iChannel0, uv);
}
`,
    iChannel0: "a",
    iChannel1: "noise"
});

You can also click ⧉ in MidiToy to copy all current tabs as ready-to-paste registerMiditoyShader(...) JavaScript, including buffer wiring.

Step 3. Open Miditoy.html In Your Web Browser

Open Miditoy.html from the folder you just saved.

Step 4. Open The GLSL Wrapper Files In A Text Editor

Open the wrapper files inside Miditoy_files/hotreload.

Step 5. Enable External Editor Mode

Click External Editor to switch shader loading from browser storage to the wrapper files. MidiToy checks those files for changes every 300ms and automatically recompiles.

You're Done

Enjoy using a proper text editor.