dli
How to integrate Hologram with existing LiveView app?
Before I dive in myself, did anyone successfully sprinkle Hologram into their existing LiveView app?
Looking for hints regarding:
- Adding a Hologram component to a LiveView page
- Sending commands / events between LiveView and Hologram components (e.g.
JS.push,JS.dispatch) - Having Hologram router + LiveView router at the same time
- Any other tricks and pitfalls that come to mind
Cheers!
Most Liked
olivermt
Yeah I wouldnt mix them. I ported a 84kloc react app with tons of local state with complex multi stage forms.
Love it!
A few sharp edges for sure, but bart is really into this thing so he is on it if you find bugs 
jam
bartblast
Mixing them on the same page isn’t technically possible today, and even if it were, I wouldn’t do it - two runtimes competing for one DOM just doesn’t make sense, and there’s no event bridge between them by design. The good news is that converting LiveView to Hologram is a far shorter hop than the React port @olivermt did - both are declarative Elixir, so it’s mostly a mechanical translation, and AI tools handle it really well (honestly one of the best use cases for them). During the migration you can keep both routers side by side and convert page by page.
Last Post!
bartblast
The colocated JS part is the step you get to skip entirely. You do not write JS with Hologram, you write Elixir and Hologram compiles it to run in the browser.
Which is also why mixing is a bad trade. Wiring two very different execution models together is a large amount of work for a small payoff, and converting a page gets you the same interactivity without the bridge.
Yeah, already in the short-term goals - coming soon!
Popular in Questions
Other popular topics
Latest Hologram Threads
Latest on Elixir Forum
Sponsor Spotlight
Practical resources that improve the lives of professional developers.
Categories:
Sub Categories:
Forums
Popular Tags
- #ecto
- #liveview
- #troubleshooting
- #learning-elixir
- #deployment
- #library
- #erlang
- #testing
- #genserver
- #mix
- #absinthe
- #remote-other
- #otp
- #plug
- #how-to-question
- #macros
- #postgres
- #channels
- #elixirconf
- #exunit
- #discussion
- #code-sync
- #javascript
- #podcasts
- #onsite
- #dialyzer
- #docker
- #authentication
- #umbrella
- #full-time-contract
- #podcasts-by-brainlid
- #ecto-query
- #elixir-ls
- #phoenix_html
- #iex
- #blog-post
- #graphql
- #genstage
- #ai
- #websockets
- #supervisor
- #elixirconf-us
- #advent-of-code
- #distillery
- #processes
- #api
- #forms
- #metaprogramming
- #security
- #hex
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.
Error tracking, logs, uptime, and Just Enough APM. Built for developers.
Develop your skills with books, videos, and courses.
Enabling companies to succeed by building software people love.
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!"