Live_react - React inside Phoenix LiveView

MRdotB · July 3, 2024, 7:28pm

I needed to reuse React components from my Chrome extension in my Phoenix/LiveView backend. I noticed that for Svelte/Vue, there are live_vue and live_svelte. So, I created the equivalent in React, live_react:

Here is a small demo on Fly: demo.

I have not yet implemented SSR, slots, sigil, and the macro to generate components.

johnknott · July 6, 2024, 5:53pm

Great work! I do wonder if there is some kind of shared abstraction these libraries could build on - if there was something like live_vite or live_frontend, or something like that, then have adaptors for each FE framework.

MRdotB · July 7, 2024, 9:27am

The LOC of each library is quite short but specific to Vite, Svelte, React.

	Builder	JS Prod
live_svelte	Custom esbuild	none
live_vue	vite	vue
live_react	hex esbuild	react, react-dom

Have a look at the hooks.js of each

github.com

Valian/live_vue/blob/main/assets/js/live_vue/hooks.js

import { createApp, createSSRApp, reactive, h } from 'vue'
import { liveInjectKey } from "./use"
import { normalizeComponents, getComponent } from './components';


function mapValues(object, cb) {
    return Object.entries(object).reduce((acc, [key, value]) => {
        acc[key] = cb(value, key, object);
        return acc;
    }, {});
}

function getAttributeJson(el, attributeName) {
    const data = el.getAttribute(attributeName)
    return data ? JSON.parse(data) : {}
}

function getSlots(el) {
    const dataSlots = getAttributeJson(el, "data-slots")
    return mapValues(

This file has been truncated. show original

github.com

woutdp/live_svelte/blob/master/assets/js/live_svelte/hooks.js

import {normalizeComponents} from "./utils"

function getAttributeJson(ref, attributeName) {
    const data = ref.el.getAttribute(attributeName)
    return data ? JSON.parse(data) : {}
}

function detach(node) {
    node.parentNode?.removeChild(node)
}

function insert(target, node, anchor) {
    target.insertBefore(node, anchor || null)
}

function noop() {}

function getSlots(ref) {
    const slots = {}

This file has been truncated. show original

github.com

mrdotb/live_react/blob/main/assets/js/live_react/hooks.js

import React from "react";
import ReactDOM from "react-dom/client";

function getAttributeJson(el, attributeName) {
  const data = el.getAttribute(attributeName);
  return data ? JSON.parse(data) : {};
}

function getProps(hook) {
  return {
    ...getAttributeJson(hook.el, "data-props"),
    // pass the hook callbacks to the component
    pushEvent: hook.pushEvent.bind(hook),
    pushEventTo: hook.pushEventTo.bind(hook),
    handleEvent: hook.handleEvent.bind(hook),
    upload: hook.upload.bind(hook),
    uploadTo: hook.uploadTo.bind(hook),
  };
}

This file has been truncated. show original

orion · July 7, 2024, 6:43pm

Great work! Thank you for live_react!

I’m not sure if it’s what @johnknott had in mind but have you looked at Komodo?

MRdotB · September 10, 2024, 3:46pm

live_react has been picking up interest, as seen in projects like PhoenixAnalytics. Inspired by the Server-Side Rendering (SSR) features in live_svelte and live_vue, I’ve implemented it for live_react.

I released a 0.2.0-beta and will release 0.2.0 when I’m confident the SSR feature is production ready.

ssr demo

MRdotB · March 10, 2025, 3:11pm

I released the stable v1.0.0
I have been using live_react in production for different project.

Breaking Changes:

vitejs: switch from Mix Esbuild to Vite.js

Features:

add tests based on the one from live_vue
add SSR support
support inner_block slot
context provider for live_react
add typescript support

Temples-Dev · March 12, 2025, 3:53pm

Hello, I am new to the Elixir community, i think you have a great project. I went through the live example in the github project,i was hoping to find JSX related syntax in the example but i did not. i don’t know if its in there somewhere. which kept me wondering how does live_react workings like react itself. I will appreciate clarification. Also i want to suggest that it will be nice to have the configuration scaffold with a command to get everything setup instead on following the installation guide with a lot of configs. it makes its quiet easy to setup for use. thank you.

MRdotB · March 13, 2025, 8:41pm

Hi! Welcome to the Elixir community, and thanks for your interest!

LiveReact isn’t a full React framework like inertia-phoenix —it lets you render React components inside LiveView / DeadView, not replace it. You can check out the demo to see it in action.

For internals, the source code is short and worth reading.

Regarding scaffolding

There’s already a Mix task to help with setup—see the [installation guide]