Svelte introduced the idea of using a compiler to optimize and transform specialized syntax into front-end components. The idea has caught on with a variety of frameworks, including React. In this style of reactive development, using a compiler lets the framework be more flexible and streamlined in its definitions. Svelte, the originator, uses the idea to full advantage. The resulting syntax is also incredibly smooth.

What developers love about Svelte

When it comes to code, less is more. As an industry, we’re learning this the hard way with AI, which will happily spew forth reams of code, when what we most want is something tightly focused with contextual understanding. Svelte honors the “less is more” principle by giving you the cleanest syntax possible. This results in less mental burden and systems that are easier to maintain. Svelte is also fast, full-featured, and has a welcoming open source community.

Svelte gets much of its power from its compiler. Svelte can be very aggressive with its syntax because the compiler transforms the code into something browser-specific before sending it over the wire. This compilation step also means that Svelte can optimize your code and components extensively; in fact, much of that work is done on the server rather than the client. Whereas a framework like React sends component code to the browser to be run, Svelte transforms it into direct DOM manipulation operations that are run in the browser.

Using a compiler does require having a build for your project, but that is true for almost all projects these days. Svelte’s team also developed SvelteKit, which provides an ordained path for creating and managing Svelte-based apps. SvelteKit has a ton of power to it and greatly simplifies handling the server-side elements of a real-world application.

Setting up a Svelte build

Let’s jump right in and set up a simple build environment with Svelte. From the command line, enter:

$ npx sv create

This launches an interactive creator. The creator immediately demonstrates the power and flexibility of SvelteKit, including support for TypeScript, vanilla JavaScript (which we’re using for this demo), and several integrations, including testing frameworks. We’ll use a bare-bones setup for this demo, focusing on Svelte.

When it’s ready, run the project in dev mode with: $ npm run dev -- --open. You can now visit the basic page at localhost:5173.

File-based page routing

Since we’re focusing on Svelte, and not SvelteKit, we won’t dig deeply into the routing and other SvelteKit features. The main thing to note is that Svelte does default file-based routing, similar to Next.js. In our case, the main page is served from:

src/routes/+page.svelte

