victor23k
LiveViewPortal is a small library that allows third-party sites to embed LiveView apps.
The library is distributed as an NPM package. Only a small part of the LiveView JS code is modified.
What problem does this solve?
From the LiveView repo:
Phoenix LiveView enables rich, real-time user experiences with server-rendered HTML.
This matches Doofinder’s use case for our ecommerce products except for one point: rendering LiveViews from third party pages. We needed to embed LiveView for everybody that wanted to give their users rich and real-time experiences.
We have been using a modified version of LiveView with this purpose for a long time. We wanted to extend this to other projects and decided to make it open source. Our goal is to make this feature a part of LiveView, and we are working on merging this to LiveView. In the mean time, you can use this library to try it out.
If you want to know more about the technical details, you can check out the repo and our blog post. Also, if you have any questions, I’ll be more than happy to answer here!
Where Next?
Trending in Announcing
Other Trending Topics
Latest on Elixir Forum
Sponsor Spotlight
Bringing learning, work and compliance together since 1987.
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
- #metaprogramming
- #hex
- #security
Our Sponsors
Build Elixir applications with speed and confidence.
Supporting innovation across the BEAM ecosystem.
We build reliable cloud platforms for business-critical systems.
Catch errors, track performance, monitor hosts and more.
Elixir, Erlang & BEAM conferences from Code Sync - join us in 2026!
Practical resources that improve the lives of professional developers.
Master modern tools, write cleaner code, and tackle real-world challenges.
**Building the future of software with AI, trust, and human connection.**
The team behind Membrane, Popcorn, LiveDebugger. Available for hire.
Courses that'll move you from confusion to "Aha, now I get it!"
Showing Posts 1 to 10- Show Best Posts
- Show All (oldest first)
- Show All (newest first)
hectorperez
Amazing job, @victor23k!
Excited to see what use cases the community comes up with!
shankardevy
Great job! I wanted to do this for sometime but never managed to do it myself! I had a similar one done for a comment server alternative for Disqus that I did for an organisation using LiveView but with a lot of hacks. However something like what you have with LVPortal would make it easier to implement without the ugly hacks. Congrats on making this available for everyone!
victor23k
Thanks!! This has some minimal hacks, as it modifies javascript LiveView code. Hopefully we can find a way to make this available in LiveView.
The comment solution is definitely a great idea, I’m sure you must have been happy once you managed to implement that with all the workarounds that you mention
.
jaimeiniesta
Woah, thanks for releasing this, it looks awesome.
I will try it soon. I can think of many uses for embedding live counters and reports from Rocket Validator into our users’ sites.
sezaru
Amazing work! This will be very useful with the stuff we are planning to do in the company I work!
Here are some questions, do you already have an github issue in the LV or Phoenix github repo asking to merge this so I can follow it?
I’m not sure if this is possible with shadow dom or not, but how do you handle navigate and patch? Is it possible to change the page URL?
rhcarvalho
Very nice! Several potential upstream contributions!
Thanks for sharing
Is it viable to use LiveViewPortal and regular LiveView (for other pages in the same app) simultaneously?
sonic182
Hi @rhcarvalho
Yes It is possible, that’s one of our use cases where we embed a chat in Doofinder admin panel (two distinct phoenix apps)
victor23k
@sezaru thanks!
Not yet, but I’ll post the PR in this thread so you and others can follow the progress.
I have not explored this yet, but it is definitely something to experiment with. It can be tricky to modify the URL as the host page would probably also do things with the URL. Also you would probably want to reuse the same websocket instead of navigating to a new LiveView and having to mount again. I think
live_sessioncould be of use here.victor23k
Hey @rhcarvalho, thanks. As @sonic182 said, you can embed a LiveViewPortal inside a LiveView hosted in a different Phoenix app.
Also, you can serve, from the same Phoenix app, both regular LiveViews and LiveViewPortals. For that, you can define separate socket endpoints and router pipelines.
rhcarvalho
Excellent questions from @sezaru.
Since we touched the topic of navigation, I’d like to ask how is LiveViewPortal different from LiveView when it comes to state management options? IIUC URL params are not available, are they?
How is the redeployment/reconnection experience? In particularly, with regards to state preservation, e.g. form inputs.