HCODXDocumentation
Home / Documentation

HCODX Editor Documentation

Everything you need to use the HCODX online code editor — from opening your first project to mastering the live preview, editing tools, settings and keyboard shortcuts. HCODX runs entirely in your browser: no installation, no account, and your code never leaves your device.

New here?

Jump straight to Quick start to open the editor and build a page in a couple of minutes, then use the sidebar to explore each feature in depth.

Overview #

HCODX is a free, browser-based editor for HTML, CSS and JavaScript with an instant live preview. It pairs a professional code editor (built on Ace) with multi-file projects, a responsive tester, code formatting, minification, obfuscation and validation — plus a companion Color System for palettes and design tokens.

100% in your browser

All editing, preview and processing run locally. Nothing is uploaded.

No signup

Open the editor and start immediately. Projects save to your device.

Multi-file projects

Folders, tabs, project-wide search and one-click ZIP export.

Installable PWA

Install HCODX and keep coding offline after the first visit.

Quick start #

Open hcodx.com/editor. The launcher screen offers several ways to begin:

  • New Project — start from a blank workspace.
  • Quick Start — open a ready-made HTML + CSS + JS starter template.
  • Saved / Import Project — reopen a project you saved earlier, or import files, a folder, or a .zip.
  • Templates — pick from pre-built project templates.

Choose one and the editor loads. If your project contains an index.html, HCODX opens it automatically; otherwise it opens the first HTML file it finds.

Where projects are stored

Projects live in your browser (IndexedDB / localStorage) on this device. To move a project to another device or back it up, use Export as ZIP.

Your first page #

With a project open, type into index.html and watch the preview update as you go. Here's a complete starter page:

index.html
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>My First Page</title>
  <link rel="stylesheet" href="style.css">
</head>
<body>
  <h1>Hello, HCODX</h1>
  <button id="btn">Click me</button>
  <script src="script.js"></script>
</body>
</html>

Add a style.css and script.js file (see File explorer) and link them as above:

