Skip to main content
Basic Svelte
Introduction
Reactivity
Props
Logic
Events
Bindings
Classes and styles
Actions
Transitions
Advanced Svelte
Advanced reactivity
Reusing content
Motion
Advanced bindings
Advanced transitions
Context API
Special elements
<script module>
Next steps
Basic SvelteKit
Introduction
Routing
Loading data
Headers and cookies
Shared modules
Forms
API routes
$app/state
Errors and redirects
Advanced SvelteKit
Hooks
Page options
Link options
Advanced routing
Advanced loading
Environment variables
Conclusion
Advanced Svelte Next steps Congratulations!

You’ve now finished the Svelte tutorial and are ready to start building.

The next two parts of the tutorial will focus on SvelteKit, a full-fledged framework for creating apps of all shapes and sizes.

If you’re suffering from information overload and aren’t ready to go through the SvelteKit tutorial yet, don’t worry! You can use your existing Svelte knowledge without learning all of SvelteKit. Just run this in your terminal and follow the prompts...

npx sv create

...and start editing src/routes/+page.svelte. When you’re ready, click the link below to continue your journey.

Edit this page on GitHub

previous next
Exports
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
<script>
	let characters = ['🥳', '🎉', '✨'];
 
	let confetti = $state(new Array(100)
		.fill()
		.map((_, i) => {
			return {
				character:
					characters[i % characters.length],
				x: Math.random() * 100,
				y: -20 - Math.random() * 100,
				r: 0.1 + Math.random() * 1
			};
		})
		.sort((a, b) => a.r - b.r));
 
	$effect(() => {
		let frame = requestAnimationFrame(function loop() {
			frame = requestAnimationFrame(loop);
 
			for (const confetto of confetti) {
				confetto.y += 0.3 * confetto.r;
				if (confetto.y > 120) confetto.y = -20;
			}
		});
 
		return () => {
			cancelAnimationFrame(frame);
		}
	});
</script>
 
{#each confetti as c}
	<span
		style:left="{c.x}%"
		style:top="{c.y}%"
		style:scale={c.r}
	>
		{c.character}
	</span>
{/each}
 
<style>
	span {
		position: absolute;
		font-size: 5vw;
		user-select: none;
	}
 
	:global(body) {
		overflow: hidden;
	}
</style>