LiveSvelte - E2E reactivity in LiveView with Svelte

woutdp

Hi!

I wanted to introduce my latest project LiveSvelte. It allows you to render Svelte inside LiveView with end-to-end reactivity. It’s an extension on top of LiveView for those cases where something like hooks or alpine.js doesn’t cut it.

With LiveSvelte it’s relatively easy to get client side only state working. It’s also great for animations as Svelte has great support. And hooking into npm packages becomes easier.

It’s just a component so you can add it wherever you want inside your LiveView so you can take a hybrid approach.

Interested to hear feedback!

Github
Blogpost

14 comments

/phoenix #library #liveview #livesvelte

39 5527 14

2025-05-15 18:46:34 UTC

Showing Posts 14 to 5

Show Best Posts
Show All (oldest first)
Show All (newest first)

arcanemachine

I believe the author of the library has stated that it’s basically done. Which, if true, would actually make this a good time to make a little LiveSvelte cookbook.

If only I had as much time as I do curioisity…

Post #14

ravecat

Oh, just noticed the topic hasn’t come up in a year. That’s sad. I was inspired by the technology at first, but now it feels frustrated.

Unfortunately, I don’t have enough experience to deal with some things, but they serve as barriers to adaptation. Processes of localizing text keys into other languages, breaking js into chunks, examples of working with forms (I have partially solved the latter in the example project above, but the solution is not finalized)

If anyone has sources or code examples, please share, please do so

Post #13

ravecat

Hi. Overall not the best result of implementing LiveSvelte, but you can find working modal windows here

Core modal component + app.html

Usage

Post #12

TwistingTwists

Would you be able to post some working code for modals etc?

Post #11

theodore

Just want to say, this is a great library. Really good for dropping in Svelte components from npm.
Using it for complicated client side interactions + modals.

Appreciate it!

Post #10

daveboo

I’m wondering why there is not more excitement about this?

I get that the key advantage of LiveView in the first place is getting away from the client-side js framework du jour, but this seems like quite a step up from using Alpine.js to do your sprinkling (I’m not sure what the latest phraseology is for that last bit of client-side functionality not easily workable in LiveView).

Others have mentioned that Alpine has security concerns in LiveView - does Svelte have the same problem?

I’m not questioning the feasibility of LiveSvelte, but I’m wondering how niche (or how valuable) a LiveView/Svelte developer will be in the job market. I am currently focussing on Phoenix/LiveView development and this thread has made me take a good long look at Svelte.

Great stuff Wout!

Post #9

woutdp

Wanted to talk about a new feature in LiveSvelte. You can now replace the default LiveView DSL with Svelte by using the ~V sigil. I hope to release it sometime next week in version 0.5.0 but you can preview it in version 0.5.0-rc0

Blogpost

Post #8

ziazek

@woutdp I’ve got it working on fly.io too, with version 0.4.0. Performance appears to be good.

Kudos!

Post #7

woutdp

@victorbjorklund @ziazek
Both issues are fixed I believe. Best to reinstall the entire package with version 0.4.0 and follow the installation guide.

2 Extra steps have been added to the installation which I’ll try to simplify some time in the future, but for now I just want to make sure it’s working in a production environment. Works for me on fly.io and performance is good but that’s just a sample of 1

If anyone has it running in production please let me know.

Post #6