WebFoxDot is a web-based interface for the FoxDot or Renardo live coding music environment. It allows you to write and send code to a local FoxDot or Renardo program running on your computer.
Note
WebFoxDoT IS NOT a full web-based version of FoxDot or Renardo. You still need to have FoxDot or Renardo installed on your computer to use WebFoxDot.
We first made WebTroop to replace the old Troop interface, we did it our way so that it was effective and reliable live. As the work was already done, we decided to make a WebFoxDot interface for the live coding community, something more generic that anyone can use.
We know that there are already some people using IDEs like Pulsar or Vim with FoxDot, but we wanted to make something more user-friendly, more visual and focus on the live aspect of FoxDot.
- WebFoxDot is not working with Chrome or other Chromium based browser (Vivaldi, Edge, Brave, Opera, ... ), some shortcuts are not recognized
- Not tested yet on Safari or other web browsers
- Some shortcuts may not work because we don't have tested all configurations (Windows, Linux, MacOs, different browser, different key mapping...)
- Beta tested with Renardo
Warning
This version is in test with Renardo, everything may not work as expected. See the Renardo compatibility section for more information.
- a fully working FoxDot or Renardo installation
- a working SuperCollider installation
- a modern web browser (for now it works only with Firefox)
- the websocket package for Python (install it with
pip install websockets)
- a code editor with syntax highlighting
- a beautiful and responsive interface with resizable panel and console logs
- change font family, code font size and interface font size
- change the code theme with dozens of themes available
- a console log to see the output of FoxDot with the last item appended at the top
- a panel to see all relevant information (Bpm, Scale, Root, Cpu usage, Timer, the current beat modulo, a list of active players and a list of available Loops, Synths, and Fx)
- show the list of active players with their id, name of synth or loop, time of activity (with color based on elapsed time).
- the ability to stop a player by clicking on the list.
- show the solo players with a different color
- a piano roll based on the actual scale and root and the ability to insert note in the editor by clicking on it (
Alt-Por click onRootto enable/disable the piano roll) - a auto-completion feature with the ability to insert new random player, list of synth, list of fx, list of loop and a lot more.
- comment and stop/start a player with just
Alt-x - and a lot more to come...
git clone git@github.com:CrashServer/webFoxDot.git
cd webFoxDotcp config.py.sample config.py
nano config.py
Change the FOXDOT_PATH to your foxdot pathYour startup file is located in the FoxDot directory:
/FoxDot/lib/Custom/startup.py
python server.pyWarning
You don't need to run FoxDot/Renardo manually, the server will start FoxDot/Renardo for you. Also, make sure you have something like this 3 lines printed in your terminal, if not restart from the beginning:
FoxDot started, pid: 79311
WebSocket server started on port 1234
Start FoxDot WebSocket server at ws://localhost:20000cd dist
python -m http.serverWarning
Make sure that your running the server in the dist directory because it's a compiled version of the web interface. For running in development mode, see the Installation with Node.js section.
If you want to send the Supercollider CPU usage to the web interface, follow these steps and go for a crash server (notice how the interface reacts to server load):
In the SuperCollider IDE, run the following code:
b = NetAddr.new("localhost", 20000);
(
r = Routine {
loop {
b.sendMsg("/CPU", round(s.peakCPU,0.01));
1.yield;
};
}.play();
)
You can stop this routine with:
r.stop()If you want to run the web interface in development mode, you need to have Node.js installed on your computer.
git clone git@github.com:CrashServer/webFoxDot.git
cd webFoxDotcp config.js.sample config.js
nano config.js
Change the FOXDOT_PATH to your foxdot path. Not yet fully compatible with Renardo, you have to change the spawn in `server.js` to the correct command. Your startup file is located in the FoxDot directory:
/FoxDot/lib/Custom/startup.py
node server.jsWarning
You don't need to run FoxDot/Renardo manually, the server will start FoxDot/Renardo for you. Also, make sure you have something like this 3 lines printed in your terminal, if not restart from the beginning:
FoxDot started, pid: 79311
WebSocket server started on port 1234
Start FoxDot WebSocket server at ws://localhost:20000npm install
npm run devIn order to make WebFoxDot compatible with Renardo, here are the steps to follow:
Inject the websocket package dependency in the Renardo code:
pipx inject renardo websocketsCopy the content of startup-renardo.py to your Renardo startup file:
This should be located in the Renardo directory, something like:
~/.local/pipx/venvs/renardo/lib/python3.13/site-packages/renardo_lib/Custom/startup.pyAll things that work in FoxDot or Renardo will work in WebFoxDot.
- evaluate a line of code with
Ctrl-Enter - evaluate a block of code with
Ctrl-Alt-Enter - stop all players with
Ctrl-; - auto-completion with
Ctrl-Space - comment a line and stop a player with
Alt-x - you can comment and stop a block with
Ctrl-Alt-x - show the piano roll with
Alt-P - solo a player with
Alt-S - unsolo all players with
Ctrl-Alt-S - increment a value with
Alt-= - decrement a value with
Ctrl-Alt-=
And many more to discover, a full list of shortcuts is available in the config panel.
- Add more interface themes
- Add a vim mode
- a clear console button
- renardo compatibility
Copyright © 2025 CrashServer.
This project is MIT licensed.