Skip to content
Launch XCODX Studio →
Browser IDE · Compiler · Runtime

The best IDE to build, test,
and run front-end code

Build HTML, JS, React, Vue, Angular, Svelte, TypeScript, Node.js, Python, PHP and modern web applications instantly in your browser with live preview, npm packages and professional developer tools.

xcodx@studio — boot
▸ spawning compiler workers : ready
▸ mounting virtual file system : ok
▸ resolving import map : 2,481 modules
▸ warming preview runtime : online
✓ studio ready in 38ms
Dependency graph
2,481modules
resolved via esm.sh + import maps
App.tsx 
export default function App() {
  const [n, setN] = useState(0);
  return <button onClick={...}>
    compiled {n}</button>;
}
Live preview
Hot reload synced
tsc → esbuild0 errors · 12ms
scroll
JSJavaScriptTSTypeScriptReactVueAngularSSvelte5HTML53CSS3Node.jsPythonphpPHPTailwindViteGoGoRustThree.jsJSJavaScriptTSTypeScriptReactVueAngularSSvelte5HTML53CSS3Node.jsPythonphpPHPTailwindViteGoGoRustThree.js
01 — Live Studio

A real workspace,
not a text box.

Explorer, project tabs, IntelliSense, diagnostics and keyboard shortcuts — with a live preview beside your code. The whole workflow you know, running entirely client-side.

xcodx studio — counter-app
connected ⌘K
import { useState } from "react";
import { getStars } from "./api";
 
export default function App() {
  const [count, setCount] = useState(0);
  return (
    <button onClick={() => setCount(count + 1)}>
      compiled {count} times
    </button>
  );
}
button {
  background: var(--ac);
  color: #06080f;
  border-radius: 12px;
  padding: 12px 22px;
}
export async function getStars() {
  const r = await fetch("/api/stars");
  return r.json();
}
⎇ main● 0 problemsTypeScript 5.5Ln 8, Col 22 · UTF-8 · LF
PREVIEW · hot reload
rendered output
click updates state → recompiles → repaints
synced 12ms ago
IntelliSense Autocomplete Diagnostics Format on save Multi-file projects Keyboard shortcuts Dark & light themes
02 — Ecosystem

One studio.
Every framework in orbit.

React, Vue, Angular, Svelte, Solid, Astro and the whole modern web stack — resolved on demand and running side by side. No config files, no build step to babysit.

X.io
React Vue Angular Svelte Solid Next.js Astro Tailwind Three.js GSAP D3
03 — Runtimes

Multiple runtimes,
one browser tab.

Frontend or backend, XCODX executes it in the browser. Switch languages and watch the same tab become a different machine.

main.ts browser · esbuild
const el = document.querySelector("#app");
el.innerHTML = `<h1>${greet("world")}</h1>`;

function greet(n: string) {
  return `hello, ${n}`;
}
// preview
hello, world
server.js node runtime
import { createServer } from "http";

createServer((req, res) => {
  res.end("running in a browser tab");
}).listen(3000);
▸ server listening on :3000
▸ ready in 41ms
main.py python 3
def fib(n):
    return n if n < 2 else fib(n-1) + fib(n-2)

print([fib(i) for i in range(10)])
>>> [0, 1, 1, 2, 3, 5, 8, 13, 21, 34]
index.php php 8
<?php
$langs = ["PHP", "in", "your", "browser"];
echo implode(" ", $langs);
// output
PHP in your browser
04 — Compiler pipeline

Source in. App out.
In milliseconds.

A full compiler toolchain runs on worker threads inside your browser — parsing, transforming, resolving and bundling without ever touching a server.

{ }
Source
your files
Parse
→ AST
Transform
TS · JSX · SCSS
Resolve
imports · npm
Compile
esbuild workers
Preview
live output
38ms
median cold compile
6ms
incremental rebuild
17
languages supported
0
installs required
05 — Runtime & preview

Edit. See it. Instantly.

Every keystroke recompiles and repaints. Try it — drag the value below and watch the preview update in real time.

card.css
.card {
  background: var(--ac);
  border-radius: 18px;
  padding: 18px 26px;
}
live preview · hot reload recompiled 7ms
.cardLive output
Live preview Cloud preview Shareable URL Embed mode Instant HMR
06 — Package graph

Real npm.
No node_modules.

Import any package and XCODX resolves it on demand over import maps and esm.sh — no installs, no bundler, no gigabytes of dependencies on disk.

importmap.json
{
  "imports": {
    "react": "https://esm.sh/react@18",
    "three": "https://esm.sh/three",
    "gsap": "https://esm.sh/gsap"
  }
}
import mapsesm.shIndexedDB cacheversion pinning
app react three gsap d3 react-dom d3-scale
▸ resolve react@18 ········ ok (cached)
▸ resolve three ··········· 1 file
✓ 6 packages resolved in 54ms
07 — Performance & mobile

Looks expensive.
Runs light.

GPU-accelerated animation, lazy-loaded scenes and a tiny footprint. Built to hit top Core Web Vitals — and to run just as well from your phone as your desktop.

100
Performance
100
SEO
100
A11y
100
Best pract.
xcodx · mobile
const app =
  mount("#root");
// edit anywhere
export app;
preview ✓
08 — Capabilities

Everything a workspace needs.

try it all →
01

Monaco editor

The full VS Code editing engine, running in the tab.

02

Multi-file projects

Real folders, real modules, real relative imports.

03

IntelliSense

Type-aware completion across your whole project.

04

Diagnostics

Inline errors and warnings, live as you type.

05

Package manager

Add any npm package — no terminal, no install wait.

06

Import maps

Native ESM resolution, no bundler to configure.

07

Live & cloud preview

Repaints instantly — and shares over a public URL.

08

Embed mode

Drop a live, editable studio into any web page.

09

Export & GitHub

Download your files, or sync with a repo. (GitHub soon)

10

IndexedDB storage

Projects persist locally — reload and pick up where you left off.

11

Keyboard-first

Command palette and the shortcuts already in your fingers.

12

Integrated terminal

A real in-browser shell — run code, manage packages, and drive Git.

09 — Compare

Not a playground.
A real IDE in the browser.

How XCODX Studio compares with code playgrounds and VS Code for the Web — a full compiler pipeline plus a 70-language runtime, private and offline.

Capability XCODX Studio Playgrounds VS Code Web
Runs in the browser, zero install✓✓✓
HTML / CSS / JS with live preview✓✓backend
Compiles Vue SFC · Angular · Svelte in-browser✓—backend
Runs Python · Java · C++ · Go · Rust (70+)✓—backend
npm via import maps — no node_modules✓limited—
Real Git + integrated terminal✓—partial
Vim / Emacs modes✓—via ext
Built-in Lighthouse audits✓——
Works offline (PWA) & on mobile✓partial—
Projects private & local (no upload)✓—varies

// reflects core capabilities per category of tool · verify specifics on each provider's site

10 — Templates

Skip setup.
Start from a template.

Open a preconfigured project and start writing code in seconds — every stack ready to run.

App.tsx
├ components/
└ main.tsx
React + TypeScript
react · ts · vite-style
Open in editor →
App.vue
├ <template>
└ <script setup>
Vue 3 SPA
vue · composition api
Open in editor →
index.html
├ style.css
└ script.js
Static Site
html · css · js
Open in editor →
server.js
├ routes/
└ package.json
Node API
node · express
Open in editor →
main.py
├ utils.py
└ data/
Python Script
python 3 · stdlib
Open in editor →
scene.ts
├ mesh.ts
└ loop.ts
Three.js Scene
three · webgl
Open in editor →
App.svelte
├ lib/
└ main.ts
Svelte App
svelte · reactive
Open in editor →
app.component.ts
├ app.routes.ts
└ main.ts
Angular App
angular · standalone
Open in editor →
App.tsx
├ index.tsx
└ store.ts
SolidJS App
solid · signals
Open in editor →
game.ts
├ sprites/
└ loop.ts
Pixi.js Game
pixi · webgl 2d
Open in editor →
index.html
├ input.css
└ tailwind.config
Tailwind Starter
tailwind · html
Open in editor →
index.php
├ api.php
└ .htaccess
PHP Server
php 8 · scripting
Open in editor →
~/xcodx
$ open xcodx.io/editor
▸ studio ready — no install
$ share ./my-app
▸ https://xcodx.io/p/9f2a41
$ embed --inline
▸ <iframe src="xcodx.io/e/9f2a41">
11 — Community & open source

Built in the open,
for people who ship.

Open formats, no lock-in, and a runtime that lives entirely in your browser. Share a link, embed a live editor, or take your files and go.

Start building → Star on GitHub soon
No lock-inOpen formats100% client-side
12 — FAQ

Questions,
answered.

Still curious? Just open it →

Yes — XCODX Studio is free to use and needs no account or download. Open xcodx.io/editor and you're coding in seconds: the editor, compiler, npm resolver and live preview all run in your browser, and every project is saved locally on your own device.

Yes. Beyond the web stack, XCODX runs 70+ programming languages — including Python, Java, C, C++, Go, Rust, Ruby and PHP. Open a file, press Run, and the program output, errors and images appear in the console — with no compiler or toolchain to install.

Yes. XCODX compiles React (JSX/TSX), Vue single-file components, Angular, Svelte and SolidJS directly in the browser with zero build step, and renders the result in a live preview that updates as you type — no local Node.js or CLI required.

XCODX resolves real npm packages in the browser through import maps and esm.sh, so libraries like React, Three.js, Tailwind, GSAP and D3 load instantly. There is no node_modules folder and no bundler running on your machine.

XCODX Studio is a strong free alternative: it pairs a real in-browser compiler pipeline and a 70-language runtime with npm, Git, an integrated terminal, live preview and offline support — while keeping every project private on your own device.

Yes. XCODX is fully responsive and installs as a Progressive Web App, so you can edit, compile, run and preview real projects from a phone or tablet — a genuine mobile coding workflow, not a cut-down viewer.

Your projects are stored locally in your browser with IndexedDB and are never uploaded to a server, so your code stays private. XCODX is also a Progressive Web App — install it once and keep building even with no connection.

Your files live in an in-browser Virtual File System. A compiler on a Web Worker transforms TypeScript, JSX, Vue, Angular, Svelte and SCSS; npm is resolved over import maps; a module graph links everything; and a cloud preview renders it like a real dev server — instantly, with nothing installed.