Back
Svelte Compiler
Clear
Run
Svelte Component
<script> let count = 0; let tasks = ["Sketch", "Build", "Ship"]; </script> <main class="card"> <h1>Svelte Playground</h1> <p>Count: {count}</p> <button on:click={() => count += 1}>Increment</button> <ul> {#each tasks as task} <li>{task}</li> {/each} </ul> </main> <style> body { margin: 0; font-family: Arial, sans-serif; background: #f5f5f5; } .card { max-width: 520px; margin: 30px auto; background: white; padding: 24px; border-radius: 12px; box-shadow: 0 2px 10px rgba(0,0,0,0.1); } button { margin: 8px 0; padding: 8px 14px; border: none; border-radius: 6px; background: #ff3e00; color: white; cursor: pointer; } </style>
Output