A Beginner’s Guide to SvelteKit — SitePoint


SvelteKit is an officially supported framework, built around Svelte. It adds key features to a Svelte app — such as routing, layouts and server-side rendering — and makes frontend development outrageously simple.

In this tutorial, we’ll take a beginner-friendly look at both Svelte and SvelteKit and build out a simple web app showing profile pages of imaginary users. Along the way, we’ll look at all the main features that SvelteKit has to offer.

Let’s start by looking at what Svelte brings to the table.

Table of Contents
  1. The Benefits of Working with Svelte
  2. So, Why Do I Need SvelteKit?
  3. Prerequisites
  4. Getting Started
  5. Layouts and Client-side Routing
  6. Static Pages and Prerendering
  7. Endpoints
  8. Fetching Data with the load Function
  9. Dynamic Parameters
  10. Prefetching
  11. Conclusion

The Benefits of Working with Svelte

Svelte is growing in popularity, and that’s for a good reason. Developing apps with Svelte is based on writing reusable and self-contained components — similar to other popular JavaScript frameworks such as React.

The big difference comes with its build-time compilation — as opposed to a run-time interpretation of the code. In other words, Svelte already compiles our code during the build process and the final bundle only contains JavaScript that our application actually needs. This results in fast web apps with small bundle sizes.

Other frameworks only parse and bundle up the code we’ve written, essentially taking the component tree as is and shipping it to the client. In order for the browser to be able to interpret it and update the UI, a lot more code needs to be delivered and additional work is done on the client side. (You can read here how React handles this process under the hood.)

Other than that, Svelte is an ideal framework for beginners. Everyone who knows how to write HTML and how to include