Styling • Svelte Examples

Introduction
Hello world
Dynamic attributes
Styling REPL
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

App.svelte

<p>Styled!</p>

<style>
	p {
		color: purple;
		font-family: 'Comic Sans MS', cursive;
		font-size: 2em;
	}
</style>

loading editor...

Console

loading Svelte compiler...

loading editor...

Examples

Console

Compiler options