Part 1 / Introduction / Welcome to Svelte
Welcome to the Svelte tutorial! This will teach you everything you need to know to easily build web applications of all sizes, with high performance and a small footprint.
You can also consult the API docs and the examples, or — if you're impatient to start hacking on your machine locally — create a project with npm init svelte.
What is Svelte?
Svelte is a tool for building web applications. Like other user interface frameworks, it allows you to build your app declaratively out of components that combine markup, styles and behaviours.
These components are compiled into small, efficient JavaScript modules that eliminate overhead traditionally associated with UI frameworks.
You can build your entire app with Svelte (for example, using an application framework like SvelteKit), or you can add it incrementally to an existing codebase. You can also ship components as standalone packages that work anywhere.
How to use this tutorial
You'll need to have basic familiarity with HTML, CSS and JavaScript to understand Svelte.
This tutorial is split into four main parts:
Each section will present an exercise designed to illustrate a feature. Later exercises build on the knowledge gained in earlier ones, so it's recommended that you go from start to finish. If necessary, you can navigate via the menu above.
If you get stuck, you can click the solve button to the left of the editor. (It's disabled on sections like this one that don't include an exercise.) Try not to rely on it too much; you will learn faster by figuring out where to put each suggested code block and manually typing it in to the editor.