🔗 Embed React, Svelte, or Vue in Phoenix LiveView without sacrificing Elixir simplicity

Phoenix LiveView lets you build dynamic web apps without writing much JavaScript. But sometimes, you do need a bit of client-side magic - especially for animations or local state that you don't want to store on the server.

Instead of throwing LiveView entirely out of the window, you can enhance it by embedding components from your favorite frontend frameworks like Svelte, Vue, or React. Of course, you can achieve similar results using client hooks but in practice, the code often becomes hard to manage, and juggling with phx-update="ignore" can be annoying.

That’s where libraries like LiveSvelte, LiveVue, and LiveReact come in. These libraries allow you to embed reactive frontend components directly into your LiveView templates with minimal effort. What’s even better is that by using these packages, you're not limited to building everything from scratch. You gain access to the entire ecosystem of packages available for your chosen framework.

We’ll walk through some simple examples - using local state, passing content through slots, and even throwing in some LiveView-style sigils for good measure. The goal is to show how seamlessly these frontend components can blend into your LiveView workflows without giving up the things that make LiveView great.