How can I integrate a React component with Leptos app?

[lukaszlew]

I'd like to learn how (whether?) can I use existing large component such as WYSWIG editor withing leptos app.
Either of those wound work for me:

• https://mdxeditor.dev/
• https://www.tiny.cloud/
• https://lexical.dev/

Is it possible?

If not, will it be possible in the future?

[gbj]

What have you tried so far? What did/didn't work?

[lukaszlew]

This question was not an honest one, I apologize about it.

The question is a proxy question and was meant as a tool for me to learn about limitations of Leptos integration with existing ecosystems.
Looking at react ecosystem, a huge amount of libraries/use-cases are in principle covered by Leptos (ie, solutions exist or can be built). But one of the things that I was not sure about is reuse of existing React (or even JS) components. So I chose an example of a component that is a huge pain to re-create from scratch but can have a narrow API. WYSWIG editor is just an example. Even harder example would be image editor or interactive map.

Before asking it I searched a lot for other examples of integrations of react or JS component or library with Leptos.
I also have read this. I've spent about an hour on this and I thought I'd better ask :)

Another part of the context for this question is that I am not using Leptos at this moment, but I'm seriously considering porting to it, because my own framework is starting to converge to parts of it.
My current architecture is this: Rust backend is sending over websocket a DSL in JSON with describes parts of the UI, custom React code in frontend is interpreting it and building a component tree for the UI. I am worried that if I just do a hard rewrite to Leptos, then after few weeks of work I'll discover something that will make me go back to my custom Rust-Websocket-React architecture.

Knowing that integration with existing React code can be done, would keep calm my worries.

[benwis]

@lukaszlew So we don't support React components, so anything exclusively defined for React with components is out(or will have to be worked around). If you have something with vanilla JS, it can be used. You may need to write an adapter to call a JS function from Rust, depending on the lib's needs. If it's just including a script tag with some JS, you can easily do that.

I've seen projects integrate Leaflet, like https://houski.ca, which is an interactive map. I've also seen projects with interactive text editors like Monaco. So far I haven't seen anybody post something that can't be done, but I'm sure it exists somewhere.

If you like Rust and you don't have a terribly complex app, I'm sure you'll be fine. Feel free to ask for help here or it'd probably be faster on the Discord

[lukaszlew]

Thanks Ben!
I did some digging and they seem to use wasm-bindgen:

• rust-monaco
• leaflet-rs

These examples are reassuring indeed.

Thinking more about React ecosystem, I'm wondering whether it is possible to run things other way, i.e. how can we embed Leptos component driven by Leptos backend within React app. Any thoughts on this one?

[lukaszlew]

Answered here:
#2821