# Live Playground
> Try an interactive @humanspeak/svelte-markdown playground with live preview, editable markdown and HTML, renderer behavior, and Svelte 5 output.
**Source:** [https://markdown.svelte.page/examples/playground](https://markdown.svelte.page/examples/playground)
**Markdown mirror:** [https://markdown.svelte.page/examples/playground.md](https://markdown.svelte.page/examples/playground.md)
---
This mirror preserves the prose, implementation notes, and runnable Svelte source behind the live example page.
## FIG-001: live playground.
Edit markdown on the left, see it rendered on the right. Mix markdown with HTML — both render in real time with a 500ms debounce.
**Metadata:** tag: `DEMO` | demo: `markdown + preview`
### Notes
- Type or paste markdown on the left. Inline HTML — ` `, ` `, ` ` — renders right alongside.
- The preview updates 500ms after the last keystroke, so large pastes don't thrash the renderer.
- Powered by the same `SvelteMarkdown` you'd drop into your own app — no special playground harness.
### Source
#### MarkdownPlayground.svelte
Source file: [src/lib/examples/playground/demos/MarkdownPlayground.svelte](https://github.com/humanspeak/svelte-markdown/blob/main/docs/src/lib/examples/playground/demos/MarkdownPlayground.svelte)
```svelte
{#snippet left()}
{/snippet}
{#snippet right()}
{/snippet}
```