Liveview is autonomous, You receive a full html page, that is remote controlled. It receives incremental changes, applied by morphdom. There would be no need to serve it with React.

Also, React does not like Dom modification…

But if You have already React, You don’t need Liveview. You already have a reactive UI, that could update itself.

What You could do is link your React to Phoenix channels, and that’s easy to do with Phoenix.js. You could build the same system as Liveview do.

Probably most of the people here are backend related, but there are some advantage to have a separate frontend, and You have one. You could switch them, and transform your Django backend into a Phoenix backend

While porting a Liveview frontend to anything other than Phoenix would be nearly impossible.

So say we all!

Anyway I promise to check this TypeScript stuff out , but only after I’ll have enough of Rust which is also awesome (and mind blowing). I guess it will take some time.

The main issue you will face is both React and LiveView fighting for control over the DOM. If you can get clear demarcation you may have a chance, but if you want React to pull in bits of LiveView I think you will really struggle (without resorting to something ugly like iframes). The pages hosting LiveView will need to be fully “Phoenixed”. I don’t have any React specific experience, but I don’t think that will stop you from hosting a React component on a LiveView page provided you mark which bits of the DOM React is allowed to mess with using phx-update="ignore" as per Phoenix.LiveView — Phoenix LiveView v1.2.5

You could use also just use Phoenix to provide a “real-time API” using Channels - Channels — Phoenix v1.8.8 - this is the same backend comms tech that LiveView is built on but doesn’t do any DOM mutation for you so you would do that in React.

Is there any way you can break out one page at a time from the React app or is it all one big SPA?