News>Announcing

LiveViewPortal - embed LiveViews in other websites

#liveviewportal
victor23k

victor23k

LiveViewPortal - embed LiveViews in other websites

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!

23 comments
#liveviewportal
52 1594 23

Most Liked

shankardevy

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!

2
Post #3
jaimeiniesta

jaimeiniesta

Woah, thanks for releasing this, it looks awesome. :purple_heart:

I will try it soon. I can think of many uses for embedding live counters and reports from Rocket Validator into our users’ sites. :rocket:

2
Post #5
rhcarvalho

rhcarvalho

Very nice! Several potential upstream contributions!
Thanks for sharing :purple_heart:

Is it viable to use LiveViewPortal and regular LiveView (for other pages in the same app) simultaneously?

2
Post #7
sonic182

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)

2
Post #8
hectorperez

hectorperez

Amazing job, @victor23k!
Excited to see what use cases the community comes up with!

1
Post #2

Where Next?

View thread on forum (has 23 responses!)
liveviewportal
Home News>Announcing
#liveviewportal
52 1595 23
Last post

Popular in Announcing Top

sorentwo
News>Announcing

Oban - Reliable and Observable Job Processing
Hello! tl;dr Announcing Oban, an Ecto based job processing library with a focus on reliability and historical observability. After spen...
/oban#ecto#postgres#job-processing
977 41022 311
New
mspanc
News>Announcing

Membrane - a new framework for multimedia processing
I am pleased to announce an initial release of the Membrane Framework - an Elixir-based framework with special focus on processing multim...
/membrane#multimedia
164 10885 49
New
metehan
News>Announcing

ExTerm – a minimal Elixir terminal in the browser
ExTerm is a minimal Elixir library that lets you expose your terminal in a web browser. It’s mostly a toy project for learning and experi...
#terminal
8 192 0
New
rodloboz
News>Announcing

Lotus - Lightweight, SQL query runner and storage for Phoenix apps
I’ve started working on a new library to run SQL queries and do basic business intelligence. Think “Blazer for Elixir.” Currently it fe...
#ecto#postgresql#sqlite#lotus
87 952 23
New
hauleth
News>Announcing

Duckex - a client library for DuckDB
It is library created by me and @abc3. It is simple client for DuckDB, but with small twist when compared with other libraries out there ...
#db_connection#duckdb#duckex
14 260 3
New
anuaralfetahe
News>Announcing

ProcessHub - process distribution library
Hello Published a new library - ProcessHub! ProcessHub is a library designed to manage process distribution within the Elixir cluster. ...
#library#processes#distribution
83 2713 43
New
Mati365
News>Announcing

Ckeditor5-phoenix - CKEditor 5 wysiwyg integration for Phoenix
Phoenix has great tooling overall, but one thing that’s still lacking is a solid, plug-and-play integration with a modern WYSIWYG editor....
/phoenix#liveview#liveview-form
20 402 11
New
mudspot
News>Announcing

Prometheus Agents - Claude Code SubAgents for the Elixir Phoenix Programmer
Hi folks, I’d like to announce the release of Prometheus Agents, a set of subagents for Claude Code that cater to the Elixir Phoenix pro...
/phoenix/ash#claude#claude-code
11 224 0
New
billylanchantin
News>Announcing

Explorer - Series (1D) and dataframes (2D) for fast and elegant data exploration in Elixir
The Explorer library has been out for some time. But we just released the latest version (see below), and we thought we’d start posting u...
#explorer
58 1448 16
New
rodloboz
News>Announcing

Sifter - a flexible string-based query filtering library for Ecto
Sifter is a a query filtering library for Ecto. It lets frontend apps send human-readable query strings like: "elixir phoenix status:pu...
#sifter
7 235 2
New

Other popular topics Top

shahryarjb
Questions & Help>Questions

