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.
You can build your entire app with Svelte (for example, using an application framework like SvelteKit, which this tutorial will cover), 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
This tutorial is split into four main parts:
- Basic Svelte (you are here)
- Advanced Svelte
- Basic SvelteKit
- Advanced SvelteKit
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 editorin the top right of the editor view. (Use the toggle below to switch between tutorial and editor views. The
solve button is 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.