Skip to main content

svelte.dev svelte

｜ Examples

Docs Examples REPL Blog

Tutorial SvelteKit

Theme

Examples

Introduction
Hello world REPL
Dynamic attributes
Styling
Nested components
HTML tags
Reactivity
Reactive assignments
Reactive declarations
Reactive statements
Props
Declaring props
Default values
Spread props
Logic
If blocks
Else blocks
Else-if blocks
Each blocks
Keyed each blocks
Await blocks
Events
DOM events
Inline handlers
Event modifiers
Component events
Event forwarding
DOM event forwarding
Bindings
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
Lifecycle
onMount
onDestroy
beforeUpdate and afterUpdate
tick
Stores
Writable stores
Auto-subscriptions
Readable stores
Derived stores
Custom stores
Motion
Tweened
Spring
Transitions
The transition directive
Adding parameters
In and out
Custom CSS transitions
Custom JS transitions
Transition events
Deferred transitions
Animations
The animate directive
Easing
Ease Visualiser
SVG
Clock
Bar chart
Area chart
Scatterplot
SVG transitions
Actions
The use directive
Adding parameters
A more complex action
Classes
The class directive
Shorthand class directive
Component composition
Slots
Slot fallbacks
Named slots
Slot props
Conditional Slots
Modal
Context API
setContext and getContext
Special elements
<svelte:self>
<svelte:component>
<svelte:element>
<svelte:window>
<svelte:window> bindings
<svelte:document>
<svelte:body>
<svelte:head>
Module context
Named exports
Debugging
The @debug tag
7GUIs
Counter
Temperature Converter
Flight booker
Timer
CRUD
Circle Drawer
Miscellaneous
Hacker News
Immutable data

loading editor...

Console

loading Svelte compiler...

loading editor...

Compiler options

result = svelte.compile(source, {

generate: "dom" "ssr",

dev: false,

css: "injected" "external" "none",

hydratable: false, customElement: false, immutable: false, legacy: false });

loading editor...