Category: Svelte

Animations in Svelte are first-class so you don’t have to reach for an animation library unless you want to. To use transitions you can import blur, fly, slide, scale, draw and crossfade from svelte/transition. To use a transition use transition:fade. You can specify parameters such as delay, duration, easing for fade. To learn what they are for each transition consult the documentation. App.svelteCopy You can specify a enter animation with in:fade and exit animation…

In Svelte we can use slots to compose components meaning our components can contain other components and elements to be more reusable like regular HTML. Example.htmlCopy The <slot> element lets us do that with components. If you’re familiar with React this is similar to the children prop and Vue also has slots. We can provide a fallback if no content is provided.…

Components are the primary reason of using any modern JavaScript framework because it lets you organize code and have your concerns in one place. If you ever used classes you can think of components as new instances of a class that can be used as a blueprint to have its own independent state. It’s easy to get carried away…

Data binding is keeping your application state and user interface synchronized. Svelte supports data binding using the bind: directive. Often you have a value that other parts depend on for example if you had a text search input and want to filter a list of items whenever the user types a search query. You can implement data binding in…

If you’re new to JavaScript frameworks you might be confused by the use of inline event handlers because so far everyone told you to avoid doing so in JavaScript. That’s for a good reason because of separation of concerns to have our markup, styles, and logic separate which makes it easy to change and maintain. Using a modern JavaScript…

Since HTML can’t express logic such as conditionals and loops you would have to write something like this using JavaScript. Example.htmlCopy It doesn’t look bad but I think we can do better. This is the same example using an #if block in Svelte. App.svelteCopy Awesome, right? I want to emphasize how close Svelte is to HTML and…

Reactivity is Svelte’s superpower. If you’re unfamiliar reactivity is how you keep your DOM in sync with your application state. When you’re developing an application you want a change in your application state like adding a song to a playlist be reflected immediately in the DOM and re-render what changed. You would have to write all…

To appreciate Svelte’s simplicity we’re going to start with a simple counter example using regular HTML and JavaScript. If you want to code along open a new Codepen project. Example.htmlCopy Ponder for a second how amazing it is that this is valid HTML in the first place and doesn’t break things because how browsers are so smart. You…

Writing Svelte feels like writing regular HTML, CSS, and JavaScript. Svelte is a JavaScript framework created by Rich Harris that aims to solve the problem of abundance of JavaScript on the web while delivering a delightful developer and user experience. Svelte is compiled meaning it’s more of a language than a traditional JavaScript framework so it’s not constrained by limitations…

The best way to learn Svelte is to go through the Svelte tutorial which is great but also contains information overload if you just want to get started writing Svelte. I’m going to show you everything you should know for the majority of things you’re going to build. I’m not going to assume your knowledge and try…