vue/sandbox
Vue Sandbox and Online Editor for Full Projects
Build a Vue application the way you would locally — Monaco editing, a real folder tree, packages, a terminal and Git — in a tab, on whatever machine you happen to be sitting at.
src/
components/ UserCard.vue NavBar.vue
composables/ useUser.ts
stores/ user.ts
router/ index.ts
App.vue
main.ts
package.json01 platform
A workspace, not a scratch file
A sandbox that holds one file is a scratch pad. What makes this a development environment is that the second file, the package, the branch and the terminal are all already there.
-
A folder tree you can actually organize
components/,composables/,stores/,router/— the shape a Vue project grows into. Create, rename, move and nest without leaving the tab. -
Packages that persist with the project
Install once and the import map is written into the project. Reopen it next week and the dependency is still resolved.
-
Git with branches and history
isomorphic-gitgives you staging, commits, branches and a readable log, running locally and working with no connection. -
An integrated terminal
A real shell surface over your project files, for the moments when typing is faster than clicking through a GUI.
02 deep dive
Autocomplete that knows what a template is
A Vue template is not HTML. It has directives, bindings, slots and your own components in it, and completion that does not know the difference is completion you learn to ignore.
Components resolve to their definitions. Start typing <User in a template and the editor offers UserCard because it read the import, then completes the props with their declared types.
Directives complete with their modifiers. v-model offers .lazy, .number and .trim; @click offers .stop, .prevent and .once. The list is what Vue actually accepts, not a guess.
Errors surface where you made them. A missing prop or a typo in a binding is underlined in the template, on the line you typed it, before you look at the preview.
- components
- resolved from imports
- props
- typed from defineProps
- directives
- with modifiers
- diagnostics
- inline
<template>
<UserCard
:name="user.name"
:role="user.role"
@select.once="open"
/>
</template>03 workflow
A project from empty to committed
No scaffolding command, no dependency install, no dev server to keep alive. This is the whole thing, start to first commit.
- new project → Vue
- src/App.vue, src/main.ts, index.html
- npm i pinia vue-router
- resolved via esm.sh · import map updated
- git init && git add -A
- git commit -m "scaffold"
- [main 4f2ab19] scaffold · 12 files
-
No install step to sit through
Packages resolve through esm.sh into a native import map. There is no
node_modulesto populate and nothing to download to disk. -
The repository is real
Commits, branches and history are genuine Git objects. Push to GitHub, or pull an existing repository in and keep committing.
-
It survives the tab closing
Projects, history and Git objects live in your browser's storage, so reopening is instant and offline.
04 features
What is in the workspace
Everything below is on the moment a project opens. There is no plugin list to curate and no environment to provision.
-
File management that behaves
Create, rename, move, delete and restore. Per-project history with restore points, plus zip import and export when the code needs to leave.
-
An npm panel
Search a package, click install, import by name. The import map is written for you and travels with the project.
-
Git, not a Git-like
Stage, commit, branch, diff and read history. Import a repository from GitHub and keep working against its real history.
-
Preview where you want it
Full width, split beside the code, inside device frames for responsive work, or popped into its own tab on a second monitor.
-
Multi-cursor and column select
Hold Alt and click, or Shift-Alt and drag. The same shortcuts you use locally, because it is the same editor core.
-
Go to definition
Ctrl-click a composable, a component or a type and land on the line that declares it, in whichever file that is.
-
Vim and Emacs bindings
Switch modes in settings. Muscle memory is worth more than a preference panel, so it is one toggle rather than a plugin.
-
Over a hundred templates
Ready-to-run starters, several of them Vue with Vue Router, Pinia and a UI kit such as Vuetify already wired together.
-
Everything on the device
Projects are stored locally. Nothing is uploaded, so a half-finished experiment stays yours and the whole thing works with no connection.
05 deep dive
A layout that survives contact with a second developer
The point of a real folder tree is not tidiness. It is that a project laid out conventionally can be handed to somebody else, or to yourself in six months, without a guided tour.
Conventional paths mean conventional imports. @/components/UserCard.vue resolves the way a Vite project resolves it, so code written here pastes into a local project unchanged and vice versa.
Composables get their own directory because they get their own lifecycle. A useUser that lives beside the component using it is a helper; one that lives in composables/ is a unit other components can reach for.
Stores and routes are separated for the same reason. Pinia stores and route definitions are the two things most likely to be edited by someone who did not write the component, and burying them makes that harder.
The tree is the documentation. A newcomer opening src/ should be able to guess where anything lives. That is worth more than any README, and it costs nothing but discipline at the start.
- aliases
- @/ resolves
- layout
- Vite conventions
- depth
- unlimited nesting
- moves
- imports follow
import { createApp } from 'vue'
import { createPinia } from 'pinia'
import router from '@/router'
import App from '@/App.vue'
createApp(App)
.use(createPinia())
.use(router)
.mount('#app')06 pipeline
A project's life, from new to handed over
Four stages, none of which need a machine you have configured. This is the argument for a browser workspace over a local one for anything you did not start.
-
Start
Open a template or an empty project. The tree, the entry point and the preview exist immediately — there is no scaffolding command whose flags you have to remember.
-
Grow
Add components, install packages, split logic into composables. The import map updates as you install, so nothing has to be re-wired when a dependency arrives.
-
Track
Commit as you go. Branches let you try the risky version without losing the working one, and the history is real Git rather than a save-state list.
-
Hand over
Push to GitHub, or export a zip with the folder structure intact. Either way the recipient gets ordinary source, not an export from a proprietary format.
07 ecosystem
One project, many stacks
A .vue file can sit beside a .jsx one and a Python script; the compiler is chosen per file, not per project.
08 languages
Everything the editor understands
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
The Vue sandbox — common questions
Questions about using this as a working environment.
Can a real project live here, or is it for demos?
A real one. A folder tree, packages, version control and a terminal are the things that make a project a project, and all four are here rather than simulated for a screenshot.
Is this really Monaco, the VS Code editor?
Yes — the same editor core Microsoft ships in Visual Studio Code, running client-side. That is why the command palette, multi-cursor and the keybinding set behave identically rather than approximately.
Does autocomplete work inside a template, not just the script?
Yes. Templates get component completion resolved from your imports, directive completion with modifiers, and prop completion typed from defineProps. A template is treated as Vue, not as HTML with extra attributes.
Can I format with Prettier?
Yes, on demand rather than on a timer. Formatting a .vue file handles all three blocks in one pass, so the template, the script and the style stay consistent with each other.
Do Vim keybindings work?
Yes — Vim and Emacs modes are both available from settings. They are built in rather than installed, so there is no extension to find and no first-run configuration.
Do I need to install a Vue extension?
No. Vue language support is on from the first keystroke. There is no marketplace to browse and no version of the extension to keep in step with your Vue version.
Where do my files actually live?
In your own browser's storage, on your device. Nothing is uploaded to a server, which is also why the sandbox works with no connection once it has loaded.
Is the terminal real, or a mock?
It is a working shell surface over your project files. It is not a Linux VM — there is no Node process behind it — so it covers file and project operations rather than arbitrary system commands.
How big a project can it hold?
Comfortably the size of a real Vue application — dozens of components, a store, a router and their dependencies. The limit is your browser's storage quota, not a plan tier.
Can I get my project out again?
Yes. Export the whole thing as a zip with its folder structure intact, or commit and push. It is ordinary source from that point on, with no proprietary format in the way.
Can two people work on the same sandbox project?
A project lives in one browser's storage, so it is single-owner by default. Sharing means handing over the project — a link, a pushed branch or an exported zip — rather than two cursors in one file at the same time.
What happens if I clear my browser data?
The project goes with it, the same way deleting a folder removes a local project. That is the trade for storing nothing on a server. Commit and push, or export a zip, for anything you would be unhappy to lose.
Does it work on a tablet or Chromebook?
Yes. The workspace is a responsive web app, so a Chromebook or an iPad gets the same file tree, the same compilers and the same preview a laptop does.
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 workspace
A project tree, packages and version control in under a minute, on whatever machine you happen to be sitting at.