Write and preview Svelte components with reactive declarations, stores, and live rendering.
A browser sandbox for writing Svelte components: type the component's script, markup, and styles into the editor and a preview pane renders the result, updating as you edit. The code is compiled with the Svelte compiler inside the page, so reactive declarations, stores, and event handlers behave as they would in a real app, and nothing you type is uploaded anywhere. The most common stumble is the dollar sign: store values must be read as `{$count}`, while `{count}` renders the store object itself.
A concrete input and expected output from the current implementation.
Input
<script>
import { writable } from 'svelte/store';
const count = writable(0);
const add = () => count.update(n => n + 1);
$: doubled = $count * 2;
</script>
<button onclick={add}>Add one</button>
<p>{$count} -> {doubled}</p> Expected output
Renders a button labeled Add one with a paragraph reading `0 -> 0`. Each click calls `count.update(n => n + 1)`, raising the store value by 1, and the reactive declaration recomputes `doubled` before the next paint, so after one click the paragraph reads `1 -> 2` and after two clicks `2 -> 4`.
The compiler tracks that `doubled` references `$count`, so every store update re-runs the declaration before rendering, and the paragraph always shows the current store value and its double. The figures follow directly: 0*2=0, then 1*2=2, then 2*2=4.
Each edit recompiles the component with the Svelte compiler and the preview is rebuilt from the compiled output, so what you see is a real component instance: reactive declarations, stores, and event handlers run as they would in a built app. Compilation happens in the browser, so the source never leaves the page. Code that does not compile has no runnable form, so the preview updates only for valid Svelte.
`$:` declarations re-run only when a variable they reference is reassigned; the compiler detects those references statically, so `$: doubled = count * 2` tracks `count`, while a declaration that mutates an unreferenced variable does not re-run for that mutation. Store values are read with the `$` prefix, which subscribes the component to the store; `writable().set()` and `.update()` notify subscribers and the markup re-renders with the new value.
You are rendering the store object, not its value. `{count}` prints the store; `{$count}` subscribes to it and prints the current value. The `$` prefix is required in markup and reactive declarations, and it works only inside a component instance - in module-level code, import `get` from `svelte/store` and call `get(count)`.
Mostly, but the playground compiles one component in isolation. Imports from your own modules will not resolve, so anything the component needs must be defined inside it - `svelte/store` is available for stores - and only the component's own `<style>` applies, so results can differ until your project's global styles and surrounding context are in place.
The example and behavioral notes were checked against the browser implementation. Standards and primary references below define the relevant format, formula, or platform behavior.
Format, validate, and beautify JSON with syntax highlighting and error detection.
Encode text or files to Base64 and decode Base64 strings back to their original form.
Format and indent SQL queries for better readability across all major dialects.
Convert HTML markup into clean Markdown syntax with support for tables and lists.
Write Markdown and see the rendered HTML output in real time with live preview.
Visualize unified diffs and patch files with color-coded additions and deletions.