Skip to main content
Playground
Docs
Svelte
SvelteKit
Tutorial
Playground
Blog
Create new
or choose an example
Hello world
Dynamic attributes
Styling
Nested components
HTML tags
Reactive assignments
Reactive declarations
Reactive statements
Declaring props
Default values
Spread props
If blocks
Else blocks
Else-if blocks
Each blocks
Keyed each blocks
Await blocks
DOM events
Inline handlers
Component events
Event forwarding
DOM event forwarding
Text inputs
Numeric inputs
Checkbox inputs
Group inputs
Textarea inputs
File inputs
Select bindings
Select multiple
Each block bindings
Media elements
Dimensions
bind:this={canvas}
Component bindings
onMount
onDestroy
tick
Writable stores
Auto-subscriptions
Readable stores
Derived stores
Custom stores
Tweened
Spring
The transition directive
Adding parameters
In and out
Custom CSS transitions
Custom JS transitions
Transition events
Deferred transitions
The animate directive
Ease Visualiser
Clock
Bar chart
Area chart
Scatterplot
SVG transitions
The use directive
Adding parameters
A more complex action
The class directive
Shorthand class directive
Render props
Render prop fallbacks
Named render props
Render prop props
Conditional render props
Modal
setContext and getContext
<svelte:element>
<svelte:window>
<svelte:window> bindings
<svelte:document>
<svelte:body>
<svelte:head>
Named exports
The @debug tag
Counter
Temperature Converter
Flight booker
Timer
CRUD
Circle Drawer
Recursive components
Dynamic components
Hacker News
log in