Unlike Next, Svelte prepends a + to the page name. This indicates clearly that it is an active route file, rather than a utility or component file. Right now, there’s just a link in there, so let’s put something interesting in. I’m currently on a streak of watching psychedelic, mind-bending movies, and let me tell you, there are some wild ones. Let’s do a simple listing of some of them using Svelte and an in-memory array. We can put this code into +page.svelte like so:

  
Weird Movie List

  

    {#each mindBendingMovies as movie (movie.id)}
      

        
{movie.title}
        
Directed by {movie.director} ({movie.year})
        

          {#each movie.themes as theme}
            {theme}
          {/each}
        
      
    {/each}
  

The first thing to notice about the page is how minimalist it is. The three sections—script, style, and markup—represent each essential aspect of the UI. This page will become a Svelte component, with those elements driving its behavior.

Here’s a look at the page so far:

Matthew Tyson

The only script we need right now is the definition of the mindBendingMovies array. We loop over the array in the markup: {#each mindBendingMovies as movie (movie.id)}. The relevant contents are displayed using the exposed iterator variable, movie.

Template expressions

Anytime you see the curly braces in Svelte, you are looking at a template expression. This syntax lets you access JavaScript variables and functions declared in the script section, as well as Svelte’s streamlined JavaScript-like syntax. You can see it in action here, with the #each loop.

Next up, movie.id serves as the “key.” Even if you don’t explicitly use a key, it’s a good idea to provide one (other than the array index) so that Svelte can intelligently manage updates to the list display. Using key expressions in each blocks is common to all reactive libraries.

All the markup inside the #each block will be invoked for each iteration of the loop. This syntax is very clean: no using the map function and passing in an anonymous function. The indentation makes sense and is clear. The inner loop on movie.themes is equally obvious, with no unnecessary clutter in our templates. This elegance is one of Svelte’s best features.

Reactive sorting in Svelte

Now let’s say we want to allow users to sort the list dynamically, based on each movie’s weirdness factor. Svelte makes the process painless. We begin by adding a wierdnessFactor to each movie entry. Then, we need a sortOrder property and a sortMovies function:

One thing to notice is that we need to reassign mindBendingMovies to the newly sorted array, rather than inline sorting it. That’s because Svelte watches for changes to the top-level references only, not the internals of the array. Otherwise, it is standard JavaScript that will order the array by its weirdnessFactor using either the ‘asc’ or ‘desc’ sortOrder.

The main thing we need to add to the template is a button to toggle the sortOrder variable:

      Sort by Weirdness ({sortOrder === 'asc' ? 'Descending' : 'Ascending'})
    

On:click is Svelte’s syntax for a button-click handler, and calls the sortMovies function we just saw. We also use sortOrder inside a template expression and a ternary operator to display a message showing the toggle state.

I also added an output for the weirdness rating of each movie:

Weirdness Factor: {movie.weirdnessFactor} / 10

And I updated the styling, so we get something like this:

Matthew Tyson

Naked Lunch is a strange movie, indeed.

Svelte’s reactive filtering

Filtering will give us a chance to look at two more awesome features in Svelte: two-way binding and derived reactivity.

Two-way binding

Two-way binding lets you tie an input component to a variable so that if either one changes, the other is updated. We can use it to accept a filter term. First, let’s add the actual input component to the template:

let searchTerm = '';

Now we can bind that to an input control:

The bind:value property does the two-way work for us; whatever happens to searchTerm and its input will be synchronized.

Derived reactivity

Now, we need a way to modify the list, and here comes more Svelte magic:

$: filteredMovies = mindBendingMovies.filter(movie => {
    const lowerSearchTerm = searchTerm.toLowerCase();
    return movie.title.toLowerCase().includes(lowerSearchTerm) ||
           movie.director.toLowerCase().includes(lowerSearchTerm) ||
           movie.themes.some(theme => theme.toLowerCase().includes(lowerSearchTerm));
  });

This function uses the standard filter operator to drop any movies that don’t have matching content for the searchTerm. But the way it’s declared, with the $: syntax (a “reactive declaration”), is special to Svelte. This declaration ensures that with any change to a variable the reactive variable depends on, the engine will update it by executing the function.

In this example, filteredMovies depends on searchTerm, so whenever that changes, the function will run, and filteredMovies will receive its new value. The filteredMovies variable also depends on mindBendingMovies, so any modifications to that will also result in an update.

The only other thing we need to do is make the display depend on the filtered value:

{#each filteredMovies as movie (movie.id)}

Now we can work on a filter field, which updates the list as the user types:

Matthew Tyson

It’s hard to envision a more concise expression of reactive filtering than these two features together. Notice the sorting still works, and we didn’t have to change anything in the sort code. That’s because the reactive declaration of filterMovies uses mindBendingMovies, so when the sort function changes that, the filteredMovies is updated naturally.

Svelte’s sophisticated filtering gives us exactly what we strive for in reactive code: expressiveness and minimal impact to other parts of the application.

Waiting for async operations

We’ll cover one last feature on this tour: #await, which lets you fire an asynchronous operation and update the display appropriately with minimal fuss.

Say we wanted to let a user click on a movie and fetch its details, then load them in a pane. We’ll use The Open Movie Database and its OMDb API for this demo. (If you are following along, the API requires a free key.) Our pane could look like this:

{#await selectedMovieDetailsPromise}
          
Loading details...
        {:then details}
          {#if details.Response === 'True'}
            
Plot: {details.Plot}
            
Genre: {details.Genre}
            
Runtime: {details.Runtime}
            
Awards: {details.Awards}
            
IMDb Rating: {details.imdbRating}
            {#if details.Poster && details.Poster !== 'N/A'}
              
            {/if}
          {:else}
            
No details found for "{selectedMovieTitle}".
          {/if}
        {:catch error}
          
Error fetching details: {error.message}
 {/await}

Once more, I am omitting some of the surrounding details of the application for brevity, but you can see that #await lets us specify a promise. If the promise is resolved, it will display the results, and if it’s rejected, it will display an error. Here’s the promise itself:

async function fetchOmdbDetails(title) {
    const encodedTitle = encodeURIComponent(title);
    const url = `https://www.omdbapi.com/?t=${encodedTitle}&apikey=${OMDB_API_KEY}`;
    const res = await fetch(url);
    const data = await res.json();
    if (data.Response === 'True') {
      return data; // This will be the resolved value for {#await}
    } else {
      throw new Error(data.Error || 'Could not fetch movie details.'); // This will be the error for {:catch}
    }
  }

The #await block automatically deals with the promise returned from the async function. This function uses the movie title for the ‘t’ argument to the API. The screenshot below shows the movie data displayed in its pane:

Matthew Tyson

Shutter Island is an even weirder DiCaprio vehicle than Inception, if you ask me.

Conclusion

The beauty of Svelte is in its clean feel, and it remains my favorite reactive framework to use. Svelte causes the least friction as a project grows. You can find the code for this demonstration on my GitHub repository.