VKO1 Graph Editor BETA

Patch visuals like a synth — connect generators, modifiers, combiners and live audio inputs into signal chains, watch them render live on WebGL, then export straight into VKO1 for Android. Runs the same shader code as the apps.

Quick start

Press ＋ (or N) to open the node library — start with a Template for a ready-made patch.
Drag from an orange Output port to any input port to wire nodes. Tap a connected input to disconnect.
Tap a node to edit its parameters in the left panel. ✕ deletes. Right-click for duplicate / mute / edit code.
Blue ports are float inputs — wire Input nodes (Bass, LFO, Beat Strength…) into them for audio-reactive motion.
⌘Z/⌘⇧Z undo/redo · Alt+M mute selected · scroll to zoom, drag background to pan.

Audio

Bottom of the preview pane: SIM is a clean BPM-clock beat (set the BPM field), MIC uses your microphone, FILE plays an audio file — all drive bass / mid / treble / energy / beat live. MIDI input nodes work over WebMIDI when a device is connected.

Connecting MIDI

Works in Chrome / Edge (Safari has no Web MIDI). Ports are detected when the page loads — reload the tab after plugging anything in, and allow the MIDI permission prompt.

Hardware: plug in any USB-MIDI controller or synth, then add a MIDI_CC node (knobs/faders) or MIDI_Note (keys/pads). Set cc/note and channel — channel is 0-based: 0 here = "channel 1" on your gear. MIDI_Note's anyNote toggle reacts to every note.
From another app or browser tab: route through a virtual MIDI bus — on macOS enable the IAC Driver (Audio MIDI Setup → ⌘2 → double-click IAC → "Device is online"); on Windows use loopMIDI. Free sender to try: Strudel — note("c2 e2 g2").midi() or ccv(sine.slow(2)).ccn(1).midi().
Instant demo: open the editor with #demo-midi — a pre-wired rig (CC 1 → Plasma complexity, any note → reactivity).

Interactive nodes

Some input nodes have controls right on the node: the JogWheel dial (drag ↕, springs back), LFO rate/amp drag-numbers and waveform chips (~ △ ⊓ /), and sliders on Constant and Microphone.

Custom shaders

Library → NEW 2D SHADER or NEW 3D SHADER opens the code editor. 2D shaders implement vec4 vko_main(vec2 uv); 3D shaders implement vko_fragment (+ optional vko_vertex) and render on a real mesh — torus knot, icosphere, cube, plane or sphere. Compile errors show inline. The exact same source runs in VKO1 for Android.

Build shaders with Claude

Stuck on the GLSL? Run Claude for Chrome right next to the editor — it reads the code panel and writes or fixes shaders for you.

Get the extension: install Claude for Chrome from claude.ai/chrome, sign in, and pin it to the toolbar. Needs a Claude account.
Open it on this page: launch the editor, open NEW 2D SHADER (or fork any generator), then open the Claude side panel. Give it permission to see the tab so it can read your shader code and compile errors.
Tell it the contract: 2D shaders implement vec4 vko_main(vec2 uv) with uv in 0..1. Audio and time arrive on the U block: U.time, U.beat, U.beatStrength, U.energy, U.bass, U.mid, U.treble, U.p0–U.p3 (speed / reactivity / complexity / jog), plus get_vko_palette_color(t, U.palette) for the 33 palettes. 3D shaders implement vko_fragment (+ optional vko_vertex). Paste a compile error and ask it to fix.
Prompt ideas: "make a bass-reactive plasma in vko_main using U.bass", "pulse the brightness on U.beat", "why won't this compile?" — then hit compile and iterate.
Hand it the cheat sheet: point Claude at llms.txt — the full shader API and node reference in one file. The editor already links it, so the extension can pick it up; or paste the link into any Claude chat.

Claude can act on the page, so review what it edits before you save. The same shader source runs unchanged in VKO1 for Android.

Export & import

EXPORT (top right) → tabs:

.vko (Android import) — full bundle: graph + your custom shader sources. Import in VKO1 for Android. Note: importing replaces the current scene on the device.
Graph JSON — bare node-graph data.
Android (Vulkan GLSL) — the shader source, engine-ready.
AUv3 Player (.vkograph) — import your shader into the VKO1 Player AUv3 plugin (Metal, auto-converted).
Web / iOS (Metal) / After Effects — auto-adjusted conversions.

IMPORT reads .vko files from here or from the Android app.

Graphs autosave in your browser. Custom shader sources persist per shader.

Install as an app

In Chrome / Edge: menu → Install VKO1 Graph Editor (or the install icon in the address bar). Opens in its own window and works fully offline. Prefer a single file? ⬇ OFFLINE in the editor header downloads a self-contained version that runs from a double-click.

Release notes

Every build we ship, newest first.