Svelte Playground

How to use the Svelte playground

1. Edit App.svelte. A component has a <script> block, markup and an optional <style> block.
2. Watch the preview update. Compiler warnings (many are accessibility tips), console.log messages and errors appear under it.
3. Press + to add a component such as Greeting.svelte and use it with import Greeting from './Greeting.svelte'.
4. Keep shared state in a file that ends in .svelte.js and import it wherever you need it.
5. Open the ⋯ menu and choose Download all files (.zip) to take the project with you.

What is and is not included

You get Svelte 5 with runes ($state, $derived, $props), each blocks, if blocks, events and scoped styles. Packages need Add packages (downloaded from esm.sh only when you press Add); a router and SvelteKit are not available. For plain pages without a framework use the HTML/CSS/JS Playground, and to check your markup try the HTML Beautifier.

The sample is a counter, a list and a small child component. The top of App.svelte:

<script>
  import Greeting from './Greeting.svelte';

  let count = $state(0);
  let doubled = $derived(count * 2);
  let fruits = $state(['Apple', 'Banana', 'Cherry']);
</script>

<main>
  <Greeting name="Svelte" />
  <button onclick={() => count++}>Clicked {count} times (double: {doubled})</button>
  <ul>
    {#each fruits as fruit (fruit)}
      <li>{fruit}</li>
    {/each}
  </ul>
  <button onclick={() => fruits.push('Fruit ' + (fruits.length + 1))}>Add a fruit</button>
</main>

Result: a card with the heading Hello, Svelte! (from Greeting.svelte), a button that counts clicks and shows the doubled value, and a fruit list you can add to.

• Writing Svelte 4 style code such as export let name or on:click: this playground uses Svelte 5, so use $props() and onclick.
• Leaving an {#if} or {#each} block unclosed: the compiler error names the file and line.
• Importing a package before adding it: press Add packages first.
• Ignoring accessibility warnings: they point at real problems for keyboard and screen reader users.