Can I integrate an react module?

Ask us anything How do I?
1

Hi, I have an app done in Bubble. I am looking into Noodl/Wappler/WeWeb.

I am using a Bubble plugin. It is a Canva-like design editor. It is an essential functionality for my site.

https://premast-canvas.bubbleapps.io/

There is a design editor in react.

https://github.com/salgum1114/react-design-editor

How easy or difficult is it to integrate something like this in WeWeb?

If it can’t be integrated a react module, how can I build such functionality in WeWeb? Or it is not possible to get this functionality in WeWeb?

2

If the code can be exported as browser-compatible code, then any web app can use it (even WeWeb), but I had a quick look and it only has Node.js support, not browser.

There are some ways to import a React component into a Vue app, such as GitHub - nmpribeiro/vuera-ts: Vuera TS lib, but I don’t have production-grade experience with this, so I can’t really advise on pros/cons.

From the looks of it, might be doable. Probably not easy, though.

3

What is browser compatible code?

“React Design Editor is a module for React, written in Javascript/Typescript…”

4

Or, is it possible to do the following:

What needs to be created

  • Create a design editor app with a generic design editor page in Bubble.
  • Create a page in WeWeb and iframe the Bubble design editor page.

Workflow

  • A user creates to create a design, WeWeb displays the design page (with ifram) which loads the Bubble design editr page.
  • WeWeb calls an API to the Bubble editor app to load an existing design, if needed.
  • User clicks Save button, the Bubble app makes a webhook/callback to WeWeb app and pass back the information. WeWeb displays the next page, e.g. a confirmation page or a design list page.