How to convert Date to DateTime which Ecto needs
Hello, I get Persian date from my client and convert it to normal calendar like this: def jalali_string_to_miladi_english_number(persi...
#ecto#datetime
15 14989 5
New
senggen
Questions & Help>Questions

How to fix *Bad argument in call to erlang:'++'(<<"xxx/crash.log">>, ".3") in lager_rotator_default:rotate_logfile/2 line 84*
Erlang/OTP 25 [erts-13.2.2] [source] [64-bit] [smp:8:8] [ds:8:8:10] [async-threads:1] 15:22:35.803 [error] gen_event {lager_file_backend...
#production#error#log
2 46314 2
New
gshaw
Questions & Help>Questions

Idiomatic guard clause for checking not nil
What is the idiomatic way of matching for not nil in Elixir? E.g., First way: defp halt_if_not_signed_in(conn, signed_in_account) when...
#guard-clauses
13 43178 3
New
JorisKok
Questions & Help>Questions

How is it possible to get 2 million websocket connections when you have 65536 available ports?
I have a server on AWS, and was running a load test using artillery. When looking at the Phoenix dashboard I see the Ports going to 100% ...
/phoenix
20 17308 4
New
polypush135
Questions & Help>Questions

Proper use of Task.async?
As many of you may have realized by now (sorry for all the posts here) I’ve been working on a db problem where I’m trying to aggregate a ...
#task
26 15568 8
New
Fl4m3Ph03n1x
Questions & Help>Questions

Learning Elixir, frst impressions ( plz don't kill me ! )
About me? ( if you have nothing better to do than reading about some random guy in the internet :stuck_out_tongue: ) Hello all, this is ...
#learning-elixir
371 25801 61
New
9mm
Questions & Help>Questions

Elixir way to conditionally update a map
I am constructing a JSON object (map) and I need to conditionally set a field. I’m trying to write proper elixir-way code… and I’m at a l...
#maps
55 19905 29
New
Qqwy
Questions & Help>Questions

Updating structs: Map.put vs %Foo{oldfoo | new: value} vs put_in
Original source of discussion: This topic on the Pragmatic Programmers' Functional Web Development with Elixir, OTP, and Phoenix forum. ...
#maps#structs#pipeline#access
115 28410 31
New
lucidguppy
Questions & Help>Questions

How do I read a file and enumerate its lines
I have a super simple question about elixir - how would I take a file like this foo bar baz and output a new file that enumerates th...
#how-to-question
20 15454 3
New
lanycrost
Questions & Help>Questions

How To Implement if...else if...else condition
Hi everyone! I need implement if…else if…else condition from my elixir code, and anymore of this control flow structures not work proper...
#how-to-question
40 51494 6
New
Back to top

News>Announcing

News Announcing ❯

Latest on Elixir Forum

Elixir Forum ❯

Sponsor Spotlight

Pragmatic Bookshelf

Practical resources that improve the lives of professional developers. By developers, for developers.

Our Sponsors

Dashbit

Build Elixir applications with speed and confidence.

EEF

Supporting innovation across the BEAM ecosystem.

Coders51

We build reliable cloud platforms for business-critical systems.

AppSignal

Catch errors, track performance, monitor hosts and more.

Manning

Develop your skills with books, videos, and courses.

ElixirCasts

Producing high quality Elixir screencasts since 2017.

Potions

The deployment platform built for Elixir: PaaS ease, VPS control.

Pragmatic Studio

Courses that'll move you from confusion to "Aha, now I get it!"

View all our sponsors ❯

Categories:

Sub Categories:

Forums

Our Sponsors

Dashbit

Build Elixir applications with speed and confidence.

EEF

Supporting innovation across the BEAM ecosystem.

Coders51

We build reliable cloud platforms for business-critical systems.

AppSignal

Catch errors, track performance, monitor hosts and more.

Manning

Develop your skills with books, videos, and courses.

ElixirCasts

Producing high quality Elixir screencasts since 2017.

Potions

The deployment platform built for Elixir: PaaS ease, VPS control.

Pragmatic Studio

Courses that'll move you from confusion to "Aha, now I get it!"

View all our sponsors ❯

We're in Beta

About us Mission Statement