index.landing Open editor

xcodx.io/build

Online Playground for HTML, React, Vue, Angular & More

Open a real playground for any framework or UI library — JSX, Vue SFCs, TypeScript and SCSS compile the moment you save, with live preview, npm and a terminal. Nothing to install.

Popular right now

Browse all →
Reactframework · popularBuild, edit, run and debug React in a browser IDE. JSX compiles through Sucrase, npm installs via import maps, and the preview updates as you type./build/react Pythonlanguage · popularRun Python 3 online — execute scripts, algorithms and data code in the browser with instant output./compiler/python Vueframework · popularWrite, compile and run real .vue Single-File Components in a browser editor. @vue/compiler-sfc runs client-side, so script setup, scoped styles and SCSS all work./build/vue

Browse the whole catalog

91 playgrounds & compilers

Alpine.jsframeworkAn Alpine.js playground and online editor: add behavior to HTML with x-data and x-on directives and see it work live, no build and nothing to install./build/alpine AngularframeworkCompile and run standalone Angular components in a browser IDE. JIT compilation, real dependency injection, signals and npm — with no CLI to install./build/angular Angular PlaygroundframeworkAn Angular playground for components, services and signals: JIT compilation, console output beside the app, npm packages and a link you can share on an issue./build/angular-playground Angular SandboxframeworkA full Angular workspace in a browser: template-aware editing, a real file tree, npm installs, an integrated terminal and Git with branches. No CLI required./build/angular-sandbox Ant Designui kitAn Ant Design playground and online editor: build an enterprise React interface from antd components with a live preview and npm, with nothing to install./build/antd Babylon.jslibraryA Babylon.js playground and online editor: build a WebGL 3D scene with meshes, PBR materials and lights, and see it render live, with npm and nothing to install./build/babylon BootstrapstylingA Bootstrap 5 playground and online editor: the grid, components and working modals and toasts from the CDN, previewed live, with nothing to install./build/bootstrap Chakra UIui kitA Chakra UI playground and online editor: compose components with style props, see them render live, with npm and TypeScript, and nothing to install./build/chakra Chart.jslibraryA Chart.js online editor and playground: configure a chart in JavaScript and watch it render on a live canvas, with every chart type, npm and nothing to install./build/chartjs CSSlanguageWrite and preview CSS in a browser editor with instant repaint, real files, SCSS and Less compiled in the tab, and device frames for checking breakpoints./build/css D3.jslibraryA D3.js online editor and playground: bind data to SVG, build scales and axes, and watch transitions run live, with npm and TypeScript, and nothing to install./build/d3 EChartslibraryAn ECharts online editor and playground: describe a chart as one option object and watch Apache ECharts render it live on a canvas, with npm and nothing to install./build/echarts Element Plusui kitAn Element Plus playground and online editor: build a Vue 3 interface from its component set with a live preview and npm, with nothing to install./build/elementplus HTMLlanguageWrite, edit and preview HTML, CSS and JavaScript in a browser IDE with live preview, multi-file projects, npm packages and Git. No signup and nothing to install./build/html HTML CompilerlanguageHTML is parsed, not compiled — but Pug, SCSS and TypeScript are. Compile them to what the browser reads, validate your markup and inspect the rendered result./build/html-compiler HTML PlaygroundlanguageExperiment with layouts, components and front-end ideas in an interactive HTML playground with instant rendering, CSS tooling and a link you can share./build/html-playground HTML RunnerlanguageExecute HTML, CSS and JavaScript instantly with a live preview, a console beside the page, real device frames for responsive testing and zero installation./build/html-runner HTML SandboxlanguageDevelop multi-file HTML applications with folders, images, fonts, CSS, JavaScript, npm packages and Git in a professional browser workspace. Nothing to install./build/html-sandbox HTMXlanguageTry htmx in a browser editor: hx-get, hx-post, hx-swap and hx-target against real HTML fragments in your project, with no server to stand up first./build/htmx JavaScriptlanguageWrite, run and debug JavaScript in a browser IDE with live preview, a console beside the page, npm packages and TypeScript. No install and no account./build/javascript jQuerylibraryA jQuery online editor and compiler: select elements, chain methods and handle events, and watch the DOM update in a live preview, with nothing to install./build/jquery JSONlanguageA JSON editor online: format, beautify and validate JSON in a real code editor with error checking, folding and multi-file projects, and nothing to install./build/json LottietoolingA Lottie player online: drop in a Lottie JSON and play, pause, scrub and re-time the animation in the browser, with nothing to install./build/lottie Mantineui kitA Mantine playground and online editor: build a React interface from Mantine components and hooks with a live preview and npm, with nothing to install./build/mantine MarkdownlanguageAn online Markdown editor with a live preview: GitHub-flavored Markdown, tables, task lists, code highlighting, Mermaid diagrams and math, with nothing to install./build/markdown MermaidtoolingA Mermaid live editor in the browser: type flowcharts, sequence and class diagrams as text and watch them render to SVG live, with nothing to install./build/mermaid MUIui kitAn MUI online editor and playground: build Material UI React components with a live preview, npm and TypeScript, with nothing to install./build/mui npmfeatureSearch any npm package and click install — XCODX resolves it through esm.sh into a native import map, so it imports on the next render, no node_modules./build/npm p5.jslibraryA p5.js online editor for creative-coding sketches: write setup and draw, watch the canvas render live, with npm, multi-file projects and nothing to install./build/p5 PhaserlibraryA Phaser online editor and sandbox: build a 2D HTML5 game with sprites, physics and input, and play it in a live canvas, with npm and nothing to install./build/phaser Pixi.jslibraryA Pixi.js online editor and playground: draw sprites and particles on a fast WebGL canvas and watch them render live, with npm and nothing to install./build/pixijs PreactframeworkBuild Preact in a browser IDE — the 3KB React alternative, with hooks, htm templates and no build step, plus npm, live preview and nothing to install./build/preact PreactframeworkA Preact playground to try hooks, signals and htm in the browser — the console beside the app, npm on tap, and a link you can share, with nothing to install./build/preact-playground PuglanguageWrite real Pug pages in a browser. The .pug file is the entry point — no index.html, no build step — with locals from JSON and dependency-tracked recompiles./build/pug ReactframeworkBuild, edit, run and debug React in a browser IDE. JSX compiles through Sucrase, npm installs via import maps, and the preview updates as you type./build/react React CompilerframeworkCompile React JSX and TSX in your browser with Sucrase in a worker, plus diagnostics that quote your own source and a straight answer on React Compiler./build/react-compiler React PlaygroundframeworkAn interactive React playground: hooks and JSX with hot updates, console output beside the app, npm packages and a shareable link for bug reproductions./build/react-playground React SandboxframeworkA full React workspace in a browser: Monaco editing with JSX-aware autocomplete, a real file tree, npm installs, an integrated terminal and Git with branches./build/react-sandbox SCSSlanguageCompile SCSS and Sass to clean CSS with Dart Sass running client-side, then see the result applied to a live page instead of only copying it out./build/scss shadcn/uiui kitA shadcn/ui playground: render the copy-paste components you own — Radix primitives styled with Tailwind — with a live preview and nothing to install./build/shadcn SolidJSframeworkWrite SolidJS in a browser IDE: JSX compiles through babel-preset-solid to fine-grained DOM updates, signals and stores drive the preview, with npm and no install./build/solid SvelteframeworkCompile and run Svelte 5 in a browser IDE. Runes, scoped styles and transitions all work, npm installs through import maps, and there is nothing to install./build/svelte Svelte PlaygroundframeworkA Svelte playground for runes, transitions and scoped styles: instant compiles, console output beside the app, npm packages and a link you can share on an issue./build/svelte-playground Svelte SandboxframeworkA full Svelte workspace in a browser: component-aware editing, a real file tree, .svelte.ts modules, npm installs, an integrated terminal and Git with branches./build/svelte-sandbox Tailwind CSSstylingA Tailwind CSS playground and online editor — type utility classes and the official Tailwind browser engine generates the CSS live, no PostCSS build./build/tailwind three.jslibraryA three.js online editor and playground: write WebGL scenes in JavaScript and see them render live, with npm, TypeScript and multi-file projects, nothing to install./build/threejs TypeScriptlanguageWrite TypeScript in a browser IDE with full inference, strict-mode checking as you type, npm packages and a live preview. Annotations strip at load — no build step./build/typescript VitetoolingA Vite-style IDE in the browser: import.meta.glob, import.meta.env and .env files, TypeScript and zero config, compiled with esbuild — no Node dev server to run./build/vite VitetoolingA Vite sandbox in the browser: build a multi-file project with import.meta.glob across folders, env config and TypeScript, plus a terminal and Git, with no install./build/vite-sandbox VueframeworkWrite, compile and run real .vue Single-File Components in a browser editor. @vue/compiler-sfc runs client-side, so script setup, scoped styles and SCSS all work./build/vue Vue PlaygroundframeworkAn interactive Vue REPL and editor: hot updates, console output beside the app, npm packages and a shareable link — for experiments and bug reproductions./build/vue-playground Vue SandboxframeworkA full Vue workspace in a browser: Monaco editing with template-aware autocomplete, a real file tree, npm installs, an integrated terminal and Git with branches./build/vue-sandbox Vuetifyui kitA Vuetify playground and online editor: compose Material Design components for Vue 3 with a live preview, npm and a shared theme, with nothing to install./build/vuetify PythonlanguageRun Python 3 online — execute scripts, algorithms and data code in the browser with instant output./compiler/python JavalanguageCompile and run Java online — a full JDK with classes and stdin, no local setup./compiler/java C++languageCompile and run C++ online — modern standards and fast execution with instant output./compiler/cpp ClanguageCompile and run C online — a full toolchain in the browser, stdin and stdout included./compiler/c C#languageRun C# online — compile and execute console programs with nothing to install./compiler/csharp PHPlanguageRun PHP online — execute scripts and see output instantly, no server to configure./compiler/php GolanguageCompile and run Go online — build and execute Golang programs with instant output./compiler/go RustlanguageCompile and run Rust online — safe systems code executed in the browser, zero setup./compiler/rust KotlinlanguageRun Kotlin online — compile and execute Kotlin on the JVM with no install./compiler/kotlin SwiftlanguageRun Swift online — compile and execute Swift programs in the browser instantly./compiler/swift RubylanguageRun Ruby online — execute Ruby scripts with a real interpreter and live output./compiler/ruby RlanguageRun R online — execute statistics and data-analysis scripts in the browser./compiler/rscript SQLlanguageRun SQL online — execute SQLite queries and see result tables instantly./compiler/sqlite3 DartlanguageRun Dart online — compile and execute Dart programs with instant output./compiler/dart ScalalanguageRun Scala online — compile and execute Scala on the JVM, no setup required./compiler/scala PerllanguageRun Perl online — execute Perl scripts and one-liners with live output./compiler/perl BashlanguageRun Bash online — execute shell scripts and commands right in the browser./compiler/bash Node.jslanguageRun Node.js online — execute JavaScript on the server runtime with instant output./compiler/node-js LualanguageRun Lua online — execute lightweight Lua scripts in the browser, zero install./compiler/lua HaskelllanguageRun Haskell online — compile and execute pure functional code instantly./compiler/haskell JulialanguageRun Julia online — execute high-performance numerical code in the browser./compiler/julia GroovylanguageRun Groovy online — execute Groovy on the JVM with no local setup./compiler/groovy ElixirlanguageRun Elixir online — execute concurrent, functional Elixir code instantly./compiler/elixir ClojurelanguageRun Clojure online — execute Lisp on the JVM in the browser, zero setup./compiler/clojure F#languageRun F# online — compile and execute functional .NET code with instant output./compiler/fsharp-net Visual BasiclanguageRun Visual Basic online — compile and execute VB programs with no install./compiler/basic FortranlanguageCompile and run Fortran online — numerical and scientific code in the browser./compiler/fortran COBOLlanguageCompile and run COBOL online — execute classic business programs instantly./compiler/cobol Assembly x86languageAssemble and run x86 assembly online — NASM in the browser with live output./compiler/nasm PascallanguageCompile and run Pascal online — execute classic Pascal programs, zero setup./compiler/pascal ProloglanguageRun Prolog online — execute logic-programming queries in the browser./compiler/prolog ErlanglanguageRun Erlang online — execute concurrent, fault-tolerant code instantly./compiler/erlang OCamllanguageCompile and run OCaml online — fast functional code in the browser./compiler/ocaml RacketlanguageRun Racket online — execute Scheme-family programs with instant output./compiler/racket NimlanguageCompile and run Nim online — fast, expressive systems code, zero setup./compiler/nim PowerShelllanguageRun PowerShell online — execute PowerShell scripts right in the browser./compiler/powershell CrystallanguageCompile and run Crystal online — Ruby-like syntax at native speed, instant output./compiler/crystal ZiglanguageCompile and run Zig online — modern systems programming in the browser./compiler/zig

