Skip to content
| Marketplace
Sign in
Visual Studio Code>Programming Languages>Hydra Live CodeNew to Visual Studio Code? Get it now.
Hydra Live Code

Hydra Live Code

jdomizz

|
405 installs
| (0) | Free
| Sponsor
Live coding with Hydra in Visual Studio Code
Installation
Launch VS Code Quick Open (Ctrl+P), paste the following command, and press enter.
Copied to clipboard
More Info

🧩 Hydra Live Code

demo

Extension for live coding with Hydra in Visual Studio Code.

Features

  • Supports live coding with Hydra and JavaScript in general.
  • Supports loading Hydra extensions and external JavaScript libraries.
  • Supports OSC communication.
  • Includes p5.js.

You can see a demo project with examples here.

Commands

  • Ctrl/Cmd + Shift + Enter: Eval the active JavaScript document.
  • Ctrl/Cmd + Alt + Enter: Eval a line (or a selection) of code.
  • Alt + Enter: Eval a block of code.
  • Ctrl/Cmd + Shift + S: Take a screenshot of the canvas.
  • Ctrl/Cmd + Shift + V: Start or stop video recording the canvas.

Settings

  • jdomizz.vscode-hydra.width: Set the width of the canvas.
  • jdomizz.vscode-hydra.height: Set the height of the canvas.
  • jdomizz.vscode-hydra.loadScripts: Set the list of scripts to be loaded at startup.

Scripts

Hydra extensions and external JavaScript libraries can be loaded using Hydra's loadScript function or via the jdomizz.vscode-hydra.loadScripts configuration option:

{
    "jdomizz.vscode-hydra.loadScripts": [
        "https://unpkg.com/tone",
        "https://hyper-hydra.glitch.me/hydra-gif.js",
    ]
}

OSC

Open Sound Control is provided by osc-js in bridge mode. It has been configured as follows:

  • Port 41234 is for sending messages
  • Port 41235 is for receiving messages

Use the OSC object to send and receive messages:

OSC.send('/test', value)

OSC.on('/test', (args) => { /* do something with args */ })

Note you can also open and close connections:

OSC.open({ host: '127.0.0.1', port: 8080 })

OSC.close()

p5.js

This extension includes the same wrapper for p5.js as the Hydra web editor. You can check how to use it in the Hydra documentacion.

Assets

Install the Live Server extension to serve assets from your project folder. This way you can use local images and videos.

s0.initImage('http://localhost:5500/image/hydra.jpg')

Issues

Microphones, webcams, screen capture and MIDI do not work due to the Visual Studio Code permissions policy. If you detect any other problem, please open an issue.

License

Distributed under the GNU Affero General Public License.

  • Contact us
  • Jobs
  • Privacy
  • Manage cookies
  • Terms of use
  • Trademarks
© 2025 Microsoft