Ok, so I think I have a bit of a unique use case here. I have an app built in Bubble.io Which is basically a ReactFlow Component. (I hate bubble but I did this because I struggled for weeks to get Vue Flow or similar to work in WeWeb, but someone built an easy to use Plugin for Bubble). I’ll eventually pay someone to build it in weweb down the road, but for now I have to settle with this to get my idea built and to market.
So I’ll be embedding the Bubble app as an iframe in my WeWeb app, and will use a JWT token with Xano to make sure I call the right data (logging the user into the bubble app to get the data)
When a user clicks on a node I have a popup that shows dynamic data related to that node, and they can add and edit data as well.
My Issue:
The Bubble.io database is super restricting when it comes to storing data due to their lack of JSON fields. It gets really messy. And using Xano as the ONLY database the bubble side runs off of will cost me too much in API Workload units because of Bubble’s stupid pricing setup.
My Question:
Is it possible to have a user click a node in the iframe, and somehow send that event to weweb to trigger a workflow? This would allow me to us weweb for the popup instead, and all of the nodes related data can be stored in Xano. This would give me considerably more flexibility with data manipulation. Then all I need the bubble datbase for is holding the data that I need for the ReactFlow component, and an API call to Xano to create a database connection to the node.
you can communicate between iframes with postMessage or Broadcast Channel. it will require code both on bubble and weweb. in weweb when you handle the message you can trigger a global workflow from javascipt using wwLib.wwWorkflow.executeGlobal
I would prefer to integrate a custom code component in weweb. what was the problem with Vue Flow integration?
I did a quick test and I was able to get it working well with the postMessage.
My concern is exactly what @Broberto brought up with edge cases. I could be wrong but the method “feels” like one of those things that could cause issues.
The issue with VueFlow is that I couldnt get a number of things working. The edges (lines between the nodes), I couldnt get the drag and drop aspect of the canvas working properly etc.
the tutorials or docs on a custom component are way over my head and it would take me weeks to try and get it working. I already spent about a week trying to get it to work and then I found this solution because I really need to get the project moving along.
I’m thinking that eventually I’ll pay someone to build me the component down the road, but its not something I want to invest a bunch of money into until the entire thing is at least validated.
That being said, if anyone has a component like this ready to go I’ll happy pay $100 for it lol.
Works for me just fine. I just thrown their example into WeWeb, wired it up and added a little debugger (I haven’t handled the state for the nodes, so it’s acting funky - but the handles work :)). https://6fc55c41-1522-419f-99f5-2c770459fa39.weweb-preview.io/
Did you do it through an NPM package, or through the AI or something else? Ive gone around in circles, but again I don’t know a fraction of what you do lol.
I used the standard way of importing these things - created a Custom Coded Component. This gives you almost all the flexibility you might need - with of course WeWeb’s limitations. https://developer.weweb.io/
lol you did that so fast it gave me some confidence to try again, after pulling my hair out with Gemini, I signed up for cursor, gave it all the docs, fumbled my way through it and got it working. Thanks!
