Use any JavaScript or TypeScript Library in Svelte 5 (The Right Way)

00:00:00 Introduction to using vanilla JS libraries in Svelte
00:02:37 Quick and dirty implementation with bind:this
00:05:09 Handling component lifecycles and cleanup
00:07:56 Creating reusable Svelte actions

💻 typewriter-effect implementation:

💻 swiper-js implementation:

#svelte #javascript #webdevelopment #sveltekit #coding #tutorial

[StanislavKhromov]

💁 If you run into an issue with "window is not defined" when using the approach in the video, it is likely because just the act of importing the library you are trying to integrate runs some code that accesses window, so you end up getting this error during SSR when you import it in your SvelteKit project. To fix this, you can use dynamic imports which will make sure the package only loads client side. Here is an example of this approach using ApexCharts:

[Bhide.Svelte]

would love to see motion dev with svelte with examples

[henrix]

i rarely comment on videos, but dang, this is a very concise video, i love it

[oscaralderete]

The beauty of Svelte lies in its simplicity at the end of the day, it's just JavaScript. Unlike React or Vue, Svelte doesn't require special implementations. For example, rendering a map with Leaftletjs in Svelte is seamless, while in React, you'd need React-leaflet, making it far more complex.

Many new Svelte users struggle to grasp the importance of onDestroy because its effects aren't immediately visible. Imagine having a Typewriter editor on multiple pages: it might work fine at first, but without properly using onDestroy, switching to another page with the same component could lead to unexpected behavior.

[roberttmorgan]

Thank you - clear, easy to follow explanations and examples!

[Michael_moa]

Amazing video. Please if you can, do a video on how to create a svelte/js library with svelte, that'll be awesome.

[errorerror]

Hello, I really liked the video. The author explains the topic perfectly, without unnecessary words, clearly shows an example, I’m watching you from another country and few people write on Svelte, and this video is like a sip of water, I wish you successful promotion of the channel and more subscribers.

[aestheticallyamazing]

Love this video, may I ask what keyboard are you using when filming the video?

[galaxiegalaxion]

Very insightful video and easy explanation.Could you also do the production level videos with server deployment.May be with daisy ui. Thank you ❤😊

[funnynews]

How to deal with async function, i use vidstack, and it need async function to create player, but $effect don't use async function, and svelte 5 don't like to use onMount

[havlli]

Great video, nice explanation and relatively short. Good work. I just want to ask since I did most of the stuff in Svelte4 and went to Svelte5 just recently, but is there reason to use $state on variable used to bind to DOM element. From my knowledge of Svelte4 initialization these binding references were part of the lifecycle and it was happening when component was rendered in the DOM, as i said not sure if something changed with Svelte5, but if not using reactive $state for binding is not necessery. Let me know if you have some more insight :)

[paulorodriguez]

why is it important to wrap the action inside an $effect? i've been using actions without the $effect, it still works but don't know if i'm missing something by doing it that way

[steveatfullmeasure]

Useful. I don't think tw needs to be reactive though.