style.css
body { font-family: system-ui, sans-serif; padding: 2rem; }
button { padding: .6rem 1.2rem; border: 0; border-radius: 8px;
         background: #2a5cf6; color: #fff; cursor: pointer; }
script.js
document.getElementById('btn').addEventListener('click', () => {
  alert('It works!');
});

Save with Ctrl+S whenever you like. When you're done, export the project as a ZIP.

Tabs & breadcrumbs #

Open files appear as tabs above the editor. A dot on a tab means unsaved changes. Below the tabs, the breadcrumb shows the path to the current file (Project ▸ folder ▸ file) — click the file name to refocus the editor.

Status bar & console #

The status bar along the bottom shows the language, encoding, cursor position (line/column), indentation, auto-save state and a Go to Line control.

The integrated console captures console.log, warnings and errors from your running preview so you can debug without leaving the editor. Filter messages by type or with a text filter, and clear it anytime.

File explorer #

The Files panel is your project tree. From its toolbar (or the right-click menu) you can:

  • New file and New folder — create items in the selected folder.
  • Rename / Delete — manage existing items.
  • Drag & drop — move files between folders, or drop files from your computer to import them.
  • Collapse all and Refresh — tidy or re-scan the tree.

Create style.css and script.js here, then link them from your HTML as shown in Your first page.

Projects & multi-file #

A project is a folder tree of HTML, CSS, JavaScript and asset files. HCODX resolves relative links between files (for example <link href="css/style.css"> or <img src="images/logo.png">), so multi-page sites and templates render correctly in the preview.

Entry page

The preview renders the project's entry page — index.html when present, otherwise the first HTML file. Open any other HTML file and use the preview to render it.

Import & export #

Import

  • Files — add individual .html, .css, .js and asset files.
  • Folder — import an entire project folder, preserving its structure.
  • ZIP — drop a .zip and HCODX unpacks the whole project.

Import is faithful: every file and folder is brought in exactly as-is (including vendor/, libraries and assets) so nothing your project depends on is dropped.

Export

Use the Export toolbar button (or File ▸ Export as ZIP) to download the complete project as a .zip — the same files and folders you see in the tree, ready to host or share.

Auto-save & recent projects #

Your work is stored locally in the browser. Auto-save is off by default (for performance); enable it and choose a frequency in Settings ▸ Auto-save Frequency. With auto-save off, save manually with Ctrl+S.

Recently opened projects appear on the launcher's Saved / Import Project screen — pick one to reopen it exactly where you left off.

Browser data

Because projects live in this browser, clearing site data — or using Clear All Data — removes them. Export anything important as a ZIP first.

Preview & split view #

The live preview renders your project and updates as you type. You can view it three ways:

  • Inline — the preview replaces the editor area (toggle with the Preview button or Alt+P).
  • Split view — code and preview side by side (the Split button).
  • New tab — open the rendered page in a separate browser tab (the Run button).

Responsive design tester #

Open the Responsive Design Tester (the Responsive toolbar button) to preview your page at common device widths — mobile, tablet and desktop — inside a device frame. Switch presets or set a custom width and height to check breakpoints without resizing your browser.

How the preview works #

HCODX renders your project through an isolated preview service at preview.hcodx.com. Your files are sent only to that sandbox to be displayed back to you; they are not stored. The preview refreshes automatically as you edit, and recovers on its own if it ever comes up blank.

Heavy pages

Templates that load large assets or external libraries may take a moment to render — the preview waits for the page to finish instead of interrupting it.

The code editor #

The editor is built on Ace and includes syntax highlighting for HTML, CSS and JavaScript, code folding, bracket matching, multiple cursors and line numbers. It supports the usual editing gestures — undo/redo, block indent, comment toggling and more (see Keyboard shortcuts).

Autocomplete & Emmet #

Autocomplete suggests tags, properties and identifiers as you type. Emmet lets you expand short abbreviations into full markup — type an abbreviation and press Tab:

Emmet abbreviation → result
ul>li*3     →   <ul>
                  <li></li>
                  <li></li>
                  <li></li>
                </ul>

Enable Emmet and autocomplete in Settings (they can be toggled independently in the Editor Settings and Ace Editor Settings dialogs).

Find, replace & multiple cursors #

  • Find in the current file with Ctrl+F, replace with Ctrl+H.
  • Search across the project from the Search panel in the sidebar.
  • Multiple cursors: Ctrl+D selects the next occurrence of the current word so you can edit them together.
  • Go to line with Ctrl+G.

Command palette & quick open #

Press Ctrl+Shift+P to open the command palette and run any command by name. Press Ctrl+P for quick open to jump to any file in the project by typing part of its name.

Keymaps #

Prefer Vim or Emacs? In the Ace Editor Settings dialog you can switch the keymap between Default, Vim, Emacs and Sublime Text.

Select-all still works

Even with Vim or Emacs active, Ctrl+A continues to select all while the editor is focused.

Format & minify #

  • Format (Ctrl+Shift+F) — clean up and re-indent HTML, CSS and JavaScript with Prettier.
  • Minify (Ctrl+Shift+M) — compress the current file for production.

You can also turn on Format on save in Settings to format automatically every time you save.

Obfuscate & validate #

  • JavaScript obfuscator — transform your JS to make it harder to read while keeping it functional.
  • HTML validator — check your markup and see errors, warnings and hints in the validation panel. Turn on Auto Validate HTML in Settings to validate as you type.

Color System #

The companion Color System is a full palette generator and design-token workspace: a color picker (HEX/RGB/HSL/LAB/CMYK), harmony schemes, a mixer, gradient generator, shades & tints, WCAG AA/AAA contrast checking, a color-blindness simulator, image-based palette extraction, and export to CSS or JSON. Design a palette there and paste the tokens straight into your project's CSS.

Settings #

HCODX has two settings dialogs. Both are reachable from the toolbar and the menus.

Editor Settings

General editor behavior: theme (dark/light), code font size, tab indentation, auto complete, auto-validate HTML, format on save, auto-save frequency and a performance mode.

Ace Editor Settings

Fine-grained editor options: color theme, font family and font size, keymap (Default/Vim/Emacs/Sublime), tab size, word wrap and Emmet. Font size stays in sync with the Editor Settings dialog.

Clear All Data

The Clear All Data action wipes every project, setting and cache stored for HCODX in this browser and resets the editor to a clean state.

This cannot be undone

Clear All Data permanently deletes your saved projects on this device. Export anything you want to keep as a ZIP first.

Keyboard shortcuts #

On macOS use Cmd where Ctrl is shown.

ActionShortcut
Save fileCtrl+S
New fileCtrl+N
Toggle live previewAlt+P
Format code (Prettier)Ctrl+Shift+F
Minify codeCtrl+Shift+M
Command paletteCtrl+Shift+P
Quick open (go to file)Ctrl+P
Go to lineCtrl+G
Find / ReplaceCtrl+F / Ctrl+H
Select allCtrl+A
Select next occurrenceCtrl+D
Undo / RedoCtrl+Z / Ctrl+Y
Toggle commentCtrl+/
Expand Emmet abbreviationTab
FullscreenF11
All shortcutsF1

Help & troubleshooting #

The preview is blank

Make sure the project has an HTML file open (ideally index.html) and that your markup is valid. Click the Preview button to refresh it. Heavy pages that pull large external assets can take a few seconds to render.

My imported template looks broken

Check that the template's relative paths match your file tree (e.g. css/, js/, images/, vendor/). HCODX imports every file, so if something is missing it wasn't in the archive you imported. Re-import the original folder or ZIP.

My changes weren't saved after I closed the tab

Auto-save is off by default. Either save with Ctrl+S or enable auto-save in Settings. To keep a copy outside the browser, export as ZIP.

Ctrl+A (or other shortcuts) behaves oddly

If you switched the keymap to Vim or Emacs, some keys follow that keymap's conventions. Select-all (Ctrl+A) still works; to restore all defaults, set the keymap back to Default in the Ace Editor Settings.

My chosen editor font didn't change

Pick a font from the Ace Editor Settings ▸ Font family list — the bundled coding fonts (Fira Code, JetBrains Mono, Source Code Pro, IBM Plex Mono) load on demand the first time you select them.

Does it work offline?

Yes — install HCODX as a PWA and the editor works offline after the first load. The live preview service and initial web-font downloads need a connection.

Frequently asked questions #

  • Is HCODX free? Yes — 100% free, no signup, no paid tier.
  • Is my code private? Yes — editing and processing happen in your browser; nothing is uploaded or stored on a server.
  • Can I use multi-file projects? Yes — folders, tabs, project-wide search and ZIP import/export.
  • Which languages? HTML, CSS and JavaScript, with a live preview of the rendered page.
  • Can I install it? Yes — it's a Progressive Web App and works offline after the first visit.
Ready to build?

Open the HCODX editor and start a project — everything in this guide is one click away.