Run a language online

All 80+ languages →
Python Java JavaScript C++ C# Go Rust PHP Ruby Swift Kotlin TypeScript SQL Bash

A real dev environment, running in a browser tab

XCODX turns any framework or library into an instant online playground. Pick React, Vue, Angular, Svelte or SolidJS and it compiles JSX, single-file components and TypeScript in the browser, with a live preview beside your code — no local toolchain, no build step and nothing to install.

Everything runs client-side. A compiler on a Web Worker transforms your JSX, TSX, Vue and Svelte components and your SCSS or Less; npm packages resolve on the fly through import maps and esm.sh; and a module graph links it all together and renders it in a live preview that reloads as you type. There is no server build, so the loop between editing and seeing the result is instant.

It is a full workspace, not a snippet box. Every project is multi-file with real folders, an integrated terminal, npm package search, Prettier formatting and Git source control powered by isomorphic-git — stage, commit, branch and browse history entirely in the browser. Projects are saved locally on your device, auto-saved as you work, and exportable as a zip whenever you want to move them elsewhere.

Need more than the web stack? The same environment runs 80+ programming languages under the online compiler — Python, Java, C, C++, Go, Rust and more — so you can build a front-end app and test a backend algorithm without leaving the browser tab.

Real framework compilation

JSX, Vue single-file components, Angular, Svelte and SolidJS compile in the browser on a worker thread the moment you save — no build step and no config to write.

