html-sandbox.landing Open editor

html/sandbox

Build Complete HTML Projects in Your Browser

Develop multi-file HTML applications with folders, assets, CSS, JavaScript and a professional online workspace — the point where a page stops being a snippet and becomes a site.

Open the workspace See asset handling
filesfolders + assets
pagesmany, linked
packagesnpm panel
vcsisomorphic-git
project
index.html
about.html
assets/
  logo.svg  hero.webp  Inter.woff2
styles/
  base.css  layout.css
scripts/
  nav.js  form.js
19 files

01 platform

Where a page stops being a snippet

Four thresholds turn a page into a site, and a three-pane editor cannot cross any of them. This is what a real workspace is for.

  • The second page

    index.html and about.html need a link between them that actually navigates. A single-document editor has nowhere for the second file to go.

  • The first real asset

    A logo, a hero image, a self-hosted font. Referencing them means a directory and relative paths that resolve — which a concatenated preview cannot provide.

  • The stylesheet you split

    One styles.css becomes base.css and layout.css around the two-hundredth line. @import and multiple <link> tags both need real files.

  • The thing you want to keep

    A snippet is disposable. A site has a history worth committing, a version worth branching and a copy worth pushing to GitHub.

02 deep dive

Images, fonts and paths that resolve

Assets are the first thing that breaks in a snippet editor and the first thing a real workspace has to get right.

Relative paths work because there is a real directory. ./assets/logo.svg from index.html and ../assets/logo.svg from pages/about.html both resolve, exactly as they would on a server.

Self-hosted fonts load. Drop a .woff2 into the project, @font-face it, and the preview uses it — which is the only way to check how a face actually sets before committing to it.

Images keep their dimensions. Testing a layout against real artwork rather than a gray placeholder is the difference between a design that survives contact with content and one that does not.

Everything travels together. Export the project as a zip and the assets go with it, with the folder structure intact and every path still pointing where it did.

paths
real, relative
fonts
self-hosted woff2
images
svg, webp, png
export
zip, structure intact
base.css
@font-face {
  font-family: 'Inter';
  src: url('../assets/Inter.woff2') format('woff2');
  font-display: swap;
}

03 workflow

From one page to a committed site

No scaffold, no dependency install, no server. This is the whole thing, start to first commit.

session
  • new project → HTML
  • index.html, styles.css, app.js
  • new file → about.html
  • upload → assets/hero.webp
  • referenced from 2 documents
  • git init && git commit -m "site"
  • [main c41d8b7] site · 19 files

  • Uploading an asset is part of the project

    Images and fonts live in the tree beside the markup that references them, so exporting or committing takes them along.

  • The repository is real Git

    Commits, branches and history through isomorphic-git, working offline and pushing to GitHub when you want.

  • It survives the tab closing

    Projects, assets and history live in your browser's storage, so reopening is instant and needs no connection.

04 features

What the workspace gives a web project

The tools below are the ones a multi-page site leans on once it is past a single document.

  • A real file tree

    Create, rename, move, nest and delete. Folders behave like folders, and moving a file updates nothing you did not ask it to.

  • Find and replace across files

    Search every document at once with regular expressions — the only sane way to rename a class used on nine pages.

  • An npm panel

    Import a library by name into a type="module" script. The import map is written for you and travels with the project.

  • Real Git

    Stage, commit, branch, diff and read history. Import a repository from GitHub and keep working against it.

  • Asset management

    Upload images and fonts into the tree and reference them with ordinary paths. They export and commit with everything else.

  • An integrated terminal

    A shell surface over your project files, for when typing is faster than clicking through a tree.

  • Per-project file history

    Restore points and auto-save, so an edit that went wrong is a click back rather than a rewrite.

  • Everything on the device

    Projects are stored locally and work with no connection. Nothing is uploaded to a server.

05 pipeline

How a site grows here

Four stages, none needing a machine you have configured — the argument for a browser workspace over a local one for anything you did not start.

  1. One document

    index.html with a stylesheet and a script. Where a snippet editor would also be adequate, and where most projects stop being adequate a day later.

  2. Pages and assets

    A second document, a shared header, images and fonts in assets/. Relative paths start mattering, and a real directory is what makes them work.

  3. Structure and packages

    Split the stylesheet, add a module or two, pull in a library from npm. The tree becomes something you navigate rather than scroll.

  4. Commit and hand over

    Commit the history, then push to GitHub or export a zip. What leaves is ordinary HTML, CSS and JavaScript with its folder structure intact.

06 ecosystem

A site that mixes several languages

A plain .html file can sit beside a React component and a Python script; XCODX picks the right handling per file rather than per project.

  • 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

Every language the editor supports

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

The HTML sandbox — common questions

Questions about using this as a working environment.

Can I build a multi-page site here?

Yes. Create as many documents as you need, link between them, and the preview navigates properly. A three-pane snippet editor cannot do this because there is no second document for a link to point at.

Can I upload images and fonts?

Yes, into the project tree. Reference them with ordinary relative paths and they resolve in the preview, export inside the zip and commit with everything else.

Do relative paths work the way they would on a server?

Yes, because the preview serves a real directory. ./assets/logo.svg from the root and ../assets/logo.svg from a subfolder both resolve exactly as they would in production.

Can I use npm packages in plain HTML?

Yes. Install from the npm panel and import by name inside a <script type="module">. XCODX writes a native import map, so no bundler is involved.

Is the Git real?

Yes — genuine Git objects through isomorphic-git. Stage, commit, branch, read history, import a repository from GitHub and push back when you are done.

Is the terminal real, or a mock?

It is a working shell surface over your project files. There is no Node process behind it, so it covers file and project operations rather than arbitrary commands.

How big a project can it hold?

Comfortably a real static site — dozens of pages, stylesheets, scripts and assets. The limit is your browser's storage quota, not a plan tier.

Can I get the site out to host it somewhere?

Yes. Export a zip with the folder structure intact and upload it to any static host, or push to GitHub and deploy from there. It is ordinary source with no proprietary format in the way.

What happens if I clear my browser data?

The project goes with it, the same way deleting a folder removes a local one. That is the trade for storing nothing on a server, so commit and push 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 preview and the same tooling 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 web project workspace

A file tree, real assets and version control in under a minute, on whatever machine you happen to be sitting at.

Open the workspace Read the docs