Examples
- Introduction
- Reactivity
- Props
- Logic
- Events
- Bindings
- Lifecycle
- Stores
- Motion
- Transitions
- Animations
- Easing
- SVG
- Actions
- Classes
- Component composition
- Context API
- Special elements
- Module context
- Debugging
- 7GUIs
- Miscellaneous
App.svelte
<script> let w; let h; let size = 42; let text = 'edit me'; </script> <input type=range bind:value={size}> <input bind:value={text}> <p>size: {w}px x {h}px</p> <div bind:clientWidth={w} bind:clientHeight={h}> <span style="font-size: {size}px">{text}</span> </div> <style> input { display: block; } div { display: inline-block; } </style>
loading editor...
Console
loading Svelte compiler...
loading editor...
Compiler options
result = svelte.compile(source, {
generate:
});loading editor...