Home Blog Get into tech

Svelte for Beginners: A Guide

APR 6, 2024

Author

Nimrod Kramer
@NimrodKramer

Related tags on daily.dev

Table of contents

Key Features
Benefits
Svelte's Compiler
Setting Up a Svelte Development E
Prerequisites
Project Setup
Understanding Svelte Components

<script>
Markup

comprehensive guide to getting started with Svelte, including setting <style>

Managing State and Events
p a development environment, creating components, managing state Local State
nd events, exploring advanced concepts, and best practices. Learn Handling Events
Component Events
ow Svelte differs from other frameworks and the benefits it offers.
Stores
Advanced Concepts
State Management with Stores
Lifecycle Functions
Dynamic Components
modern tool for building fast and efficient web applications. Unlike Building a Sample App

frameworks that rely on a virtual DOM, Svelte compiles your code to Project Setup
Components
mized vanilla JavaScript at build time. This guide introduces you to the
Features
 Introducing SvelteKit
velte, demonstrating how it differs from other frameworks, and walks
Core Features
h setting up your development environment, creating components, Best Practices
Folder Structure
ging state and events. You'll also get a sneak peek into SvelteKit for
Naming
nced projects and best practices for working with Svelte. Whether Formatting

ginner or looking to expand your web development toolkit, this guide Components
State
hing for you. Testing
Build
Start reading - Free forever
hat Svelte is and how it differs from other frameworks. Where To Go From Here
Learn Advanced Svelte
our Svelte development environment. Join the Community
Put Your Skills to Use
and the structure and syntax of Svelte components. Conclusion
Related Questions
state and events within your app.
Is Svelte good for beginners?
What is the easiest way to get star
advanced concepts and SvelteKit for building complex applications.
Does Svelte have a future?

est practices for coding and organizing your Svelte projects. What are the cons of Svelte?
Related Blog Posts

Read more on daily.dev

rs a unique approach to web development, emphasizing performance
per experience. With its compiler-based architecture, Svelte ensures
ations are lightweight and fast, providing an excellent foundation for
ng and building modern web applications.

tures
ome cool things about Svelte:
Why not level up your
ty - Svelte automatically updates parts of your app when the data changes, so with daily.dev?

t have to do it yourself. Stay up-to-date with the lat

developer news every time
styles - The styles you write in a Svelte component only apply to that a new tab.
ent. This means you won't accidentally mess up styles in other parts of your Start reading - Free forever

ons - Svelte makes it easy to add smooth animations when things in your app

or move around.

bility - Svelte helps make your app more accessible to people with disabilities by

pecial attributes where needed.

s
 ight like using Svelte:

ance - Apps made with Svelte run really well because there's no extra baggage

ng a framework.

size - Svelte apps can be smaller than others because they don't include

sary code.

syntax - Writing components in Svelte feels natural because it builds on HTML.

er experience - Svelte makes coding more pleasant with features like error

es that help you catch mistakes early.

Compiler
s a special tool called a compiler to turn your .svelte files into
aScript. Here's what makes it special:

of-time compilation - Svelte gets your code ready before your app even starts,

elps it run faster.

neration - The code Svelte generates is clean and simple, doing exactly what's

without extra fluff.

aking - Svelte only includes the parts you use in your app, so there's no wasted

ecking - Using TypeScript, Svelte checks your code for mistakes, making it more

g Up a Svelte Development Environment

 isites
ng into Svelte, make sure you have these ready:

- Since Svelte is all about building apps with JavaScript, you need Node.js

12.22 or newer) to run JavaScript on your computer, not just in a web browser.

pnpm - These are tools that let you add Svelte and other useful stuff to your

npm comes with Node.js, but you can get pnpm by itself if you prefer.

DE - Any text editor works for writing Svelte code, but using one like VS Code

erstands Svelte can make your life easier.

Setup
rted with a Svelte project is straightforward. Here's a simple way using

svelte@latest my-svelte-app

mand creates a new folder named my-svelte-app with everything set

elte project.

use a tool called degit to copy the official Svelte starter template:
 sveltejs/template my-svelte-app
lte-app
ll

r template has some example code to look at.

npm install to add any needed libraries, and npm run dev to start a
nt server. Now, as you change your Svelte files, your app will update
he changes in your web browser automatically.

