Svelte online editor

Write, Run & Share Svelte code online using OneCompiler's Svelte online editor for free. It's one of the robust, feature-rich online editors for Svelte. Getting started with the OneCompiler's Svelte online editor is really simple and pretty fast. The editor shows sample boilerplate code when you choose language as 'Svelte' and start writing code to learn and test online without worrying about tedious process of installation.

About Svelte

Svelte is a UI framework that does most of its work while you build, not while the page runs. Its compiler turns each component into small JavaScript that updates the DOM directly, so there's no virtual DOM to ship or diff in the browser. A component lives in a single .svelte file that keeps the markup, the logic, and the styles together. In Svelte 5, reactivity runs on runes like $state and $derived: reassign a value and anything that depends on it updates on its own.

Syntax help

Components

A .svelte file has three optional parts: a <script> block for logic, the markup, and a <style> block whose rules stay scoped to that component. Import another component and use it as a tag.

<script>
  import Child from './Child.svelte'
  let name = $state('world')
</script>

<h1>Hello {name}!</h1>
<Child />

<style>
  h1 { color: #ff3e00; }
</style>

Reactivity with runes

$state marks a value as reactive. $derived builds a value out of other state and recomputes when it changes. $effect runs after the DOM updates, which is where you'd put logging, timers, or a call into some other library.

<script>
  let count = $state(0)
  let doubled = $derived(count * 2)

  $effect(() => {
    console.log('count is now', count)
  })
</script>

<button onclick={() => count++}>
  {count} doubled is {doubled}
</button>

Props

A component reads its inputs with $props(). Pull out the ones you need and give defaults right there.

<!-- Greeting.svelte -->
<script>
  let { name, greeting = 'Hello' } = $props()
</script>

<p>{greeting}, {name}!</p>

<!-- Parent: import Greeting, then pass props as attributes -->
<Greeting name="Ada" greeting="Hi" />

Events

Attach handlers with plain on attributes such as onclick or oninput. The value is just a function.

<script>
  let text = $state('')
</script>

<input value={text} oninput={(e) => (text = e.target.value)} />
<button onclick={() => (text = '')}>Clear</button>
<p>You typed: {text}</p>

Logic in markup

Svelte has block tags for branching, lists, and promises, written inline with the markup.

{#if loggedIn}
  <p>Welcome back</p>
{:else}
  <button onclick={login}>Log in</button>
{/if}

<ul>
  {#each items as item (item.id)}
    <li>{item.name}</li>
  {/each}
</ul>

{#await promise}
  <p>Loading...</p>
{:then data}
  <p>{data.title}</p>
{:catch error}
  <p>Something went wrong: {error.message}</p>
{/await}

Two-way binding

bind: keeps a form element and a value in sync, so you don't have to wire up the event yourself.

<script>
  let name = $state('')
  let agreed = $state(false)
</script>

<input bind:value={name} placeholder="Your name" />
<label>
  <input type="checkbox" bind:checked={agreed} />
  I agree
</label>

<p>{name || 'Nobody'} has {agreed ? 'agreed' : 'not agreed'}</p>

Scoped styles

Rules in a <style> block apply only to the component they're in, so class names won't clash with anything else. Use :global(...) when a rule genuinely needs to reach outside.

<p class="note">Only this component is styled</p>

<style>
  .note { color: teal; }
  :global(body) { margin: 0; }
</style>

Stores

When several components need the same value, a store holds it in one place. Read it inside a component with a $ prefix and the subscription is handled for you.

// counter.js
import { writable } from 'svelte/store'

export const count = writable(0)

<script>
  import { count } from './counter.js'
</script>

<button onclick={() => $count++}>Clicked {$count} times</button>