DEV Community 👩‍💻👨‍💻

Cover image for 7 Svelte features that bring me joy
Jesse Skinner
Jesse Skinner

Posted on • Originally published at on

7 Svelte features that bring me joy

When you learn Svelte for the first time, there are lots of little things that put a smile on your face. Some of the little shortcuts are so elegant, they make things so much easier with cleaner, more succinct code. I recorded a video for YouTube with a demo of seven of my favourite features put together.

1. bind:property

In Svelte, you can very easily bind a property of a DOM element to a local variable. For example, you can bind a variable to the value of an input.

let name = '';

<input bind:value={name}/>
Enter fullscreen mode Exit fullscreen mode

2. Directive shortcuts

There's a bunch of really cool shortcuts in Svelte that make using directives and passing props even more succinct. If the property name and variable name are the same, you can write them like this:

let value = '';
let active = false;

<input bind:value class:active/>
Enter fullscreen mode Exit fullscreen mode

It's shortcuts like this that make Svelte a real pleasure to work with.

3. Scoped CSS

In your Svelte components, any CSS inside a <style> block will be scoped to that component. That means, a lot of the time you won't need to add classes or IDs for styling. You can often just use the tag name for styling, without any risk of messing up the CSS of the rest of the page.

  /* No class needed! */
  button {
    font-size: 200%;
    background: red;

<button>Click me</button>
Enter fullscreen mode Exit fullscreen mode

4. DOM Event Modifiers

If you've ever added a submit handler to a form, or a click handler to a link, and you wanted to handle the event without having the page refresh, you've had to call event.preventDefault() in the handler function. Svelte makes this super easy using a "modifier".

function handleSubmit() {
  // don't need to call preventDefault in here anymore!

<form on:submit|preventDefault={handleSubmit}>
  <input type="submit"/>
Enter fullscreen mode Exit fullscreen mode

5. Loop "else" clause

How many times have you written an if statement to check if an array is empty, so that you can display a special "nothing here" message? Svelte makes this very easy by providing an "else" clause to the {#each} block:

let results = [];

{#each results as result}
    <p>Sorry, no results found!</p>
Enter fullscreen mode Exit fullscreen mode

6. Transitions

Whenever things appear and disappear on your page, it's really nice to use CSS transitions to have a bit of animation to make the state change feel more natural. Normally, you have to write a bunch of CSS and JavaScript to pull this off, but Svelte makes it super simple. All you have to do is import the effect you want and use the transition: directive on an element, and whenever the element appears or disappears, the transition will play.

import { fade } from 'svelte/transition';

<div transition:fade>
  This will fade in and out.
Enter fullscreen mode Exit fullscreen mode

7. Slot props and the let:variable directive

My absolute favourite Svelte feature is the ability to pass data down from a component to its children. In React, the common way to achieve this is either with a function child or a render prop, and this often makes the code harder to read and understand.

Svelte builds this functionality right into the template syntax. You add a <slot/> element to the parent component, and pass props to it. Then, you receive the data using the let:prop directive:

<!-- ColorManager.svelte -->
let colors = ['red', 'green', 'blue'];

<slot {colors} />
Enter fullscreen mode Exit fullscreen mode
<!-- Colors.svelte -->
import ColorManager from './ColorManager.svelte';

<ColorManager let:colors>
    {#each colors as color}
Enter fullscreen mode Exit fullscreen mode

This makes it really easy to write components that are solely responsible for data fetching and management. This allows you to separate out your rendering logic from your state logic, and end up with much simpler code.


Svelte has a ton of really cool features and syntax that make your web components simpler than ever. I've outlined a few of my favourites here. If you're interested in learning more, check out The Joy of Svelte.

Top comments (3)

curtishoyt profile image

People really don't stress enough the importance of enjoying what you're programming. It aids creativity, makes you a better teammate, and makes it significantly easier to enter a state of flow. It should be considered an important factor in choosing a web development framework (or lack thereof). Kudos!

michi profile image
Michael Z

Both svelte and vue are doing a very good job of having little to no low-level distractions. Svelte seems to take it even a step further.

salman2301 profile image

The Action is pretty cool, having a lifecycle for a function.

Why You Need to Study Javascript Fundamentals

>> Check out this classic DEV post <<