standing Svelte Components

ponents are built with three key parts:

pt> part is where you write JavaScript code for the component. Here,
things like:

ariables with let

ops (properties) with export let

other components

ycle functions (code that runs at specific times)

nctions and define variables

ce:

ing up a variable
nt = 0;

ng a prop
let name;

ging in another component

Child from './Child.svelte';

cycle function example

(() => {
is runs when the component is first shown

mple function
n handleClick() {
+= 1;

p part is basically your HTML. It's where you decide how your
t looks and behaves. Svelte adds some cool features to HTML like:

curly braces} for dynamic content

onditions with #if / #else

ith #each

g events with on:event

slot> for placeholders

y data binding with bind:

mic content -->

{name}!</h1>

lse condition -->

t > 0}
nt} clicks so far</p>

licks yet</p>

-->
ems as item}
em.name}</li>

ling an event -->

n:click={handleClick}>
e

eholder -->
lot>

way data binding -->

nd:value={name}>

e> part is for CSS, which styles your component. These styles only
component, preventing any mix-ups with the rest of your app.

{
ese styles are just for this button */

ponents automatically update when you change variables or props,

Svelte's smart coding. This means your app can react quickly to
ithout needing extra code.

ing State and Events

es it easy to keep track of information and respond to things users do,

g a button.

tate
ck of information inside a component, just use let :

= 0;
s a variable count that will automatically update in your component
t changes.

ce, to increase count when a button is clicked:

= 0;

handleClick() {
= 1;

n:click={handleClick}>
{count} {count === 1 ? 'time' : 'times'}

s text will change on its own as count goes up.

g Events
omething happen when a user does something, like clicking, use
on:click . You tell it which function to run:

n:click={handleClick}>
e

ndle all sorts of user actions like click , input , and mouseover .

ction, Svelte lets you use event to get more info:

handleClick(event) {
.log(event.clientX); // Shows where the cursor was on the x-axis

nent Events
ts can send out their own events with createEventDispatcher :

createEventDispatcher } from 'svelte';

patch = createEventDispatcher();

shout() {
h('shout', {
ge: 'Hello!'

ponents can listen to these events with on:shout . This is how

ts talk to each other.

ation that needs to be shared across components, Svelte has

called stores. There are two main types: readable stores for just
he information, and writable stores for when you need to change the
n from different places.

ced Concepts

anagement with Stores

 Svelte app starts to get bigger, you'll find that you need a way to share
n between different parts of your app. This is where Svelte's concept of
mes into play.

ores as a common space where any part of your app can pick up or
mation. There are mainly two types:

e stores - These are like bulletin boards where components can see the latest

perfect for displaying things like user settings or data from the internet.

stores - These are more interactive. Components can not only see the

ion but also change it. This is great for things that need to be updated often, like

s in a shopping cart.

ing a store, you just need to set it up like this:

writable } from 'svelte/store';

nst count = writable(0); // Starting point

how you use it in your components:

count } from './stores.js';

increment() {
+= 1;

art is, any component using the store will automatically get the

lso other types of stores, like derived that can calculate new values
ther stores, and tweened for adding smooth animations to changes.

e Functions
ponents have special functions for different times in their life:

t - When the component first shows up

roy - Just before the component goes away

Update and afterUpdate - Right before and after it updates

e, you can use onMount to grab data when the component first

sync () => {
esponse = await fetch('/api/data');
await response.json();

troy to clean up, like stopping a timer:

(() => {
terval(timer);

tions help you manage what happens at different stages.

c Components
 to switch between different parts of your app, you can use
omponent> with a variable to decide which part to show:

ntTab = Tab1;

omponent this={currentTab}>

currentTab will switch the component being displayed.

nother way to insert changing content into a fixed structure, like tabs
content but keeping the same outer look:

="content">I am the Tab 1 content</p>

="content">I am the Tab 2 content</p>

component can show different content dynamically. This is handy

f your app where the content changes but the structure stays the

e advanced features in Svelte can really help make your apps more
nd interactive.

g a Sample App

we're going to make a simple app for keeping track of tasks using
s will help us see how Svelte's parts work together.

Setup
create a new Svelte project and add some tools we need:

svelte@latest svelte-tasks
-tasks
ll date-fns uuid
g date-fns to handle dates and times, and uuid to create unique IDs for

nents
l have three parts:

elte - This is where we manage everything.

rm.svelte - A place to enter new tasks.

st.svelte - Where we show all the tasks.

lte , we use a writable store to keep track of tasks:

writable } from 'svelte/store';

nst tasks = writable([]);

m , we let the app know when a new task is added:

createEventDispatcher } from 'svelte';

patch = createEventDispatcher();

addTask() {
h('add', {
tails for the new task

updates the list of tasks when it gets this info:

tasks } from './stores.js';

handleAdd(event) {
= [...$tasks, event.detail];

keeps an eye on the tasks to show them:

tasks } from './stores.js';

edTasks = $tasks.filter(/*...*/);

s
ome cool things we could add to our app:

sks as done or not done

tasks

lter tasks

ck of dates and times

l storage to remember tasks

mations and transitions for a nicer look

you go! With components, stores, and events, we can create a neat
ng app with Svelte.

y daily.dev Today
ct with developers around the world. Upgrade your developer journey with
alized content, collaboration, and an engaged community.

Start Reading - Free forever

ucing SvelteKit
 a tool that helps you make websites and web apps. It's built on Svelte,
alked about before, but it adds more features so you can do more
making your website work better for search engines and helping
faster.

t SvelteKit offers:

atures
e Rendering

elteKit, your web pages can be prepared on the server before they get to your

This means they can load faster and be more friendly to search engines.

ork on different platforms like Vercel, Netlify, and regular servers, thanks to its

setup.

t uses the files and folders in your project to figure out the web page structure.

kes setting up new pages easy.

ndle all sorts of web page setups, including ones that change based on the link

multiple layers.
ting

down your code into smaller parts so your website only loads what it needs for

ge. This helps pages load much faster.

Experience

uick updates to your work as you make changes, so you can see what you're

ght away.

with built-in support for TypeScript and makes it easy to use styles like Sass.

Extensibility

add custom features to your development setup. For example, checking your

ality or adding support for content management systems.

e over 50 community-made plugins that add all sorts of useful features.

great for making more complex websites and web apps because it
e Svelte in a way that's easy for search engines to read and quick for
ad. It simplifies a lot of the technical stuff, making it easier to get your
running.

ractices

ome easy-to-follow tips for working with Svelte:

Structure
your Svelte code in a src folder.

omponents by their use or which part of the site they belong to.

tores folder for your stores.

ages and other static files in a public or static folder.

 ponent files, use names like Header.svelte .

PascalCase for naming components.

ores with a simple format like tasks.js .

aming CSS classes, go with kebab-case .

ting
space indent for nested elements.

your code with <script> , then the HTML markup, and <style> last.

blank line between each section for clarity.

s like Prettier to help keep your code neat.

nents
make components that you can use in many places, can be easily adjusted, and

ple.

o make components too big; smaller is usually better.

component does something, use events to communicate that upwards.

ycle functions wisely to manage what happens when components load, update,

way.

that needs to be shared, use stores.

mponent-specific data within those components.

res and events names that say what they do.

r writing tests before you write your actual code.

mponents and stores individually.

pshot tests to catch changes in how your app looks.

ng pages that are rendered on the server, tools like Playwright are handy.

eKit take care of getting your project ready for people to use.

right tools (adapters) based on where your project will live.

options to make your project files smaller and load faster.

hese simple steps can help you work better with Svelte and SvelteKit.
ur code organized, easy to read, and well-tested makes a big
And remember, keeping your components small and your project
lear is key!

To Go From Here

ou've started with Svelte, there are many ways to keep learning and
ere's a guide on what you could do next:

dvanced Svelte
cial Svelte documentation is a great place to explore more about animations,

ender your app on the server, and how to test your code. They have lots of

xamples.

e challenging projects, look up some advanced tutorials like making a news app

izing data with D3.

also find lots of code samples and components on the Svelte REPL.

e Community
 te Discord is a friendly space where you can talk to other developers and ask

s.

dated with what’s happening in Svelte by following Svelte on Twitter or searching

sveltejs hashtag.

ociety offers more learning resources like courses and articles from other

ers.

a Svelte meetup near you or online to meet other people interested in Svelte.

r Skills to Use
ing a bigger app with SvelteKit, and maybe use Node.js for the server side of

creating mobile apps, desktop apps, or browser extensions with Svelte Native.

feeling confident, you could even contribute to improving Svelte by helping with

or documentation.

’t forget to share what you make! Writing tutorials, making videos, or just

off your projects can help other people learn too.

community is always growing and adding new features. So, keep

nd stay involved!

usion

great tool for making websites and apps that work really well and don't
your computer. Let's go over why Svelte is so good:

ce

akes your app's code small and fast right from the start.

t use a virtual DOM, which means it uses less computer memory and is quicker

u change something.

cludes the code you actually use, so your app isn't weighed down by extra stuff.
Experience

you write code for Svelte is straightforward and easy to pick up.

you helpful error messages, so you can fix problems before they get big.

tures like styles that only apply to parts of your app, smooth animations, and a

way to manage data make it fun to use.

utomatically updates your app when data changes, which saves you time.

write CSS right in your components, and it won't mess up styles in other parts

app.

great set of tools for adding animations and dealing with user interactions.

t offers a smooth way to build and organize your app, making things like

new pages a breeze.

a big community of Svelte users who make plugins, help out, and create guides.

orks well with other tools you might already be using, like TypeScript, ESLint,

tier.

use Svelte to build more than just web apps. It's also great for server-side

with Node.js.

ay to get better at Svelte is by making actual projects with it. Here are
s:

r a website for a business that's easy to update with SvelteKit

pp that works offline and can send you notifications

oard for keeping an eye on data or stats

where multiple players can interact in real-time

ot you can do with Svelte. Try making something and see how it goes.
do, share what you've made with others who are learning too!
d Questions

e good for beginners?

is great for people who are just starting out. It's easier to learn than
r tools because it uses simple code that looks a lot like the basic
S, and JavaScript you might already know. Svelte also takes care of
for you, like making sure styles don't clash and updating your app
ally when data changes. This makes it less daunting for newcomers to
b development.

the easiest way to get started with Svelte?

st way to try out Svelte is by using the Svelte REPL. This online tool
ite Svelte code and see what it does right away, without having to set
p on your computer. If you want to build a real project, you can start by
pm init svelte@latest in your terminal. This sets up a new project
hing you need to start coding.

velte have a future?

is becoming more popular and has a lot of potential. It's different
makes your app run faster by doing a lot of work before the app even
teKit, a tool based on Svelte, also helps with making websites that
y and are easy to find on search engines. As the web keeps evolving,
cus on making things fast and simple will likely attract more
.

e the cons of Svelte?

e is newer, it doesn't have as big a community or as many extra tools
s as some other frameworks. This means you might not find as many
tutorials, or community support. However, the community is growing,
people find that Svelte's easy-to-understand approach makes up for
.
d Blog Posts

9: Everything you need to know in one place

ode.js Express Project: A Beginner's Guide

Essentials for Developers

S: Everything you need to know in one place

Why not level up

your reading with
daily.dev?
Start reading - Free forever
Stay up-to-date with the latest
developer news every time you open a
new tab.

Read more

Get into tech Get into tech Get into tech

Grok 3: Everything Zig announces Kubernetes Network

you need to know version 0.14.0 Policies: Best
about this new LLM by Zig 0.14.0 introduces Practices
xAI significant upgrades like Implementing Kubernetes
network policies can
 Explore the groundbreaking
Nimrod Kramer Nimrod Kramer
Grok 3 model with 10x the March 5, 2025 February 8, 2025

Nimrod Kramer
February 19, 2025

See more on daily.dev

Product Community Company

daily.dev is a professional network for Chrome extension Docs Careers

developers to learn, collaborate, and grow
Edge add-on Open source Blog
together.
iOS app Feature requests Advertise

Android app Online events Brand book

Web version Swag store About us

Changelog Contact

Status

🇮🇱 🇮🇹 🇵🇭 🇳🇱 🇬🇧 🇭🇷 🇱🇹 🇦🇺 🇵🇱 🇳🇴
Working remotely wherever we're happiest

🇦🇱 🇵🇹
© 2025 Daily
Terms Privacy Guidelines
Dev Ltd.