Introduction

1. 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.

2. Your First Component

In Svelte, an application is composed from one or more components. A

component is a reusable self-contained block of code that encapsulates
HTML, CSS and JavaScript that belong together, written into
a .svelte file. The App.svelte file, open in the code editor to the right, is
a simple component.

Adding data
A component that just renders some static markup isn't very
interesting. Let's add some data.
First, add a script tag to your component and declare a name variable:

Then, we can refer to name in the markup:

Inside the curly braces, we can put any JavaScript we want. Try
changing name to name.toUpperCase() for a shoutier greeting.

Challenge:
<h1>Hello world!</h1>
Solution:

3. Dynamic Attributes

Just like you can use curly braces to control text, you can use them to
control element attributes.
Our image is missing a src — let's add one:

That's better. But if you hover over the <img> in the editor, Svelte is
giving us a warning:
Note:
A11y: <img> element should have an alt attribute
When building web apps, it's important to make sure that
they're accessible to the broadest possible userbase, including people
with (for example) impaired vision or motion, or people without
powerful hardware or good internet connections. Accessibility
(shortened to a11y) isn't always easy to get right, but Svelte will help by
warning you if you write inaccessible markup.
In this case, we're missing the alt attribute that describes the image for
people using screenreaders, or people with slow or flaky internet
connections that can't download the image. Let's add one:

We can use curly braces inside attributes. Try changing it to "{name}

dances." — remember to declare a name variable in the <script> block.
Shorthand attributes
It's not uncommon to have an attribute where the name and value are
the same, like src={src}. Svelte gives us a convenient shorthand for
these cases:

Challenge:
<script>
let src = '/image.gif';
</script>

<img />

Solution:
 4. Styling
Just like in HTML, you can add a <style> tag to your component. Let's
add some styles to the <p> element:

Importantly, these rules are scoped to the component. You won't

accidentally change the style of <p> elements elsewhere in your app, as
we'll see in the next step.

Challenge:

Solution:
 5. Nested Components
It would be impractical to put your entire app in a single component.
Instead, we can import components from other files and include them
in our markup.

Add a <script> tag to the top of App.svelte that imports Nested.svelte...

...and include a <Nested /> component:

Notice that even though Nested.svelte has a <p> element, the styles
from App.svelte don't leak in.
Note:
Component names are always capitalised, to distinguish them from
HTML elements.

Challenge:

Solution:
 6. HTML Tags
Ordinarily, strings are inserted as plain text, meaning that characters like
< and > have no special meaning.
But sometimes you need to render HTML directly into a component. For
example, the words you're reading right now exist in a markdown file
that gets included on this page as a blob of HTML.
In Svelte, you do this with the special {@html ...} tag:

Note:
Warning! Svelte doesn't perform any sanitization of the expression
inside {@html ...} before it gets inserted into the DOM. This isn't an
issue if the content is something you trust like an article you wrote
yourself. However if it's some untrusted user content, e.g. a comment
on an article, then it's critical that you manually escape it, otherwise
you risk exposing your users to Cross-Site Scripting (XSS) attacks.

Challenge:

Solution: