framework/vue
Vue Online Editor and IDE for Real Projects
Write, compile and run real Single-File Components in a browser editor that runs @vue/compiler-sfc client-side, so nothing in the workflow is a simulation of the local one.
<script setup>
import { ref } from 'vue';
import { useInterval } from './useInterval';
const props = defineProps({ label: String });
const ticks = ref(0);
useInterval(() => ticks.value++, 1000);
</script>
<template>
<output class="ticker" aria-live="polite">
{{ props.label }}: {{ ticks }}
</output>
</template>
<style scoped>
.ticker { font-variant-numeric: tabular-nums; }
</style>00 live editor
Run a Vue component in your browser
A real Single-File Component, compiled with @vue/compiler-sfc and running below — no install, no build step. Edit it and the preview updates as you type, then open the full project in XCODX Studio.
01 platform
Why build Vue here
An SFC playground is a good place to reproduce a bug. It is a poor place to build something. XCODX starts from the project shape instead — a file tree, real tooling, and an editor that already knows Vue.
-
Monaco already speaks Vue
Syntax highlighting across all three blocks of an SFC, IntelliSense, the command palette, multi-cursor, folding and project-wide find-and-replace. Prettier on demand, Vim or Emacs bindings if that is your habit.
-
A component tree, not a single file
components/,composables/,stores/— the folders a Vue project grows into. Tabs, per-project history with restore points, auto-save, and zip import or export when the code needs to leave the browser. -
Version control included
isomorphic-gitgives you staging, commits, branches and full history offline. Pull an existing repository in from GitHub and keep working against real history. -
Your machine stays yours
Projects live in your browser's local storage — never uploaded. XCODX installs as a PWA, so the editor and the compiler both keep working on a plane.
02 deep dive
The Single-File Component, compiled properly
Vue's defining idea is that a component is one file. Honouring that in a browser means running the real compiler, not approximating it.
One file, three concerns, one compile pass. @vue/compiler-sfc reads the <template>, <script setup> and <style scoped> blocks together. The template becomes a render function, <script setup> is expanded into a component definition with its bindings already wired, and scoped CSS is rewritten with a data attribute so the rules cannot leak. XCODX runs that pass in a Web Worker on every save.
The Composition API without ceremony. ref and reactive create tracked state, computed derives from it, watch and watchEffect react to it, and defineProps / defineEmits declare the component's contract. Because <script setup> compiles top-level bindings straight into the render scope, there is no return { ... } to maintain and no this to reason about.
Options API is still there. Existing components written with data, methods and computed blocks run unchanged. Vue supports both, so XCODX supports both — you are not forced to rewrite a working component to open it here.
- SFC
@vue/compiler-sfc, the official compiler- Scoped CSS
- attribute-rewritten, never global
- Where it runs
- Web Worker, off the main thread
- Both APIs
- Composition and Options
import { onScopeDispose, watchEffect, toValue } from 'vue';
// A composable is a plain function using Vue's
// reactivity — no component instance required.
export function useInterval(fn, delay = 1000) {
let id;
const stop = () => clearInterval(id);
watchEffect(() => {
stop();
id = setInterval(fn, toValue(delay));
});
onScopeDispose(stop);
}03 pipeline
What happens between Ctrl+S and the preview
Four stages, all client-side, typically finishing before your hand leaves the keyboard.
-
parse
The
.vuefile is split into its template, script and style blocks with source positions preserved. -
compile
The template becomes a render function;
<script setup>is expanded; each style block gets a scope hash. -
resolve
Bare imports like
vueorpiniaare mapped to esm.sh URLs through a native import map. -
mount
The module is handed to the preview frame and the app remounts. No bundle is written to disk, because there is no disk.
04 deep dive
When compilation fails, it says where
A compiler that fails silently is worse than no compiler. Every stage above reports against your source, not against the code it generated.
Errors carry a line and a column. A template error points at the directive you mistyped in the file you wrote, not at an offset in a render function you have never seen.
The stage is named. Knowing whether something failed in the template compile or in the style pass tells you where to look, and the two have almost nothing to do with each other.
The previous render survives. A failed compile leaves the last working output on screen with the error beside it, so you still have the thing you were comparing against.
- errors
- line + column
- stage
- named
- on failure
- last good render kept
- styles
- Sass errors surfaced
Badge.vue:6:24 template
Property "tonee" is not defined on the instance.
6 | <span :class="['badge', tonee]">
| ^^^^^05 features
What ships with a Vue project
All of it is active from the first keystroke — no extensions to pick, no starter to clone.
-
Pinia, Vue Router, VueUse
Install from the npm panel and import by name. XCODX resolves through esm.sh and updates the import map, so
import { createPinia } from 'pinia'resolves on the next save. Vuetify and Ant Design Vue work the same way. -
Scoped styles that stay scoped
<style scoped>is compiled with a component scope hash exactly as it is locally, so two components can both style.cardwithout a collision. -
SCSS inside an SFC
Write
<style scoped lang="scss">and Dart Sass compiles it in the browser. Less and Pug are handled on the same path. -
TypeScript in script setup
<script setup lang="ts">with typed props viadefineProps<{}>(). Annotations are stripped during compilation — no separate type-check step in the loop. -
Preview where you want it
Full width while you focus, split beside the code, or popped into its own tab on a second monitor — the preview follows how you are working rather than fixing you to one layout.
-
Templates, not boilerplate
Over a hundred ready-to-run starters, several of them Vue with Vue Router, Pinia and a UI kit such as Vuetify already wired together.
06 workflow
From empty tab to mounted app
No scaffolding command, no dependency install, no dev server. The whole loop, start to commit.
- new project → Vue
- created App.vue, main.js, index.html
- install pinia
- resolved via esm.sh · import map updated · 0 files written
- save Ticker.vue
- compiler-sfc: template → render 6ms (worker)
- style scoped → [data-v-8f2a1c]
- preview reloaded · app mounted on #app
- git commit -m "ticker"
- [main 9d31b02] ticker · 3 files changed
-
Reactivity you can watch
Change a
refand the preview updates. No rebuild sits between the edit and the result. -
Tablets are real machines
Compilation is client-side, so an iPad runs the same loop a laptop does.
-
Share by link
Hand a reviewer a live preview URL instead of a zip and a README.
07 ecosystem
Vue is one of many
A single project can hold a .vue component, a .jsx one and a Python script. XCODX chooses the compiler per file, so mixed stacks are not a special case.
08 languages
Everything the editor understands
Syntax highlighting and IntelliSense cover 70+ languages. These are the ones XCODX also compiles or executes for you.
Compiled in your browser11
Zero build step. Transform runs on a Web Worker, so typing never blocks.
- JSX
- TSX
- TypeScript
- Vue SFC
- Svelte
- Angular (JIT)
- SolidJS
- SCSS
- Sass
- Less
- Pug
Rendered natively8
Straight to the live preview, no transform in the way.
- HTML
- CSS
- JavaScript
- JSON
- Markdown
- Jupyter (.ipynb)
- SVG
- YAML
Executed on demand22
70+ languages run through a self-hosted Piston engine. stdout, stderr, images and tracebacks land in the console.
- Python
- Java
- C
- C++
- C#
- Go
- Rust
- Ruby
- PHP
- Kotlin
- Swift
- Lua
- Scala
- Perl
- Haskell
- Elixir
- Dart
- R
- Julia
- SQLite
- Bash
- PowerShell
09 questions
Vue on XCODX — common questions
Are these real .vue Single-File Components?
Yes. Files are authored as genuine SFCs and compiled by @vue/compiler-sfc, the same official compiler a local Vite project uses. The template becomes a render function, <script setup> is expanded and style blocks are scope-hashed — not simulated with a runtime template string.
Does script setup work, or do I need the older syntax?
<script setup> is fully supported, including defineProps, defineEmits, defineExpose and top-level await. The Options API works too, so an older component with data and methods blocks runs without a rewrite.
Is this the same compiler a Vite build uses?
Yes — @vue/compiler-sfc, the package Vue publishes and @vitejs/plugin-vue calls. The difference is where it runs, not what it is, which is why output matches rather than approximates.
Do scoped styles behave correctly?
Yes. <style scoped> is compiled with a component scope attribute, so rules apply to that component only. Two components can each define .card with no collision, exactly as in a local build.
Can I use SCSS or TypeScript inside an SFC?
Both. <style lang="scss"> is compiled by Dart Sass in the browser, and <script setup lang="ts"> has its annotations stripped during compilation. Neither adds a configuration file or a build step.
Does it type-check my TypeScript?
No. Annotations are stripped rather than verified, the same trade a vue-tsc-free dev loop makes locally. You get types for editing and completion; a full check belongs in CI where it can take its time.
Why compile in a Web Worker instead of on the main thread?
Because compilation and typing compete for the same thread otherwise. A large SFC takes long enough that a main-thread compile drops frames while you type. In a worker, the two are genuinely concurrent and the editor never stutters.
Can I install Pinia, Vue Router or VueUse?
Yes. Search the package in the npm panel and install it — XCODX resolves it through esm.sh and writes a native import map, so bare imports like import { createRouter } from 'vue-router' resolve immediately. Vuetify and Ant Design Vue install the same way.
Can I work with Vue 2 as well as Vue 3?
Both. Vue 3 is the default and gets @vue/compiler-sfc, <script setup> and the Composition API. A Vue 2 project compiles against the Vue 2 runtime instead, which matters when you are maintaining something that has not migrated yet and needs the Options API and the older lifecycle behaving exactly as they did.
Does this work with Nuxt?
Not Nuxt itself. Nuxt builds on a Node server for routing, server rendering and its data layer, and none of that survives in a browser-only environment. Vue components you intend to move into a Nuxt project are a different matter — write and check them here, then paste them across, since the component layer is unchanged.
How is this different from the official SFC Playground?
The SFC Playground is built to demonstrate the compiler on one or two files. XCODX is built to hold a project: a folder tree, tabs, Monaco with IntelliSense, npm installs, real Git with branches and history, and an integrated terminal.
Can I use this to reproduce a bug for an issue report?
That is one of the better uses for it. Vue's own documentation recommends an online playground for reproductions, and a multi-file project reproduces a class of bug a single file cannot — anything involving imports across components, a store, a router, or a composable in its own module. Share the link on the issue and a maintainer opens exactly what you ran.
Is this a good place to learn Vue?
Yes — a Single-File Component is the unit Vue teaches in, and this compiles real ones rather than an approximation, so nothing you learn has to be unlearned when you move to a local project. Teachers get the same benefit from the other side: one link opens the same working project for a whole class regardless of what they are running.
Do I need to install anything to use XCODX Studio?
No. XCODX Studio is a browser-based IDE — the editor, the compilers and the preview all run client-side. There is no download, no package manager to set up and no configuration file to write. Opening the editor is the whole setup step.
Where is my code stored?
In your own browser. Projects, file history and Git objects live in local storage on your device and are never uploaded to a server. That also means XCODX works offline: it is a Progressive Web App, so you can install it and keep coding with no connection.
Is XCODX Studio free?
Yes. The editor, the live preview, the 70+ language runtimes, npm installs, Git and the integrated terminal are all free to use.
Can I use XCODX on a tablet or Chromebook?
Yes. The editor is a responsive web app, so a Chromebook, an iPad or an Android tablet gets the same compilers and the same preview a laptop does — there is no desktop-only build, because there is no build to install at all. The layout adapts to the screen rather than shrinking a desktop UI into it.
Can I export a project or move it to my own machine?
Yes. Export the whole project as a zip with its folder structure intact and open it locally, or commit it and push. It is ordinary source on disk from that point on — no proprietary format and no lock-in, which is also why importing an existing repository from GitHub works the same way in reverse.
Nothing to install
Open a Vue project now
A mounted component in under a minute. No install, no scaffolding step, no configuration file to write first.