HYDRACTRL is built on top of Hydra, a live code-able video synth created by Olivia Jack, and offers additional features geared towards live performances where you don't necessarily want to be coding.
Store and recall up to 64 scenes (4 banks of 16 slots) with thumbnail previews for quick access during performances.
Control visuals with Korg nanoPAD2, including XY pad for dynamic modulation.
Powered by CodeMirror 6 with Hydra syntax highlighting, code completion, 5 themes and basic error reporting.
The setup code tab allows you to have some code that runs before each sketch. This way you can make sure that your audio settings and globals are always available.
Utilize the Korg nanoPAD2's XY pad with a built-in basic physics engine for expressive control. Also work with your mouse!
Make your visuals dance to the music. Hydra's `a` object provides FFT data out of the box for audio-reactive patches.
HYDRACTRL comes with Hydra's documentation built-in, so you can always refer to it while coding.
Save and share your entire scene banks (all 64 slots) with thumbnail previews for easy organization and collaboration.
Press Alt/⌥ + U to copy a link with your current sketch encoded right in the
URL. Anyone opening it sees your sketch running instantly — without touching their own
saved scenes. Perfect for sharing patches in chats and on socials.
New features are built as plugins on a small core with an event bus and error isolation — a broken plugin can't take down a live set. Want to build your own? Check out the plugin documentation.
| Shortcut | Function |
|---|---|
Ctrl/⌘ + ` |
Toggle UI visibility (works on any keyboard layout) |
Esc |
Bring back the hidden UI |
Ctrl/⌘ + Enter |
Run the current code |
Ctrl/⌘ + S |
Save code to the active slot |
Ctrl/⌘ + Y |
Toggle auto-run |
Alt/⌥ + U |
Copy the current sketch as a shareable URL |
Alt/⌥ + 0-9 / A-F |
Select slot 1-16 (HEX) in the current bank |
Alt/ ⌥ + ← / Alt/⌥ + → |
Cycle between banks (when no MIDI device is connected) |
Alt/⌥ + X |
Export scene bank |
Alt/⌥ + I |
Import scene bank |
The foundation of HYDRACTRL is Hydra, a powerful JavaScript library for live coding visuals created by Olivia Jack. Hydra uses WebGL to create stunning visual patterns and is inspired by analog modular synthesizers.
Built with modern JavaScript and leveraging Bun for improved performance, HYDRACTRL offers a responsive experience even with complex visuals.
The code editor is powered by CodeMirror 6, providing syntax highlighting, error reporting, and an optimized editing experience for live performances.
MIDI integration is implemented using the Web MIDI API, allowing connectivity with hardware controllers for tactile control during performances.
Features like URL sharing and the audio watchdog are plugins on a small, error-isolated core. Build your own with the plugin documentation.
If you're new to Hydra, these resources will help you get started:
