CodX Editor Logo
CodX Editor Guide

Learn the editor without digging through menus.

CodX Editor is a browser coding workspace for building web projects. This guide explains the main tools in plain language: writing code, managing project files, previewing your work, sharing projects, and working with friends.

Code editing Live preview Publishing Collaboration GitHub Node.js Shortcuts
A person learning from an online guide.

Getting Started

The editor opens after you accept the site terms. From there, you can start typing, add more files, preview the result, save your work in the browser, or export a copy to your computer.

  • Write code. The editor opens with a small starter project. Type in the main pane and the preview follows along. Indent guides mark each nesting level so blocks stay readable.
  • Add files. Use New File in the file toolbar. HTML, CSS, JavaScript, JSON, text, environment files and media are all supported.
  • See the result. Auto-Run refreshes the preview as you type. Switch it off and use Run to refresh manually.
  • Fix mistakes. The Console lists errors first, with the file and line, and clicking one jumps to it. Undo and Redo sit above the editor.
  • Keep your work. Save Project stores it in this browser. Export ZIP File downloads a copy, and Import ZIP File brings one back — as a zipped archive or as a plain folder.
  • Share it. Publish Project turns your project into a public link. Connect to GitHub commits it to a repository.
  • Work with others. Collab With Friends opens a live session where several people edit the same project at once.

Where every control lives

Each chip below is the exact wording on the button, grouped by the part of the workspace it sits in. Anything marked desktop is hidden on phones, where the Files, Editor, Preview and Console tabs take over.

Main header

Always visible along the top of the workspace.

Collab With Friends Fullscreen Settings Add Media Help More

More › Project Tools

Everything that creates, stores or moves a whole project.

New Save Project Open Saved Templates Publish Project Published Changes Connect to GitHub Device Transfer Sync Key

More › Editor Extras

Tools that change how you work rather than what you build.

Find & Replace Developer Tools Enable Node.js Fonts Get Icons Zen Mode Homepage

Editor toolbar

Directly above and beside the code pane.

New File Undo Redo Run Export ZIP File Import ZIP File

Preview toolbar

The icon row along the top of the live preview.

Refresh preview Inspect elements Zoom in / out / reset Exit fullscreen

Console & Node.js

Appears under the preview, or as its own tab on phones.

Clear Show Terminal Run Stop Restart server

Every control above is reachable from the header, the More menu, or its own workspace tab, so nothing is hidden behind a keyboard shortcut.

First useful result

A five-minute orientation project

If you are new to the workspace, use this small exercise to understand the complete feedback loop before exploring advanced tools.

Open the starter files

Select index.html, style.css, and script.js in turn. Notice that structure, appearance, and behavior are intentionally separated.

Change one visible thing

Edit the main heading in HTML, change an accent color in CSS, and add a safe console.log() message in JavaScript.

Run and inspect

Use Run or Auto-Run, check the preview, and open the console. If an error appears, click its location and compare the reported line with the highlighted token.

Save a portable copy

Give the browser project a name, then export a ZIP. The saved copy is convenient for the same browser; the ZIP is the backup you can move elsewhere.

Workspace Layout

Top Controls

  • On laptops and desktops, use the Auto-Run and Console toggles from the top bar; phones and portrait tablets replace the Console switch with a full-width Console tab.
  • Open collaboration, fullscreen preview, settings, media upload, and help from the main header.
  • Use the preview code icon to inspect rendered HTML and the magnifying-glass icon to zoom in, zoom out, or reset preview scale.
  • The More menu keeps extra project actions in one place so the editor stays cleaner.
  • The More menu sizes itself to the screen and repositions so it always stays fully visible.
  • The Homepage option returns you to the main site from inside the editor.

Split Workspace

  • The left side contains your files and code editor.
  • The right side shows the live website preview and console output.
  • The divider between the editor and preview can be dragged to resize the workspace.
  • On phones and portrait tablets, use the Files, Editor, Preview, and Console tabs; rotate a tablet to landscape to restore the laptop-style split workspace.
  • The Console tab fills the workspace with diagnostics and captured logs; Preview returns to the rendered webpage.
  • Choosing a file automatically returns to the Editor tab, and enabling Node.js opens the Console tab so its terminal is immediately visible.

Fullscreen Preview

  • Open the preview in fullscreen to check layouts with more space.
  • Exit fullscreen from the browser fullscreen control or the same editor button.
  • Settings can choose whether the complete preview panel and its tools remain visible in fullscreen.

Zen Mode

  • Zen Mode is a laptop and desktop feature; it is removed from mobile menus, settings, and commands where the workspace tabs already provide focused views.
  • Zen Mode hides extra interface pieces so you can focus on code.
  • Entering or leaving Zen Mode preserves the current cursor selection and editor scroll position instead of jumping to the bottom.
  • The Show files in Zen Mode setting controls whether the file explorer remains visible.
  • When files remain visible, Zen Mode places them in a vertically scrolling column beside the code editor instead of a horizontal tab strip.
  • Use the exit button or press Esc to leave Zen Mode.

More Menu

  • Project Tools contains New, Save Project, Open Saved, Templates, Publish Project, and Connect to GitHub.
  • Editor Extras contains Find & Replace, Developer Tools, Enable Node.js, Fonts, Get Icons, Zen Mode, and Homepage on laptops and desktops.
  • Get Icons loads every free Font Awesome 6.5.2 solid, regular, and brand icon, shows the cdnjs setup link, and copies ready-to-use HTML. On phones it uses compact two-column cards, scaled controls, and a full-height scrolling catalog.
  • The menu closes after an action, when you click outside it, or when you press Esc.

Editing Tools

Code Editor

  • Write HTML, CSS, JavaScript, JSON, environment files, and Node backend files such as .mjs, .cjs, and TypeScript-family files.
  • Line numbers, syntax colors, and inline error highlights help you stay oriented.
  • Line numbers use the editor's actual font size, line height, and vertical padding, so every number stays aligned with its code row on laptops, tablets, and phones while scrolling.
  • Large File Performance Mode: very large files automatically use native text rendering, virtualized line numbers, deferred diagnostics, and native undo history. This prevents full-document highlighting and history copies from running on every keystroke. Syntax colors return automatically for files below the large-file threshold.
  • Large File Performance Mode pauses Auto-Run, live suggestions, and project-learning scans so multi-megabyte preview or ranking work cannot interrupt typing. Press Run when you want to refresh the preview. Pasting a long single line or minified file keeps syntax colors visible through a lightweight highlighter that follows the editor viewport, while collaboration updates remain coalesced.
  • CSS and JavaScript inside HTML blocks receive their own highlighting, while JSON keys, Node globals, and environment keys use dedicated colors.
  • Tabs insert four spaces for tidy indentation.
  • During collaboration, every host, co-host, and participant gets a participant-colored text caret at their live typing position.

Smart Suggestions

  • Suggestions appear for HTML tags, attributes, CSS properties, CSS values, JavaScript terms, and project file paths.
  • Project-aware priority: valid JavaScript variables, functions, parameters, imports, and classes are read from the current source and ranked above generic entries. JavaScript can also suggest current HTML IDs/classes and CSS selectors/custom properties. Old or deleted values disappear instead of being kept as learned history.
  • Partial HTML tag names remain in tag-suggestion mode until whitespace begins the attribute area. For example, typing <if suggests <iframe>, while JavaScript if still suggests the full conditional snippet.
  • Suggestion rows use icons instead of emoji or text abbreviations. HTML, CSS, JavaScript, ENV, TXT, JSON, media, and other project paths display the icon that matches their type.
  • Press Enter or Tab to accept a suggestion.
  • Accepting the JavaScript function suggestion inserts function () { ... } with an indented body and places the caret between the parameter parentheses.
  • Typing lorem inserts a full placeholder paragraph.
  • Path suggestions help when typing links, scripts, stylesheets, and media sources.
  • CSS selector suggestions inside an HTML <style> block indent properties one level deeper and keep the closing brace aligned with the opening selector.
  • Accepting the style tag inserts and displays exactly <style></style> with no placeholder space. Press Enter between the tags to create an indented blank CSS line while keeping both tags aligned.

Fast HTML Helpers

  • Type cxstart in an empty HTML file and press Enter to insert a starter page structure.
  • Use Emmet-style abbreviations such as div>ul>li*3, then press Tab to expand them. The caret is placed inside the generated tag, or inside the first editable child when the abbreviation is nested.
  • Brackets, quotes, braces, and common tag patterns are completed for you while typing.
  • In JavaScript, typing ( immediately before an existing expression wraps it automatically. For example, console.log|isStudent becomes console.log(|isStudent), keeping the caret inside the completed call.
  • Inside a standard or type="module" HTML <script> block, suggestions, declared identifiers, bracket pairing, indentation, syntax colors, diagnostics, and formatting work the same way they do in an external .js file.
  • Non-executable blocks such as type="application/json" and type="importmap", plus script tags that use src, are not incorrectly treated as inline JavaScript.

Icon Catalogue

  • More → Get Icons opens the Font Awesome catalogue so you can search icons by name and filter by style.
  • Selecting an icon copies its markup, ready to paste into your HTML.
  • A copy button provides the stylesheet link the icons need. Add it to the <head> of your page or they will not appear.

Inline Value Editor

  • Click a number in your CSS or JavaScript and a small control appears above it with plus and minus buttons.
  • Adjusting the value updates the code and the preview together, which is quicker than retyping a size or spacing repeatedly.
  • Colour values open a colour picker in the same way, so you can choose a shade visually instead of guessing a hex code.

Undo & Redo

  • The toolbar has dedicated Undo and Redo buttons for editor changes.
  • Keyboard undo and redo shortcuts also work inside the editor.

Error Guidance

  • CodX Editor checks common HTML, CSS, JavaScript, and inline script issues.
  • HTML and SVG diagnostics use a stateful tag-and-attribute parser instead of splitting markup with regular expressions. They understand self-closing tags, multiple elements on one line, quoted special characters, custom or SVG element names, and valid optional closing tags.
  • Quoted attribute values stay intact, including negative numbers, decimals, data URLs, and SVG path data. Only parsed attribute names are compared when checking for duplicates.
  • CSS diagnostics track strings, comments, braces, parentheses, and brackets, so decimals, negative values, custom properties, and embedded SVG text are not mistaken for syntax errors.
  • Error badges can appear beside affected files.
  • Click an error badge to jump toward the first detected problem.
  • The console also catches logs, warnings, runtime errors, and promise failures from the preview.
  • Code and preview errors stay in the Console with their file badges and editor highlights; they do not create a second popup notification every time an error occurs.
  • JavaScript syntax is validated by the Acorn parser. Valid regex literals, templates, decimals, division, and modern module syntax are accepted; genuine parser errors report an exact line and column.
  • Click a located console diagnostic to open the correct file at the exact problem.
  • Large error counts are shortened so file badges stay readable.

Guided Tour

  • The built-in tour explains the main controls step by step.
  • Each step uses a custom animated pointer to demonstrate the highlighted tool without clicking it or changing your project.
  • Use Back, Next, Finish, or Close to move through the available steps.

Projects & Files

File Explorer

  • Create project files for markup, styling, scripts, environment settings, and plain-text notes using .txt files.
  • Supported editable extensions are .html, .htm, .css, .scss, .less, .js, .mjs, .cjs, .jsx, .ts, .tsx, .json, .jsonc, .env, .md, and .txt.
  • TXT files open as plain text, use a dedicated document icon, and are included when importing or exporting ZIP projects.
  • If the project has unsaved changes, New File offers Save & Create, Create Without Saving, and Cancel.
  • Switch between files from the explorer.
  • Rename or delete files when your project structure changes.
  • Duplicate file names are blocked where the editor needs unique names.
  • File names cannot contain spaces. Spaces are automatically replaced with dashes; dashes and underscores are supported.
  • Older saved, imported, or collaborative projects are migrated to the same filename rule and matching project references are updated.
  • The file list can show file-level error status and team focus indicators.

Saving

  • The first time you save a project inside your browser, CodX Editor asks for a custom project name.
  • After that project has been saved or reopened from Saved Projects, choosing More → Save Project updates it immediately under the same name without showing the naming dialog again.
  • Open or delete saved projects from the project library. The browser library keeps up to 24 projects.
  • More → Device Transfer securely moves your current workspace, saved-project library, media, complete Editor Settings, and workspace preferences between laptops, tablets, and phones. Workspace preferences include Auto-Run, console visibility, preview device and zoom, layout grid, breakpoint indicator, and preview color scheme.
  • On the sending device, choose Send. You get a 12-character code, a link, and a QR code, along with a countdown showing how long they remain valid.
  • On the receiving device, choose Enter transfer code and type the code into the three boxes, for example A1B2-C3D4-E5F6. You can also scan the QR code with the camera, select a saved QR image, or open the link.
  • The code lasts ten minutes and works once. It stops working the moment a transfer completes.
  • Before importing, the receiving device shows you what is included so you can check it first.
  • Before importing, use the Replace current editor toggle. Leave it on to open the transferred workspace, or turn it off to keep the files and unsaved code currently open. Keep mode still imports saved projects and settings, and stores the incoming active workspace in Saved Projects under a unique transferred name so its code is not lost.
  • Device Transfer merges saved projects instead of blindly replacing the whole library. When project names match, CodX Editor keeps whichever copy was updated most recently. GitHub credentials, collaboration identity, and administrator data are never included. Leave any live collaboration session before receiving a transfer.
  • Device Transfer can carry up to 12 MB of combined project media. If large or unavailable media is skipped, the transfer screen tells you; use ZIP export for projects with larger videos or audio.
  • Saved Projects includes ZIP All Projects, which asks for an archive name and downloads every saved project in its own folder, plus Import All Projects, which restores project folders from a library ZIP. Matching project names are replaced.
  • Saved Projects and Starter Templates open directly from their separate More-menu controls; the old switching buttons are not shown inside either modal.
  • If the current project has unsaved changes, opening another saved project shows Save & Open, Discard & Open, and Cancel choices.
  • The New project control shows Save & Start New, Discard & Start New, and Cancel when the current project is unsaved.
  • Autosave keeps a recovery draft while you work and can offer to restore it after a reload for up to seven days.
  • The project status badge tells you whether the current work is saved or unsaved.

Starter Templates

  • Choose from eight art-directed concepts: Signal Room product launch, Studio Ledger portfolio, Project Concierge intake form, Pulseboard analytics workspace, Nocturne event experience, Atelier Market concept store, Canvas Desk draggable creative workspace, and Loop Lab browser rhythm machine.
  • Every concept has its own visual system and responsive layout rather than reusing a generic starter structure.
  • The included JavaScript provides working interactions such as live demonstrations, filters, multi-step validation, animated data ranges, countdowns, accordions, a cart drawer, draggable windows, and Web Audio sequencing.
  • Search by concept or feature and filter the gallery by Websites, Apps, Portfolios, or Commerce.
  • Open a sandboxed live preview before using a concept, then switch the preview among desktop, tablet, and phone widths.
  • Unique visual previews, categories, feature highlights, and interaction labels make each concept easy to evaluate before opening it.
  • If you have unsaved work, the editor asks before replacing your current project.
  • Apply a template when you want to replace the current project with a coordinated frontend starter.

Sync Key

  • More → Sync Key keeps one saved project up to date across several devices, rather than moving everything once the way Device Transfer does.
  • The project must be saved first. If it has not been named yet, you are asked for a name before the key is created.
  • The project is encrypted in your browser before it is uploaded, so the key is what unlocks it. Keep it somewhere safe; without it the copy cannot be read.
  • Enter the same key on another device to pull the project down, and use it again later to push changes back.
  • If the same project is edited in two places, the editor tells you there is a conflict and asks which version to keep instead of overwriting silently.

Import & Export

  • Export ZIP File opens two large choice cards styled like Create and Join Collaboration.
  • Choose Export ZIP File to create the full project as a new archive and select its name.
  • Choose Update ZIP File, read the selection instructions, and select an existing .zip archive from your device.
  • Updating replaces files whose paths match the current project, adds new project files, and preserves other entries already in the archive.
  • Supported browsers save directly back to the selected ZIP after confirmation. Other browsers download an updated copy with the same file name so you can replace the old copy yourself.
  • Import a ZIP archive to load supported project files, including images, audio, and video.
  • For a full browser-library backup, use ZIP All Projects and Import All Projects inside Saved Projects. The bulk archive keeps each project in a separate folder and preserves its name, active file, and preview target.
  • If every imported file is wrapped in the same outer folder, CodX Editor removes that folder name. For example, my-project/index.html appears as index.html, while meaningful inner paths such as css/style.css remain intact.
  • Large ZIP imports are decompressed in small batches, rendered efficiently, and autosaved when the browser is idle. In very large projects, automatic diagnostics prioritize the active and preview files to keep the editor responsive.
  • Drag anywhere over the workspace to reveal the import target. Drop one ZIP or one folder to open it as the current project, or drop multiple regular files to add them to the project already open.
  • Dropped files can include supported source files, text documents, images, audio, and video. Folder paths are kept where they are meaningful, and media opens in the same viewer used by the media button.
  • Drop a ZIP by itself. If a ZIP is mixed with other files, the editor asks you to separate them so it is clear whether the current project should be replaced or extended.

Media Files

  • Add images, videos, and audio to your project from the media button.
  • Selecting an added media file opens a visual image, video, or audio player inside the editor instead of exposing its data URL as editable code.
  • Media is kept as binary browser data and opened through a lightweight object URL, avoiding the large base64 copies that can exhaust memory when opening a video.
  • Media up to 4 MB can be encoded for live collaboration. Larger media stays local to your browser so it cannot destabilize the session.
  • Direct publishing can prepare up to 12 MB of local media on demand. Use ZIP export for projects containing larger videos.
  • Developer media information is available only through the Media Source button in Developer Tools. It is read-only; large binary payloads stay hidden for memory safety. Click Media Source again, Reset Tools, or reload to return to the viewer.
  • Switching back to an HTML, CSS, JavaScript, ENV, TXT, or other text file restores the normal code editor.
  • The preview rewrites local media references so playback and image display work inside the browser preview.

Fresh Project

  • Start a clean starter project from the More menu.
  • If your current work is unsaved, CodX Editor gives you a chance to save before clearing the workspace.

GitHub Repositories

Connect with GitHub OAuth from More. CodX Editor protects the connection in an encrypted, HTTP-only session cookie and opens a repository workspace after you sign in.

Connect & Browse

  • Choose Connect to GitHub and complete the normal GitHub account authorization screen.
  • After connecting, click the GitHub button again to search repositories you can access.
  • Public/private status, default branch, write access, and repository descriptions are shown on repository cards.
  • The connection survives page refreshes and normal server deployments for up to seven days. Use Disconnect when you want to remove the CodX Editor session.

Repository Files

  • Choose Update files to load the selected branch's existing file tree.
  • Use the refresh icon to reload the current branch without closing the repository window.
  • Click an existing text file to load and edit its contents.
  • Binary files can be replaced through Upload file but are not opened in the text editor.

Create & Upload

  • Create file adds a new path and text content to the pending changes list.
  • Upload file shows checkboxes for the current CodX Editor project so you can choose exactly which files to stage, or you can select one or more files from your device. Private-looking files such as .env start unchecked.
  • Created, edited, and uploaded files can be reviewed or removed before committing.
  • Spaces in newly created or uploaded names are converted to dashes.

Commit Changes

  • Choose the target branch and stage at least one created, edited, or uploaded file.
  • The commit message and longer description are optional.
  • When the message is blank, CodX Editor uses Update files from CodX Editor.
  • After success, use the commit link to inspect the result on GitHub.
  • Avoid uploading secrets such as .env files.

Node.js Server Workspace

CodX Editor can run a real Node.js server inside your browser tab. Choose Node.js Server from More › Editor Extras and the preview pane becomes a two-tab workspace: a Terminal for commands and a Server tab showing your running site. Node and npm execute in a sandboxed WebContainer on your own machine, never on the CodX Editor hosting server.

Starting Node.js

  • The button sits in More › Editor Extras and turns green with an ON badge while the workspace is active.
  • The editor reloads once the first time you start it, because the browser needs cross-origin isolation to run Node.js. It resumes automatically after the reload.
  • Your project files are copied in, then dependencies install by themselves — you do not need to run npm install first.
  • If your project has no package.json, CodX Editor writes one with a start script pointing at your server file and adds it to your file list.
  • A progress bar reports each stage: booting, copying files, installing, ready.
  • Use a current Chrome or Edge. The runtime needs SharedArrayBuffer, which older browsers do not support.

Running commands

  • Type a command and press Enter or choose Run. Most projects start with npm start.
  • Press ↑ and ↓ to scroll through commands you ran earlier.
  • Commands run through a shell, so &&, pipes, and environment variables all behave normally.
  • One command runs at a time. Choose Stop to end a running server before starting another.
  • Type clear to empty the terminal.
  • Edits you make in the editor sync into the runtime automatically before each command.
  • When a command fails, CodX Editor offers a one-click suggestion such as retrying the install.

Viewing your server

  • The moment your server binds a port, the Server tab unlocks, shows the port number, and switches to it automatically.
  • The address bar shows the live URL, with a copy button beside it.
  • Open in new tab loads the running server in a separate browser tab.
  • The reload button refreshes the server view without restarting the process.
  • This address works inside your current browser only. It is not a real localhost port, so other devices, other browsers, and command-line tools cannot reach it.

Limits and safety

  • Everything runs in your browser. Nothing you run here touches the CodX Editor server, and no hosting secrets are exposed to your code.
  • Native Node addons will not work. Prefer pure JavaScript or WebAssembly-compatible packages.
  • node_modules, .git, dist, and build are skipped when copying files in; npm manages dependencies inside the runtime.
  • Closing or refreshing the tab ends the runtime. Nothing persists between sessions.
  • Choosing the × button stops the server, clears the runtime, and restores the normal webpage preview.

Preview & Console

Live Preview

  • The preview combines your markup, styling, scripts, and media into a working page.
  • The preview header shows the page title when your HTML provides one.
  • The preview can also show a favicon when your project provides one.
  • Internal links can move between pages inside your project.
  • Missing project pages show a friendly fallback instead of breaking the editor.
  • Use the inspect icon, then hover a preview element to see its highlighted HTML structure above that element.
  • Use the magnifying-glass icon to open zoom controls with plus, minus, percentage, and reset actions.
  • Use the refresh icon to rebuild the current preview without changing your project files.

Console Output

  • Open Console from its workspace tab on phones and portrait tablets. On desktop, use the header Console toggle, or Ctrl/Cmd + Shift + C.
  • See logs, warnings, errors, and unhandled promise messages from your preview.
  • Root-cause diagnostics: runtime exceptions are classified as undeclared variables, syntax or bracket problems, missing values, wrong value types, type coercion failures, asynchronous failures, range errors, or general runtime-state problems.
  • Each runtime diagnostic reads the mapped project source around the failing line, explains why the failure most likely occurred, and recommends a fix based on that code instead of repeating the browser message.
  • Expand Original error and full stack trace for the unabridged technical output. Advanced users can retrieve the preserved error object with the command shown inside that section.
  • Rapid repeats of the same exception are grouped into one diagnostic card with a repeat counter, preventing an error loop from flooding or slowing the console.
  • Preview runtime-error notifications show Click To Open; selecting one opens the console, jumps to the reported source location when available, and highlights the error.
  • Smart syntax messages report the actual problematic operator or bracket instead of only showing the token where parsing stopped.
  • Located diagnostics are clickable and jump to the reported line and column.
  • Use Clear to remove old console messages.
  • When Node.js is enabled, this area becomes an interactive command terminal and the normal preview closes.

Linked Project Paths

  • Project links, scripts, stylesheets, media sources, buttons, and forms are handled inside preview where possible.
  • Path suggestions help you choose existing project files while typing source or link attributes.

Debugging Flow

  • Use the file badges to find likely syntax problems.
  • Use the console for runtime behavior after the page runs.
  • Use manual Run when you want to test changes at a specific moment.

Publishing

Publishing turns the current project into a shareable page. You can create a custom link or update a link you already own with its verification key. The publish dialog presents these as large action cards: green for creating a link and blue for updating one.

Create a Link

  • Press Publish Project from the More menu.
  • Choose Create a Link.
  • Type the ending you want for the published link.
  • The empty form displays p/my-custom-link as a preview example without placing it in the typing area.
  • Once you type, the preview changes to show your custom link.
  • Only letters, numbers, and hyphens are accepted for the custom ending. Any space you type becomes a hyphen, so “my custom link” publishes as my-custom-link.

Verification Key

  • After a link is published, CodX Editor shows a verification key.
  • Save that key somewhere safe.
  • The key proves you own the published link when you want to update it later.
  • The success dialog includes a Copy Key button when a key is available.

Update a Link

  • Choose Update a Link from the publish dialog.
  • Enter the custom link ending and the verification key for that link.
  • CodX Editor asks for confirmation before replacing the existing published project.

Sharing Options

  • After publishing, CodX Editor shows the finished custom link.
  • Use Copy Link to copy it to your clipboard.
  • Shortcut buttons help share through WhatsApp, Discord, or Snapchat where the browser and device allow it.

Unique Links

  • Two published projects cannot use the same custom link ending.
  • Case variations are treated as the same link, so names stay clear and predictable.

Published Changes

  • More → Published Changes lets you look at earlier versions of a link you have published. Type the link name, press Next, then enter its verification key.
  • The viewer opens on the version from before your last update. Switch between Before Last Update, Current and Changes along the top.
  • Changes lists the stored versions with the time each was saved and what the update did, such as three files edited and one added.
  • Selecting a row loads that version into the preview so you can check it before deciding anything.
  • Restore republishes the version you selected. The version you replaced is kept, so a restore can itself be undone. Leave As Is closes without changing the public link.
  • Up to ten past versions are kept per link. A link only starts building history from its first update, so a newly published project has none yet.

Published Pages

  • The published page renders your project with linked styles, scripts, and supported media.
  • The browser tab uses the title from your project’s HTML title tag.
  • The server keeps published projects so links remain available after normal reloads.

Settings & Fonts

Editor Settings

  • Change the editor background color.
  • Change the main theme color.
  • Adjust editor text size.
  • Preview settings before applying them.
  • Reset settings back to defaults when needed.
  • Use toggle controls for Tag suggestions, Show files in Zen Mode, Preview panel in fullscreen, and Open code when inspecting. Turning Tag suggestions off hides automatic HTML, CSS, JavaScript, identifier, and file-path menus without disabling bracket pairing or other editor helpers.
  • Open code when inspecting is enabled by default. Turn it off when you want to highlight and examine preview elements without leaving the preview pane.
  • JavaScript automatically pairs single and double quotes, wraps selected code in the chosen quotes, and skips over an existing closing quote.
  • Background and theme color fields open your browser or device's normal color picker instead of a custom modal card.
  • Auto-Run, console visibility, preview device and zoom, preview grid, breakpoint indicator, and preview color scheme are saved as workspace preferences and can move to another device through Device Transfer.

Syntax Highlighter

  • Settings has a Syntax Highlighter list that changes the colours your code is painted in, separately from the workspace theme.
  • Dark schemes: Monokai, Dracula, One Dark, Nord, Tokyo Night, Catppuccin Mocha, Gruvbox and Solarized Dark.
  • Light schemes: GitHub Light and Solarized Light. These suit the Daylight workspace theme.
  • Accessibility schemes: High Contrast for bright rooms or low vision, and Grayscale, which uses brightness rather than colour to tell code apart.
  • Choosing a scheme only repaints colour. Your font family, weight, letter spacing and line height stay exactly as you set them, including a family pasted from Google Fonts.
  • Pick My own scheme to build your own. Give it a name and set thirteen colours: keywords, text in quotes, numbers, comments, HTML tags, tag attributes, function names, CSS properties, CSS selectors, variables, operators, brackets and everything else.
  • The name you type replaces "My own scheme" in the list, so your scheme appears under its own title.
  • Colours repaint as you pick them, so you can judge a choice against real code before saving.
  • Start from default copies the current CodX colours into your pickers, which is an easier starting point than choosing all thirteen from scratch.
  • Your scheme is saved with your other settings and is restored the next time you open the editor.

Workspace Themes

  • Settings offers five themes: CodX Dark, Midnight, Graphite, Forest and Daylight. Daylight is the light one; the rest are dark with different accent colours.
  • Choosing a theme changes the editor background and the accent colour used across buttons, tabs and highlights.
  • You can override the accent with your own colour using the colour picker, which accepts a hex code or lets you pick from the spectrum.
  • A reset button returns the accent to the theme default.
  • Your choice is remembered in this browser and applies the next time you open the editor.

Font Picker

  • Browse system fonts plus the full free, open-source Fontsource catalog.
  • Search every available family by name, category, or style keyword.
  • Font previews load only as they enter view, keeping the picker fast.
  • Click a system font to copy its font-family value, or a catalog font to copy ready-to-use @font-face CSS.

Google Fonts

  • Paste a Google Fonts link or embed snippet into settings.
  • The editor can use that font for the code area after applying settings.
  • After a valid Google Fonts link is detected, customize its weight, italic style, letter spacing, and line height before applying it.
  • Customization never rewrites the Google Fonts field: a pasted link, embed snippet, or @import statement stays in its original format.
  • The settings preview updates so you can inspect the style before applying.
  • This requires internet access because the font is loaded from Google.

Automatic Language

  • CodX Editor detects the visitor’s country and translates visible interface controls into a local language.
  • Local development falls back to the browser language when a public country cannot be detected.
  • Code, filenames, preview content, terminal output, console output, and collaboration messages are never translated.
  • Translations are cached to make later visits faster and reduce API usage.

Private Administration

Authorized administrators can use the private control room to monitor CodX Editor activity and manage live collaboration sessions from a responsive green-and-white dashboard.

Dashboard Overview

  • Use the left sidebar to open the overview, live sessions, published projects, session inspector, activity history, or Help Center.
  • Each administration area opens as its own page, with a dedicated address that can be bookmarked or revisited directly after signing in.
  • Eight live overview cards show numeric editor presence, live rooms, participants, moderation work, socket health, published projects, locked rooms, and server uptime.
  • Presence, socket, session, moderation, room, and publishing changes update the dashboard automatically through the realtime connection.
  • The sidebar stays visible on larger screens and collapses to an icon rail on phones and compact tablets.

Session Management

  • Inspect participant and file details, copy room links or PINs, regenerate links, lock rooms, pause editing, or end a session.
  • Each live-session card includes its room ID, PIN, invite link, host, people inside, active file, files, messages, waiting count, and current room state.
  • Green, amber, and red status treatments separate healthy, warning, and destructive actions clearly.
  • Choose View Everything on a session to open its complete details on the Session Inspector page.

Published Projects

  • Every new published link appears automatically in the dashboard's Latest created links area, with direct Copy, Open Live, and Open in Editor actions.
  • Search every published project by name, link, or file type and review its file count, public URL, page title, and preview availability.
  • Published and last-updated times show the full local date and time together with a plain-language age such as 3 hours ago.
  • Copy or open the public project link directly from the dashboard.
  • Authorized administrators can reopen a published project's files in CodX Editor through a protected admin endpoint; verification keys are never exposed.

Collaboration

Collaboration lets multiple people work together in one session. It includes shared files, chat, live cursors, typing presence, roles, and room controls.

Sessions

  • Create a session, then copy its six-character PIN or the ready-made join instructions. The Session Info view keeps dedicated Copy Link and Copy PIN buttons available whenever you reopen the collaboration modal.
  • After the first session you create on a device, closing the Session PIN modal shows a one-time tutorial card beneath the Collaboration button. It explains that Manage Session reopens participants, invite details, collaboration tools, and room controls.
  • During setup, hosts can activate the waiting room to review guests before they enter. It is off by default.
  • When someone requests entry, the host receives a waiting-room popup showing the person’s name and chosen color with Accept and Deny buttons.
  • Waiting-room requests remain visible in the host's approval popup and Pending Join Requests panel without creating a duplicate "waiting to join" notification.
  • Admit All processes every current request only after the host confirms the bulk action in a second dialog.
  • Join with the six-character PIN or a valid invite link, then choose a 2–20 character display name, personal color, and collaboration cursor icon.
  • Invalid session links show a friendly not-found page.
  • If approval is enabled, guests see the host's session name while they wait for acceptance.
  • If the connection drops or the tab wakes after being idle, CodX Editor reconnects automatically, restores session membership, and resumes syncing without requiring a new join code.
  • Collaboration rooms do not expire because of inactivity or because nobody has joined recently. They remain registered until the host or an administrator explicitly ends them, and an active connection uses a frequent native keepalive to avoid idle proxy timeouts.
  • If the collaboration server process restarts, the host can automatically rebuild the live room from the open project and everyone can resume syncing.
  • Local edits waiting during a short outage stay queued until the collaboration server acknowledges them, then sync after membership is restored.

Chat

  • Use group chat for everyone in the room.
  • Use private chat for direct messages.
  • Messages use the sender’s chosen color.
  • Unread counters appear on the collaboration button and beside the relevant private-chat recipient until those messages are viewed.
  • Public and private message notifications show Click To Open; selecting the notification opens the correct conversation directly.
  • Moderators can clear group chat when permitted.

Presence

  • See where collaborators are typing.
  • While someone types, their pointer becomes a colored text caret positioned directly before the next character without jumping between document versions.
  • Choose a pointer, hand, mouse, crosshair, pen, or text cursor for other collaborators to see.
  • See live cursors in participant colors.
  • Follow a participant to stay on their file and cursor location.
  • Team focus and pinned file indicators help guide the group.

Host

  • The host controls the room and can manage participants.
  • The host can transfer ownership to another participant.
  • If the host disconnects, a co-host can be promoted automatically when available.

Co-Host

  • Co-hosts help moderate without owning every room control.
  • They can use team tools such as file focus, participant follow, selected file access, and chat cleanup where allowed.
  • They cannot transfer host, lock ownership-level controls, or end ownership-only flows.

Participant

  • Participants can code, preview, chat, and collaborate normally unless room settings limit them.
  • Hosts can freeze editing, mute chat, limit file access, kick, or ban devices from a session.
  • Collaboration name labels show (you) beside your own name in the participant list, chat, and Pair tools, plus useful status such as muted, frozen, and priority.
  • The participant list can be sorted by join time or alphabetically. Joined first is the default and uses each participant's recorded join time.
  • Participants can rename themselves when allowed; hosts and co-hosts can rename people they are permitted to manage.
  • Participant More options are shown as neat action cards for role, message, mute, freeze, file access, follow, details, copy, kick, and ban actions.

Pair Programming

  • Select Pair beside an eligible participant and choose Driver or Live Pair Mode. Pair setup does not ask for a timer.
  • The invited participant sees the proposed mode and can accept or decline. Invitations expire and include spam cooldowns.
  • Driver Mode allows only the Driver to edit. The Navigator can inspect, highlight, suggest replacements, and request a role switch without creating conflicting edits.
  • Live Pair Mode lets both partners edit using the normal collaboration synchronization and colored presence tools.
  • The pair dock includes Sync View, Switch Roles, Voice, Tools, and Leave controls.
  • Sync View starts switched on for the Navigator and appears green while active, following the Driver's current file and exact scroll position without competing with normal cursor tracking. Select it to turn syncing off or on; scrolling or navigating yourself also turns it off.
  • Role changes require the partner's approval.

Pair Tools

  • Pair chat, suggestion pins, a shared task checklist, and activity history are available only to the paired participants.
  • New Pair chat, suggestion, and task activity places a red dot on Tools and on the affected tab until that tab is opened.
  • Pair-start and Pair-message notifications show Click To Open and open the Pair chat tools directly.
  • Received Pair suggestions show Click To Open and open Suggestions without moving your current editor selection or scroll position. Use View when you intentionally want to jump to the suggested code. New Pair tasks open Tasks and highlight the task.
  • Pair task checkboxes use rounded green controls, with a clear green checked state for completed work.
  • Suggestions record the file, selected range, proposed replacement, and optional explanation. They can be viewed, applied with Undo support, resolved, or rejected.
  • Ask Host marks the pair as needing help without exposing pair-chat content to the host.
  • Pair help notifications show Click To Open and highlight the requesting pair in Group Controls.
  • Pair Snapshot downloads the current files and pair tools as a JSON backup.
  • Optional Voice requests microphone permission only after a call is accepted and sends audio directly between the two browsers when a direct WebRTC connection is available. CodX Editor does not record the call.
  • A disconnected partner can reconnect at any time. Pair state and roles wait indefinitely and return when reconnection succeeds, unless a pair member, the host, or an administrator explicitly ends the pair or room.

Room Controls

  • Lock the room, set read-only mode, pause collaboration, or disable chat.
  • Use green checkbox pickers to apply feature restrictions to selected participants, with Select All available for every multi-participant or multi-file list.
  • Limit chat, pairing, saving, opening saved projects, templates, publishing, running, or console access for specific participants.
  • Hosts can disable pairing for the room, end any active pair, and see which pairs requested help without reading private pair chat.
  • Group Controls show affected counts so you can quickly see how many people are limited.
  • Group Controls use different color families to distinguish permissions, participant management, file focus, session utilities, warnings, and destructive actions while keeping every label readable.
  • Pin a team file, bring everyone to a file, or set the team focus by choosing from a green checkbox list of every project file—no filename typing required.
  • Write announcements in a large responsive message field. Sent announcements appear only on participant screens, while hosts and co-hosts keep managing the room without receiving the popup.
  • If the host refreshes while the room is empty, the original device can join again with a new name and securely reclaim the host position. Other devices cannot take over the empty room.
  • Run a session timer, save a snapshot, regenerate invites, and end the session.
  • File-visibility eye controls appear only while an eligible host or co-host is in an active session and disappear immediately when that session ends.

Safety Tools

  • Kicked users are removed from the room and shown a notice.
  • Banned devices cannot rejoin the same session until unbanned.
  • Quiet Mode reduces presence noise for calmer collaboration.

Participant Checkboxes

  • Some group-control buttons open a participant checklist instead of changing everyone at once.
  • Every collaboration checklist uses the same high-contrast green checked, unchecked, and partially selected states.
  • Select All applies or clears every item in participant and file lists while keeping each individual checkbox editable.
  • Checked participants become affected by that setting; unchecked participants keep access unless a room-wide setting blocks it.
  • Participant More shows whether a restriction is personal or room-wide.

Developer Tools

Developer Inspection Panel

  • Developer Tools is a panel of labelled buttons. Every action is a single click, with no commands to type.
  • Open Developer Tools directly from More → Developer Tools, or use the keyboard shortcut.
  • Every one of the 21 controls is connected to guarded execution. A running asynchronous action temporarily shows a busy state, failures appear in the status strip, and toggle/device/wrapping buttons keep their pressed state synchronized with the editor.
  • The responsive grid spreads controls across the space formerly occupied by the output console, then becomes a compact two-column layout on small screens.
  • Emulate a phone, tablet, or laptop viewport; switch back to a fluid responsive pane; set a custom size; or click Rotate to change orientation.
  • Control preview zoom, refresh, fullscreen, and element inspection directly from their buttons.
  • While Inspect is active, clicking a rendered element opens its HTML file at the original line and column. Links, buttons, and forms stay inactive during inspection so the click can select code safely. The Open code when inspecting setting controls this navigation.
  • Use Custom Size for an exact viewport, save a preview Screenshot, or toggle an 8-pixel Grid Overlay while checking alignment.
  • Color Scheme cycles through system, light, and dark simulation. Breakpoints displays the current viewport category and exact CSS width.
  • Turn editor line wrapping on or off and format the active file without typing a command.
  • Format Code safely reindents supported files and remains undoable. It skips whitespace-sensitive HTML blocks instead of risking their content.
  • Click Media Source to inspect safe, read-only details for the active image, video, or audio file. Large encoded or binary payloads are not copied into the editor because doing so can exhaust browser memory.
  • Reset Tools returns the device, zoom, inspector, grid, breakpoint indicator, color scheme, media viewer, wrapping, font, and tab display to normal defaults.
  • A status strip below the buttons confirms what the last action did.
  • Alternatively, open it with Ctrl/Cmd + C, then Ctrl/Cmd + X. You may release Ctrl/Cmd between the two shortcuts.
  • Use Tab and Shift+Tab to move through every tool button, then press Enter or Space to activate it.

Guided Tutorial

  • The tutorial highlights core controls such as Auto-Run, the desktop Console toggle, Collaboration, More, Files, Run, ZIP tools, and Preview.
  • A custom pointer moves to each highlighted control and performs a short visual click animation.
  • Use Back, Next, Finish, or Close to move through it at your pace.
  • After you finish or skip the automatic first-visit tour, a one-time support card provides a direct email link and explains which details help us understand an issue.
  • The tutorial remains available during its guided flow; the removed reset-tutorial control is not part of settings.

Notifications & Dialogs

  • CodX Editor uses confirmation dialogs for sensitive actions like deleting, replacing, updating published links, and ending sessions.
  • Notifications confirm successful actions or explain why something is blocked.
  • Publish and collaboration dialogs can scroll when their content is taller than the screen.
  • Modal cards provide a large X close control unless a dedicated Cancel action is already available.

Shortcuts

Ctrl/Cmd + Shift + FFind and replace across project files
Ctrl/Cmd + SExport the project as a ZIP archive
Ctrl/Cmd + EnterRun the preview manually
Ctrl/Cmd + QCreate a file in the project
Ctrl/Cmd + Shift + CShow or hide the console panel
Ctrl/Cmd + ZUndo the last editor change
Ctrl/Cmd + Y or Ctrl/Cmd + Shift + ZRedo the last editor change
EscClose supported overlays or exit Zen Mode
cxstart + EnterInsert starter HTML in an empty HTML file
Emmet abbreviation + TabExpand HTML shorthand
Ctrl/Cmd + C, then XOpen the developer inspection panel

Helpful Tips

If Preview Looks Wrong

  • Run the preview manually if Auto-Run is off.
  • Open the console and check for script errors.
  • Check file badges for syntax issues.
  • Make sure linked project paths match files in the explorer.
  • Remember that spaces in filenames are converted to dashes.

If You Need a Backup

  • Save the project in the browser for quick local access.
  • Export a ZIP archive when you want a portable copy.
  • Publish only when you are ready to share a browser link.
  • Use GitHub commits when you want version history in a repository.

If You Are Collabing

  • Use pinned files and announcements to keep everyone aligned.
  • Use selected file access when different people should work on different parts.
  • Use follow mode when teaching, reviewing, or pair-programming.

If You Feel Lost

  • Use the More menu as the main place for project-level actions.
  • Keep the console open while learning JavaScript; it is your best little truth-teller.
  • For Node projects, enable Node.js and run commands from the expanded terminal.