vue.landing Open editor

framework/vue

Vue Online IDE & Playground

Build, edit, compile, and preview Vue Single File Components instantly in your browser. Powered by @vue/compiler-sfc running in a dedicated worker for fast live compilation, scoped CSS, and zero installation.

Start a Vue project How SFCs compile
compiler@vue/compiler-sfc
apiscript setup
stylesscoped
installnone
Ticker.vueuseInterval.jsApp.vue
<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>
SFC → render fn in 6ms · scoped style hashed

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-git gives 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
composables/useInterval.js
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);
}
composable · 12 lines

03 pipeline

What happens between Ctrl+S and the preview

Four stages, all client-side, typically finishing before your hand leaves the keyboard.

  1. parse

    The .vue file is split into its template, script and style blocks with source positions preserved.

  2. compile

    The template becomes a render function; <script setup> is expanded; each style block gets a scope hash.

  3. resolve

    Bare imports like vue or pinia are mapped to esm.sh URLs through a native import map.

  4. 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 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 .card without 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 via defineProps<{}>(). 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.

05 workflow

From empty tab to mounted app

No scaffolding command, no dependency install, no dev server. The whole loop, start to commit.

vue-ticker — xcodx
  • 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 ref and 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.

06 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.

  • React
  • Vue
  • Angular
  • Svelte
  • SolidJS
  • Lit
  • HTMX
  • Vite
  • TypeScript
  • JavaScript
  • HTML
  • CSS
  • SCSS
  • Less
  • Pug
  • Tailwind
  • Bootstrap
  • Vuetify
  • Ant Design
  • shadcn/ui
  • Phaser
  • Node.js
  • Python
  • Java
  • C++
  • C#
  • Go
  • Rust
  • Ruby
  • PHP
  • Kotlin
  • Swift
  • SQL
  • Bash

07 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

08 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.

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.

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.

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.

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.

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.

Start a Vue project Browse the docs