Svelte Playground - Training Grounds

Before we build a full project, get to know the Svelte Playground (formerly called the REPL) - an interactive environment for learning and experimenting.

What is the Playground?

The Playground is an environment in your browser where you can write Svelte code and immediately see the result - without installing anything. It used to be called the REPL (Read-Eval-Print Loop), and the old address still leads to it. You can find it at:

svelte.dev/playground

Playground Interface

+------------------+------------------+
|                  |                  |
|   CODE EDITOR    |    PREVIEW      |
|                  |                  |
|  App.svelte      |   [Your app]    |
|                  |                  |
+------------------+------------------+
|              CONSOLE               |
+------------------------------------+

Playground Features:

• Editor - write Svelte code, add more files
• Preview - instant result
• Console - logs and errors
• Save - save project and share link

Exercise: Your First Playground

Go to svelte.dev/playground and paste this code:

<script>
  let vikingName = $state('Your name');
  let gold = $state(0);

  function raid() {
    gold += Math.floor(Math.random() * 100) + 1;
  }
</script>

<main>
  <h1>Saga of {vikingName}</h1>

  <input bind:value={vikingName} placeholder="Enter Viking name">

  <p>Gold in the treasury: {gold} coins</p>

  <button onclick={raid}>
    Raiding expedition!
  </button>

  {#if gold > 500}
    <p class="rich">You are as rich as a jarl!</p>
  {:else if gold > 100}
    <p>You have a decent treasure.</p>
  {:else}
    <p>Time for more raids!</p>
  {/if}
</main>

<style>
  main {
    font-family: Georgia, serif;
    max-width: 400px;
    margin: 0 auto;
    padding: 2rem;
    background: #1a1a2e;
    color: #eee;
    border-radius: 8px;
  }

  h1 {
    color: #d4af37;
  }

  input {
    width: 100%;
    padding: 0.5rem;
    margin: 1rem 0;
    border: 2px solid #d4af37;
    background: #16213e;
    color: white;
  }

  button {
    background: #8b0000;
    color: white;
    border: none;
    padding: 1rem 2rem;
    font-size: 1rem;
    cursor: pointer;
    width: 100%;
  }

  button:hover {
    background: #a00000;
  }

  .rich {
    color: #ffd700;
    font-weight: bold;
    animation: glow 1s infinite alternate;
  }

  @keyframes glow {
    from { text-shadow: 0 0 5px #ffd700; }
    to { text-shadow: 0 0 20px #ffd700; }
  }
</style>

bind:value connects the text field with the vikingName state in both directions - more about it at Bifrost (module 5).

Experiment! Change values, add new features. The Playground is your training grounds with no risk.

Saving Projects

Log in to the Playground (with a GitHub account) to:

• Save projects
• Generate sharing links
• Return to your saved projects

SKAL! Now you have everything to begin a true adventure with Svelte!