learn.svelte.dev Open in urlscan Pro
76.76.21.21  Public Scan

Form analysis
1 forms found in the DOM

/search

<form class="search-container svelte-15l0yne" action="/search"><input type="search" name="q" placeholder="Search" aria-label="Search" spellcheck="false" class="svelte-15l0yne">
  <div class="shortcut svelte-15l0yne"><kbd class="svelte-15l0yne">Ctrl</kbd> <kbd class="svelte-15l0yne">K</kbd></div>
</form>

Text Content

Skip to main content
learn.svelte.dev learn
Ctrl K
Tutorial

--------------------------------------------------------------------------------

Svelte SvelteKit

--------------------------------------------------------------------------------

Discord GitHub
Theme


WELCOME TO SVELTE
BASIC SVELTE / INTRODUCTION
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, 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

> You'll need to have basic familiarity with HTML, CSS and JavaScript to
> understand Svelte.

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.

Next: Your first component

Edit this page
 * src
 * App.svelte

solve
9
1
2
›

<h1>Welcome!</h1>






starting dev server
]654;turbo
warn Starting on January 1, 2024, turbo will no longer be supported and will be
removed. We now offer built-in support for npm, pnpm, and yarn v1. For
additional information, check out https://turbo.sh.


$ ./node_modules/vite/bin/vite.js dev



Tutorial Show editor Editor