CodX Editor Guide | Projects, Preview, Node.js & Collaboration

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.

Auto-Run: keeps the preview in sync while you type.
Run: refreshes the preview manually when Auto-Run is off.
GitHub: signs in through GitHub OAuth, lists repositories, and lets you create, edit, upload, and commit repository files.
Help: lets you choose the animated editor tour or open this complete handbook.
Homepage FAQ: use the FAQ link in the homepage navigation for quick answers about saving, Device Transfer, collaboration, GitHub, publishing, and mobile support.
Mobile navigation: the hamburger bars and open-menu X share one centered anchor, keeping the close icon evenly aligned on the homepage, About, Contact, Help, Privacy, and Terms pages.
Expanded homepage: feature, comparison, workflow, use-case, learning, and FAQ content uses a wide responsive page layout instead of being compressed inside one advertisement-style card.
True editor preview: the homepage hero now mirrors the real CodX Editor proportions, Saved/Ready file toolbar, complete file controls, line-numbered starter project, editor actions, preview tools, starter-page output, colors, and phone workspace tabs.
Friendly starter page: the concise Get Started project contains a quick CodX Editor explanation, six essential shortcut controls, and responsive development and collaboration artwork sourced from unDraw; detailed guidance remains here in Help.
Error-first console: JavaScript runtime errors and code diagnostics are promoted above logs, warnings, and informational output, and opening the Console focuses the error section first.
Smart JavaScript diagnostics: while you type, the Console uses JavaScript's parsed structure to classify Syntax, Reference, Type, Range, Logic, Async, and beginner mistakes. Each diagnostic explains why the issue happens, suggests a contextual fix, and opens the exact source location without showing an extra popup notification.
Smooth incomplete JavaScript: unfinished expressions such as for (let i = 0; i < ; i++) no longer make the editor stutter. Auto-Run now waits for a short typing pause, and syntax diagnostics avoid duplicate Console scans, file-tab rebuilds, and per-keystroke error-highlight geometry.
Smooth typing for every language: HTML, CSS, JavaScript, inline scripts/styles, JSON, environment files, and plain text now share coordinated typing safeguards. Syntax colors and suggestions wait briefly until the current keystroke completes, while project-wide suggestion indexing runs only when the current source changes.
JavaScript quote pairing: typing a single or double quote inserts its matching closing quote and leaves the caret between them, including inside console.log(). Typing the existing closing quote moves past it instead of creating a duplicate, while quotes in comments and existing strings remain under your control.
Current-source suggestions: suggestions are rebuilt from the code that exists in the project right now and are never stored as a history. If id="duo" becomes id="du", only du remains. The same rule applies to HTML classes, CSS selectors/custom properties, JavaScript declarations, environment keys, and project filenames.
Welcome page: review the concise service summary, the compact code-to-editor drawing, and the agreement checkbox before entering the workspace.
Verified Developer Tools: open the panel from More or its keyboard shortcut. All 21 buttons now use guarded execution, accurate busy and result messages, synchronized pressed states, and visible failure feedback; asynchronous Custom Size, Screenshot, and Fullscreen actions wait for their real result.
Tag suggestions setting: open Settings and use the Tag suggestions switch to enable or disable automatic HTML, CSS, JavaScript, current-file identifier, and file-path suggestion menus. The switch is on by default, is saved with your editor settings, and is included in Device Transfer. While you type, an open suggestion popup refreshes its ranked matches in place instead of disappearing and replaying its entrance animation for every character.
Safe block indentation: pressing Enter beside an existing CSS or JavaScript opening brace recognizes the matching closer farther down the block, adds one correctly indented line, and never inserts an extra closing brace before existing declarations or statements.
Inline JavaScript parity: JavaScript inside a standard or module <script> block now uses the same suggestions, current-file identifier ranking, auto-closing, indentation, syntax highlighting, diagnostics, and Format Code behavior as an external JavaScript file. JSON, import-map, data, and external-source script tags remain raw or externally linked instead of being treated as editable inline JavaScript.
Reorder files: drag file tabs into a new position on laptops, focus the grip and use the arrow, Home, or End keys, or use the earlier/later controls on touch devices. The order is retained in project saves, exports, transfers, and collaboration updates.
Consistent branding: interface messages, learning content, and administration pages use the complete CodX Editor name.
More: opens the Command Palette, saving, templates, publishing, GitHub, Node.js, fonts, icons, desktop Zen Mode, and navigation tools.
Command Palette: press Ctrl/Cmd + K to search files and editor actions without leaving the keyboard.
Responsive workspace: laptops and landscape tablets keep the resizable split view and full controls, while phones and portrait tablets use large Files, Editor, Preview, and Console tabs.
Guided tour: explains the main editor controls step by step with Back, Next, Finish, and Close actions.

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.
On mouse or trackpad laptops, More uses a roomier 372px two-column button grid with slightly larger controls. Tablets and phones keep the compact 320px version, and its position changes as needed to stay inside the screen.
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 / Share, and Connect to GitHub.
Editor Extras contains Command Palette, Find & Replace, Enable Node.js, Fonts, Get Icons, Homepage, and Zen Mode 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.

Command Palette

The Command Palette provides one searchable place for project files and editor actions. Open it from More → Command Palette, press Ctrl/Cmd + K, or use Ctrl/Cmd + Shift + P.

Search Everything

Search by a complete command, a partial phrase, a keyword, or a project filename.
Fuzzy matching can find useful results even when the search is abbreviated.
Current project files appear automatically, so newly created files are immediately searchable.
Unavailable actions remain visible with a clear disabled state instead of failing silently.

Keyboard Navigation

Use ↑ and ↓ to move through matching commands.
Press Enter to run the selected command.
Press Esc to close the palette and return focus to your previous control.
The active result stays visible while you move through longer lists.

Available Actions

Open project files, create files, focus the code editor, and use Undo or Redo.
Run or refresh the preview, toggle fullscreen, Auto-Run, Console, or Zen Mode.
Open Find & Replace, saved projects, templates, publishing, ZIP import/export, collaboration, settings, fonts, icons, media, help, and Node.js.
Commands reuse the editor's existing permission checks during collaboration sessions.

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.

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.
Choose Send to create a one-time code, link, and QR code, or use the down-arrow Receive option on the other device. The Send screen is ordered for quick reading: the live ten-minute countdown appears first, followed by the transfer code, the QR code, and then the transfer details and actions. The countdown turns amber in the final minute and clearly marks the transfer as expired at zero. The QR loads from a no-cache CodX Editor image endpoint with an inline fallback, versioned editor assets prevent an older modal from remaining in the browser cache, and keyboard focus no longer scrolls important content above the visible area. Type the 12-character code into three four-character boxes such as A1B2-C3D4-E5F6, scan the QR code with its camera, choose a saved QR image, or open the link. Typed letters automatically become uppercase, focus advances as each box is completed, and you can paste the entire code at once. The receiver previews the item counts before importing, and the code stops working immediately after one successful import.
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.

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 Runtime

Enable Node.js from More to start a browser-isolated Node workspace. Node processes and npm packages run inside a WebContainer in your browser, not on the CodX Editor hosting server.

Enable Node.js

Enable Node.js hides the normal webpage preview and expands the console into a command terminal.
While Node.js is on, the More action changes to a red power button labeled Disable Node.js with an ON badge, and enabling or disabling it shows a confirmation message.
If missing, CodX Editor creates package.json with project name project and a starter server.js.
Disable Node.js stops the active command, removes stale server-preview links, and restores the normal preview while leaving the browser runtime available for the current tab.
If runtime startup fails, CodX Editor rolls the interface back to the normal preview so the Enable button can be retried.
Use a current Chrome or Edge browser and hard-refresh if the isolation-header message appears.

Commands

Type commands in the Node console and choose Run or press Enter.
Commands run one at a time. The command field is locked while a process is active so terminal output cannot become mixed.
Choose Stop to end a long-running server or command before starting another one.
Install dependencies with commands such as npm install express.
Start the generated project with npm start.
Terminal output removes spinner/control codes so npm output stays readable.
Dependency changes sync package.json and package-lock.json back into the editor.

Server Preview

The default runtime port is 8000.
When a server becomes ready, the console shows a clickable http://localhost:8000 label.
The link opens a CodX Editor Node.js preview tab that securely embeds the browser runtime server.
The underlying WebContainer proxy address is handled automatically.

Runtime Notes

Project files are copied into the in-browser runtime before commands run.
Files deleted from the editor are removed from the runtime before the next command, while node_modules remains managed by npm.
Native Node addons may not work; prefer JavaScript or WebAssembly-compatible packages.
Node mode does not expose hosting environment variables or GitHub OAuth secrets to project code.
Closing or refreshing the browser tab ends that temporary Node runtime.

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, Command Palette, 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 / Share from the More menu.
Choose Create a Link.
Type the ending you want for the published link.
The empty form displays published/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.

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 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.

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 Publish / Share 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 now a visual power-control panel: the old output transcript and command text field are removed, so every available action is a large, clearly described button.
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 compact status strip below the controls confirms the latest action without rebuilding a scrolling output transcript.
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.

Find & Replace

Find & Replace searches code across every text file without requiring you to open files individually. Open it from More → Find & Replace, choose it in the Command Palette, or press Ctrl/Cmd + Shift + F.

Exact Results

Results are grouped by filename and display the exact line and column for each match.
Selecting a result opens its file, navigates to the matching line, and selects the matching text.
Search skips image, audio, and video content while including HTML, CSS, JavaScript, JSON, and other project text files.
Large result sets are limited to the first 500 matches so the editor remains responsive.

Matching Controls

Match Case distinguishes uppercase and lowercase text.
Whole Word avoids matching the search inside longer identifiers.
Regular Expression supports advanced matching patterns and reports invalid patterns clearly.
Include and Exclude filters accept comma-separated file patterns such as *.html, src/**, or *.min.js. Exclude patterns take priority.
Use Clear beside the filters to return to searching every text file.
If text is selected in the editor, opening project search can use that selection as the initial query.

Safe Replacement

Replace changes one result while keeping the search panel and remaining results current.
Replace All asks for confirmation and updates every editable matching file together, including only files allowed by the active filters.
After Replace All, Undo Replace All restores the complete content of every affected file. If one of those files was edited afterward, CodX Editor asks before overwriting the newer work.
Collaboration permissions are respected; matches in locked files remain visible but cannot be replaced.
Replacing content marks the project as changed, refreshes diagnostics and preview output, autosaves recovery data, and synchronizes collaboration state.

Shortcuts

Ctrl/Cmd + KOpen or close the Command Palette

Ctrl/Cmd + Shift + POpen or close the Command Palette

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.

Learn the editor without digging through menus.