GabrielWilliamson
Hi, after experimenting a bit, I wrote a short article and did a mini-demo of an approach I find interesting: a combination of tools like React and Phoenix. I’d like to know your opinion on this approach. Thanks.
https://gabrielwilliamson.com/posts/using-react-components-in-phoenix-live-view
Where Next?
Trending in Blog Posts
Other Trending Topics
Latest Phoenix Threads
Latest on Elixir Forum
Sponsor Spotlight
Catch errors, track performance, monitor hosts and more.
Categories:
Sub Categories:
Forums
Popular Tags
- #ecto
- #liveview
- #troubleshooting
- #learning-elixir
- #library
- #deployment
- #erlang
- #testing
- #genserver
- #mix
- #absinthe
- #remote-other
- #otp
- #plug
- #how-to-question
- #macros
- #postgres
- #elixirconf
- #channels
- #exunit
- #discussion
- #code-sync
- #podcasts
- #javascript
- #onsite
- #dialyzer
- #docker
- #authentication
- #umbrella
- #full-time-contract
- #podcasts-by-brainlid
- #ecto-query
- #elixirconf-us
- #ai
- #blog-post
- #elixir-ls
- #phoenix_html
- #iex
- #graphql
- #genstage
- #websockets
- #supervisor
- #advent-of-code
- #distillery
- #processes
- #api
- #forms
- #hex
- #security
- #metaprogramming
Our Sponsors
Supporting innovation across the BEAM ecosystem.
We build reliable cloud platforms for business-critical systems.
Catch errors, track performance, monitor hosts and more.
Error tracking, logs, uptime, and Just Enough APM. Built for developers.
Elixir, Erlang & BEAM conferences from Code Sync - join us in 2026!
Master modern tools, write cleaner code, and tackle real-world challenges.
**Building the future of software with AI, trust, and human connection.**
The deployment platform built for Elixir: PaaS ease, VPS control.
The team behind Membrane, Popcorn, LiveDebugger. Available for hire.
Courses that'll move you from confusion to "Aha, now I get it!"
Most Liked- Show Best Posts
- Show All (oldest first)
- Show All (newest first)
krasenyp
Good exploration but a better approach, in my opinion, is using a web component. It can be integrated with LiveView better and also forms and so on. Nowadays there’s a myriad of browser APIs which are easy to use from a web component.
DaAnalyst
Absolutely! Web components + Lit (+ a couple of extra directives) and there’s nothing you can’t do.
We’ve just started switching from Alpine to web components and it’s a bliss!
DaAnalyst
I see.
As a general pattern they promote parent → child communication via properties and child to parent via custom events. However, the former is only applicable when the composition is done within the web components themselves.
In our case (LiveView, where composition is achieved with LiveComponents) my take is the communication between web components need to be designed differently. First, if LiveView is the source of ultimate/eventual truth for the state that is also present server-side, for that part the rendering (or push_event) should have the last say at all levels of nesting. As for a pure client-side state and the communication thereof, the pattern is more like this:
The principal difference is in the underlying intent. Generally, web components are meant to be reusable, universal and isolated which is why they promote loose coupling. In our case with LiveView, where we use web components within a predetermined DOM hierarchy within which they role is to implement the client-side state and behavior, we only need resort to events so we can benefit from their mechanics and no longer to promote a loose coupling (unless, of course, a particular web component is truly generic).
Last Post!
DaAnalyst
The “event bus” is merely a wrapper for dispatching custom events. If performance is a concern and you only need to notify or fetch data from a single specific web component it’s almost always better to do it directly, especially if there’s no need for loose coupling (e.g. when a child knows upfront what class/web component is its target parent). But you can do it whatever way it best suits your needs.