web/javascript
Online JavaScript Editor and IDE with Live Preview
Write modern JavaScript against the platform it actually runs on — the DOM, fetch, modules and npm packages — with a console beside the page and no toolchain in front of it.
import { format } from './utils.js'
import confetti from 'canvas-confetti'
const res = await fetch('./data.json')
const rows = await res.json()
console.table(rows.map(format))
confetti()01 platform
Browser JavaScript, and where the other kind lives
Two different things are called running JavaScript online, and picking the wrong one wastes an afternoon. This page is about the first.
-
JavaScript that touches a page — that is here
The DOM,
fetch,localStorage, canvas, animations, ES modules and npm packages. Anything a browser can do, this editor can do, because the preview is a browsing context. -
JavaScript that reads stdin — that is /compiler/javascript
Console programs that take input and print output, the shape interview questions and exercise sites use. That runs on a real engine on a server, and XCODX has a page for it.
-
Node APIs live at /compiler/node-js
fs,process,requireand the standard library need a Node process, which a browser tab does not have. The compiler network runs those properly rather than pretending. -
Most web work is the first kind
If your JavaScript ends up in a page, this is the right tool. If it ends up in a terminal, follow one of the two links above.
02 deep dive
Native ES modules, and npm without a bundler
The thing that makes browser JavaScript pleasant in 2026 is that the module system is finally the browser's own, and imports resolve without a build step in front of them.
import works between your own files. Split logic into utils.js and import it by relative path. No bundler, no config, no entry point to declare.
npm packages import by name. Install from the panel and XCODX writes a native import map, so import confetti from 'canvas-confetti' resolves through esm.sh with nothing compiling it first.
Top-level await is available. Inside a module you can await at the top level, which removes the wrapper function that used to sit around every async script.
TypeScript is one rename away. Change .js to .ts and annotations strip at load. There is no build configuration to add and no output directory to look in.
- imports
- native ESM
- npm
- esm.sh + import map
- await
- top level
- types
- rename to .ts
export const format = row => ({
...row,
price: row.price.toFixed(2)
})03 features
What ships with a JavaScript project
Everything below is on the moment the editor opens. No plugin to choose and no configuration file to write.
-
Monaco, the VS Code engine
The same editor core: multi-cursor, the command palette, go-to-definition, and the keybindings your fingers already know.
-
A console beside the page
console.log,console.table, warnings and thrown errors land where you can read them without opening devtools. -
Errors that name your file and line
An uncaught throw reports the file, the line and the stack rather than an offset in something concatenated together.
-
Any npm package that ships ESM
Search, click install, import by name. The import map travels with the project.
-
TypeScript alongside JavaScript
Both compile on the same path. Adding types to one file does not commit the project to a build step.
-
Git in the browser
Commits, branches and history through
isomorphic-git, working offline and pushing to GitHub when you want.
04 workflow
From an empty tab to running code
No project to scaffold, no npm install to sit through, no dev server. This is the whole loop.
- new project → JavaScript
- index.html, app.js
- npm i canvas-confetti
- import map updated · importable by name
- [table] 4 rows
- TypeError: rows.map is not a function
- at app.js:7:14
- fixed · re-executed · 0 errors
-
Nothing sits between saving and running
No bundler and no watcher. A changed module re-executes and the page updates in place.
-
Packages need no build step
esm.sh and a native import map mean a module script imports from npm directly.
-
It works with no connection
XCODX installs as a Progressive Web App, so editing and running keep working offline once loaded.
05 ecosystem
A project that mixes languages
A .js file can sit beside a React component and a Python script; XCODX picks the right handling per file rather than per project.
06 languages
Every language the editor runs
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
07 questions
JavaScript on XCODX — common questions
The questions that decide whether this fits your work.
Can I run Node.js code here?
No, and that is a real distinction rather than a limitation to work around. fs, process and require need a Node process, and a browser tab has none. XCODX runs those at /compiler/node-js on a real engine — use that page for anything server-side.
What about a program that reads input and prints output?
That is the other page too. Console programs using readline or process.stdin — the shape interview questions and exercise sites use — belong at /compiler/javascript. This editor is for JavaScript that ends up in a page.
Do ES modules and imports work?
Yes, natively. Import between your own files by relative path, and import npm packages by name through an import map XCODX writes for you. Top-level await works inside modules.
Can I install npm packages without a bundler?
Yes. Anything shipping ES modules resolves through esm.sh and imports by name. Packages that assume a Node build step or CommonJS-only will not work, for the same reason Node itself does not.
Can I see console output without opening devtools?
Yes. Logs, tables, warnings and thrown errors appear beside the running page in the order they were produced. Devtools still work if you prefer them.
Does TypeScript work?
Yes. Rename a .js file to .ts and annotations strip at load. This is a transform rather than a type check — types help while editing and do not gate the preview.
Is it free, and do I need an account?
Free, and no. Open the editor and start writing. Projects live in your own browser rather than on a server, which is also why the whole thing keeps working with no connection.
Is this a good place to learn JavaScript?
Yes for the web half of it — the DOM, events, fetch, modules — because you can see what your code does to a page immediately. For algorithm practice with printed output, the compiler pages linked above are the better fit.
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 the JavaScript editor
Code running in seconds with a console beside it, npm by name, and no account between you and the editor.