html.landing Open editor

web/html

Online HTML Editor & IDE with Instant Live Preview

Write, edit, run, preview and share HTML projects instantly in a browser development environment with live preview, multi-file editing, CSS, JavaScript and npm support.

Open the HTML editor How the preview works
previewlive, no reload
filesmulti-file
accountnot required
installnone
index.htmlstyles.cssapp.js
<!DOCTYPE html>
<html lang="en">
<head>
  <link rel="stylesheet" href="styles.css">
</head>
<body>
  <main class="card">Hello</main>
  <script src="app.js" type="module"></script>
</body>
</html>
live

01 platform

What most online HTML editors leave out

A three-pane editor with HTML, CSS and JS boxes is fine for a snippet. It stops being fine the moment a project has a second page, an image, or a package.

  • Real files, not three panes

    index.html, styles.css, app.js and anything else you need, in folders, with relative paths that resolve exactly as they would on a server.

  • A live preview with no reload button

    The preview updates as you type. There is no Run button to press, and no full page reload throwing away scroll position or form state.

  • npm without a build step

    Import a package by name and XCODX resolves it through esm.sh into a native import map, so <script type="module"> can import from npm with no bundler in front of it.

  • No account between you and the editor

    Open the tab and write. Projects live in your own browser rather than on a server, which is also why the whole thing keeps working with no connection.

02 deep dive

How the live preview actually works

Most of what makes a browser editor pleasant or infuriating is the preview, and the differences are not cosmetic.

It updates without a reload. Changing a stylesheet repaints the page in place, so the element you were inspecting stays where it was and any state in the page survives.

Relative paths resolve properly. ./assets/logo.svg and ../styles/base.css work because the preview serves a real directory rather than concatenating three text areas into one document.

It is a real browsing context. fetch, localStorage, media queries, <dialog>, view transitions — anything the browser can do, the preview can do, because the preview *is* the browser.

You choose where it sits. Full width while you focus, split beside the code, inside device frames for responsive work, or popped into its own tab on a second monitor.

update
no reload
paths
real directories
apis
full browser
placement
four modes
index.html
<img src="./assets/logo.svg" alt="">
<link rel="stylesheet" href="../styles/base.css">

<script type="module">
  import confetti from 'canvas-confetti'
  confetti()
</script>

03 features

What ships with an HTML project

Everything below is active the moment the editor opens. There is no plugin to choose and no configuration file to write.

  • Emmet abbreviations

    ul>li*5 expands the way it does in VS Code, because the editor core is the same Monaco engine.

  • Autocomplete for tags and attributes

    Elements, attributes and their allowed values, plus CSS properties with their valid keywords.

  • SCSS, Sass and Less

    Preprocessors compile in the browser through Dart Sass, so styles.scss works without a watcher.

  • TypeScript alongside JavaScript

    Rename a .js file to .ts and annotations strip at load. No build configuration appears.

  • Device frames for responsive work

    Preview inside real device dimensions rather than guessing from a resized window.

  • 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 a rendered page

No project to scaffold, no server to start, no build to configure. This is the whole loop.

session
  • new project → HTML
  • index.html, styles.css, app.js
  • type → <main class="card">
  • preview repainted · no reload
  • npm i canvas-confetti
  • import map updated · importable by name

  • Nothing sits between typing and seeing

    No bundler, no dev server, no watcher. The preview is a browsing context the editor writes into directly.

  • Packages need no build step

    esm.sh and a native import map mean a <script type="module"> can import from npm without anything compiling it first.

  • It works with no connection

    XCODX installs as a Progressive Web App, so editing and previewing keep working offline once the tab has loaded.

05 ecosystem

A page that mixes 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

06 languages

Every language 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

07 questions

HTML on XCODX — common questions

The questions that decide whether this fits your work.

Do I need an account to use the HTML editor?

No. Open the editor and start writing — there is no signup wall, no email verification and no trial. Projects are stored in your own browser rather than on a server, which is what makes that possible.

How is this different from CodePen or the W3Schools Tryit editor?

Those are excellent at what they do: a snippet in three panes with instant output. This starts the same way but keeps going — real files in folders, images and fonts you can reference, npm packages and Git — so a snippet can become a site without moving somewhere else.

Does the preview reload the whole page on every keystroke?

No. Style and markup changes repaint in place, so scroll position and page state survive. That matters as soon as you are working on something below the fold or inside an open dialog.

Can I use images, fonts and other assets?

Yes. Upload them into the project and reference them with ordinary relative paths. The preview serves a real directory, so ./assets/logo.svg resolves exactly as it would on a server.

Can I use a CSS framework like Tailwind or Bootstrap?

Yes, from the npm panel or by linking a CDN stylesheet. Both work, because the preview is a real browsing context rather than a sanitised subset of one.

Does JavaScript run, including modules and fetch?

Fully. <script type="module">, dynamic imports, fetch, localStorage and the rest of the platform behave normally, because the preview is the browser rather than an emulation of it.

Can I share what I build?

Yes, by link, or export the whole project as a zip with its folder structure intact. There is no proprietary format in between, so what leaves is ordinary HTML, CSS and JavaScript.

Is it a good place to learn HTML?

Yes, and the absence of setup is why. A beginner's first hour usually disappears into installing an editor and working out where to save a file. Here the first thing you do is write a tag and watch it render.

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 HTML editor now

A page rendering in seconds, with live preview and real files, and no account between you and the editor.

Open the HTML editor Read the docs