Hi everyone,
Just wanted to share a package I’ve built to make it easier to create custom UIs for Cabbage 3 using React:
https://www.npmjs.com/package/cabbage-react
cabbage-react provides React hooks to simplify communication between your UI and the Cabbage host. It handles both sending and receiving of data updates for channel values and properties.
You can find an example implementation here:
Great stuff. This is exactly the type of thing I was hoping for when I redesigned Cabbage 
I’d love to see some screenshots of example UIs.
We love a screenshot here! There is one on the github page. I guess with React anything is possible. The same could probably be said of any JS frontend I suppose.
Hello, sorry for re-opening this topic.
Thanks for the great work!
I was trying out some stuff with React and Vite (even thought i’m not that good)
It seems that everytime I re-open the GUI React is restarting from scratch with different parameters even though in cabbage is still working with the previous.
As you see i’m trying to build some nice UI with would be awesome to have it fixed somehow
There is a chance that some changes I’ve made upstream might have broke this, but let’s see what @hdale94 says first.
I’ll take a look at this tomorrow!
I see you’ve added a sendChannelData-method to the Cabbage class. Should this replace the setting of value by sendParameterUpdate?
No, this is for any widget that needs to just send straight old data to Csound. It bypasses the host. This is an option for controls that the host doesn’t need to know about.
I updated the package with the latest changes from Cabbage about a week ago (to 1.0.1). Are you still having problems?
Did you try the steps to replace the Cabbage UI, found in the example repository README: https://github.com/hdale94/cabbage-react-example. When you’ve completed these steps, can you try loading the plugin in a DAW and see if the UI shows up?
Currently, there is no synchronization between Cabbage and the React UI when working in VS Code. Not sure if @rorywalsh has any information whether this could be possible in the future?
Regarding the synchronisation, it should mirror the behavior typically seen with plugin interfaces. Note that I am implementing the changes we discussed earlier this week within a new branch. These changes are nearly complete, just require some additional testing.
I saw that you updated the cabbage-react code, i tried to rebuild the example project as in the example.
still, everytime I move the parameters, close the GUI and reopen it is just going to default value of the parameter and sometimes randomly just with label like the image.
Alright, thanks for the info. I’m waiting for the changes Rory mentioned since there is currently a problem with exported plugins on windows. Then we should be able to fix this 
Sorry for the wait on this guys, I’m almost ready to merge these changes back into the main branch…
Ok, I’ve merged this new changes - things should work fine now. The new build should be ready soon. I’ve attached the updated index.html and .csd file I used for testing, based on the ones shared in this thread before. Check in particular the index.html for updates you might need to include in your own package.
Latest Custom UI.zip (2.1 KB)
I think the build failed?
Trying again now
You’re a legend Rory, things are working good now
I noticed something when sending a parameterUpdate with a high value, the data received in the message are a lot higher for som reason!
But this is not the case when I keep the range between 0 and 1 
Example.csd (3.1 KB)
Edit: updated the images
Thanks for testing, and sending in an example! I’ll sort this first thing tomorrow
I’ve just triggered a new build. I couldn’t recreate the issue you faced? But I did update my example. One thing I was forgetting to do was send a cabbageIsReadyToLoad message on startup. Some housekeeping tasks weren’t running because of this. I also added some code to show how to update a plain old html slider from Csound. Oh and how to also best handle parameter changes, values, JSON data etc.
const handleMessage = async (event) => {
console.log("Message received:", event.data);
let obj = event.data;
let slider;
if (obj.command === "parameterChange") {
// For parameterChange messages, find slider by paramIdx
slider = obj.paramIdx === 0 ? document.getElementById('slider1') : document.getElementById('slider2');
} else {
// For other messages, find slider by id
slider = document.getElementById(obj.id);
}
if (slider) {
switch (obj.command) {
case "parameterChange":
console.log(`Parameter change for ${obj.paramIdx}:`, obj);
slider.value = obj.value;
break;
case "widgetUpdate":
if (obj.value !== undefined) {
console.log(`Updating ${obj.id} to value:`, obj.value);
slider.value = obj.value;
}
else if (obj.widgetJson !== undefined) {
let widgetObj = JSON.parse(obj.widgetJson);
let bounds = widgetObj.bounds;
if (bounds) {
slider.style.position = 'absolute';
slider.style.top = bounds.top + 'px';
}
// Set value if the UI has just been reopened
if (widgetObj.value !== undefined) {
slider.value = widgetObj.value;
}
}
break;
default:
break;
}
}
};
Automation is working, updating parameters from the UI is working, and updating the frontend from Csound is also working.
Let me know if you continue to have issues with larger ranges.
Update Custom UIs.zip (2.7 KB)