woutdp

woutdp

LiveSvelte - E2E reactivity in LiveView with Svelte

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

Most Liked

woutdp

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

16
Post #9
daveboo

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!

woutdp

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 :slight_smile:

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

theodore

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!

keybits

keybits

Thanks for creating this. I think it can be a really useful addition to Phoenix applications.

For anyone thinking ‘but why?!’ - I found the video of the talk that inspired LiveSvelte to be compelling:

Where Next?

Popular in Libraries Top

pkrawat1
Hey guyz We at @aviabird are working on a payment library in elixir/phoenix. We are targeting March 2018 to add 56 Gateways to it. Have...
New
tompave
Hello there, I would like to share a feature toggles library (AKA feature flags) I’ve been working on. The main package is FunWithFlags...
New
blatyo
https://www.conduitframework.com/ The best overview for how things are tied together is this presentation. Modules and functions are pre...
New
asiniy
Hey there! I wrote a download elixir package which does exactly what its name about - an easy way to download files. I saw solutions ...
New
benlime
I created a new library GitHub - benvp/ex_cva: Class Variance Authority for Elixir which aims to make it very easy to define different va...
New
danschultzer
None of the current solutions worked well for me, so I went ahead and built a user management system from scratch. This project took far...
548 27727 240
New
bryanjos
Hi, I just published version 0.23.0 of Elixirscript. Most of the changes are around JavaScript interop now that Elixirscript uses the ...
New
tmbb
I’ve decided to create this topic to discuss optimization possibilities for something like Phoenix LiveView. I’ve created this topic unde...
New
Qqwy
While not as prevalent as in imperative languages, arrays (collections with efficient random element access) are still very useful in Eli...
New
versilov
Could not wait for the missing Elixir ML libraries to appear, so, I wrote one myself, taking https://github.com/sdwolfz/exlearn as a foun...
New

Other popular topics Top

shahryarjb
Hello, I get Persian date from my client and convert it to normal calendar like this: def jalali_string_to_miladi_english_number(persi...
New
aalberti333
As the title describes, I’m trying to run Enum.map() over a list of key/value pairs, where the value is a map. My data looks like this: ...
New
fireproofsocks
I’m working on defining a simple Ecto schema for a table (in PostGres), but I don’t see where I can define a column as NOT NULL. Conside...
New
chrismccord
This release brings a number of exciting features, including integration with the new Phoenix LiveDashboard and Phoenix LiveView. There h...
New
script
If I have a string “1000 cfu/ml” . I want to remove the characters and / and space . So the string is like this "1000" What is the ...
New
mcarvalho
What is the difference between System.get_env and Application.get_env? For example, what are best practices to use one versus another.
New
ashish173
I am using Ecto timestamps with postgres, I can see the timestamps() use the :naive_dateime but for my use case I wanted to store the ti...
New
alice
Hey, Just curious what are the main benefits of Elixir compared to Clojure? When is Elixir more useful than Clojure and vice versa? Th...
New
Fl4m3Ph03n1x
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 ...
New
siddhant3030
Hi, I have to write a raw query for one of my project. But till now I have used ecto queries and don’t have much experience writing raw ...
New

Sub Categories:

We're in Beta

About us Mission Statement