Menu
Svelte
Guide
REPL
Blog
Sapper
Chat
GitHub
Introduction
What is Svelte?
Understanding Svelte components
Getting started
Component API
component.set(...)
component.get()
component.on(...)
component.fire(...)
component.destroy()
component.options
component.root
Template syntax
Tags
HTML
If blocks
Each blocks
Await blocks
Directives
Debug tags
Scoped styles
Adding styles
How it works
Cascading rules
Unused style removal
Special selectors
Behaviours
Default data
Computed properties
Lifecycle hooks
Helpers
Custom methods
Custom event handlers
Namespaces
Nested components
Props
Composing with <slot>
Shorthand imports
Special elements
<svelte:self>
<svelte:component>
<svelte:window>
<svelte:document>
<svelte:head>
Directives
Event handlers
Event handler modifiers
Custom events
Component events
Refs
Transitions
Bindings
Actions
Classes
Plugins
Transition plugins
Extra methods
Static properties
Setup
preload
Server-side rendering
Using the compiler
Registering Svelte
Server-side API
State management
The basics
Creating components with stores
Declarative stores
Computed store properties
Accessing the store inside components
Custom store methods
Store bindings
Using store properties in computed properties
Built-in optimisations
Preprocessing
svelte.preprocess
Using build tools
Advanced
Keyed each blocks
Hydration
Immutable
Custom elements
Using <slot>
Firing events
Observing properties
Compiler options
Transpiling
Miscellaneous
<noscript>
TODO...
Select an example
Hello World!
If blocks
Each blocks
Scoped styles
Text input
Numeric input
Textarea
Checkbox input
Checkbox input (grouped)
Radio input
Media elements
Nested components
Modal with <slot>
Self-references
SVG Clock
Line/area chart
Bar chart
Scatterplot
Simple fade
Parameterised
In and out
Custom CSS
Await block
Counter
Temperature converter
Flight booker
Timer
CRUD
Circles
Parallax
Hacker News
Immutable data
Template tags
Login to save
zen mode
download
App.html
+
1
1
<
p
>
{a} + {b} = {a + b}
</
p
>
input
Rendered component
data.json5
xxxxxxxxxx
1
{
2
"a"
:
1
,
3
"b"
:
2
4
}