Create and preview Vue 3 single-file components with Composition API support in real time.
A browser-based editor for Vue 3 single-file components (SFCs). Paste one file containing template, script setup, and style blocks, and the tool compiles it locally and renders a live preview that updates with every edit. The thing most users get wrong on the first try: only state declared with ref() or reactive() repaints the view. A plain let counter incremented in a click handler changes the variable but never the screen, because Vue tracks reactive objects, not raw assignments. Your code stays in the browser; nothing is uploaded.
A concrete input and expected output from the current implementation.
Input
<script setup>
import { ref, computed } from 'vue'
const count = ref(0)
const doubled = computed(() => count.value * 2)
function increment() {
count.value++
}
</script>
<template>
<button @click="increment">Count: {{ count }}</button>
<p>Doubled: {{ doubled }}</p>
</template> Expected output
A live preview rendering a button labeled "Count: 0" and a line reading "Doubled: 0". Each click on the button advances the label by one ("Count: 1", "Count: 2") and the line by two ("Doubled: 2", "Doubled: 4"), since doubled always equals twice count. doubled is a computed value derived from count, and both are reactive: each click runs increment(), which bumps count.value, recomputes doubled, and repaints the template. The template reads count and doubled without .value because templates auto-unwrap refs; the script needs .value.
An SFC is one file with up to three blocks: a template (markup with {{ }} interpolation and v- directives), a script setup block (Composition API code: imports, ref(), computed(), functions), and a style block, optionally scoped. The playground treats all three as a single component, so a complete, self-contained component can be pasted as one unit.
Each edit recompiles the SFC and re-creates the component in the preview pane, so changes appear without a run button. Mutations to ref() and reactive() state trigger repaints through Vue's reactivity system, and computed() values are recalculated from their dependencies before the template renders. Because the component is re-created on every edit, its runtime state (clicks, typed values) restarts from its initial values.
Because that variable is not reactive. Vue repaints only when state created with ref() or reactive() changes; assignments to plain variables sit outside the reactivity graph. Declare the value with const count = ref(0) and update it with count.value++ in the script, and the preview will repaint.
Because every edit recompiles and re-creates the component, so refs start again from their initial values. Runtime state such as clicks, typed text, or timers is not preserved across edits. This is expected: the preview always shows the component freshly mounted, so you cannot continue mid-demo after touching the code.
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.