npm, Git and a terminal

Install any npm package, run real Git and drive an integrated terminal, all client-side. Nothing is uploaded and nothing is installed on your machine.

Live preview as you type

Watch your app update instantly in a split preview or a real device frame, with TypeScript and SCSS compiled on every keystroke.

Frequently asked questions

Can I run React or Vue in the browser?

Yes. Open the React, Vue, Angular, Svelte or SolidJS playground and it compiles and previews live — no local setup and nothing to install.

Do I need to install anything or create an account?

No. Every playground runs entirely in your browser with a live preview, npm and a terminal — no install, no sign-up, and your code stays on your device.

How do the playgrounds run without a build step?

Compilation happens client-side in a Web Worker: JSX and TypeScript are transformed with Sucrase, Vue single-file components with the official @vue/compiler-sfc, and SCSS/Sass with Dart Sass. There is no bundler and no server round-trip, so the preview updates as you type.

Can I install npm packages?

Yes. Import any package by name and it resolves on the fly through esm.sh and import maps — libraries like Three.js, Tailwind, GSAP, D3 and Zod load instantly, with no node_modules folder to manage.

Does it support TypeScript?

Fully. TypeScript, TSX and typed single-file components compile in the browser with zero configuration, so you get a real typed workflow without a local toolchain.

Which frameworks and libraries are supported?

React, Vue, Angular, Svelte, SolidJS and Preact, plus UI kits like MUI, Ant Design, Chakra and Tailwind, and graphics libraries like Three.js, p5.js and D3.

Is my code private, and can I use it offline?

Your projects are stored locally in your browser and are never uploaded, so they stay private. XCODX is also a Progressive Web App — install it once and keep building with no connection.

Can I also run languages like Python or Java?

Yes — the language cards open a full online compiler under /compiler, where you can run Python, Java, C++, Go, Rust and 80+ more in an interactive terminal.