A workbench for loose files

Everything stays on your machine

The editor reads files with the browser's own File and FileReader APIs. Nothing is sent anywhere except the CDN requests needed to load the editor itself, its fonts, and the optional runtimes below — your project files never leave the tab.

How auto-organization works

Every file you add is sorted by extension into a small set of folders:

• html/ — .html and .htm files
• css/ — stylesheets
• js/ — scripts
• php/ — PHP scripts
• sql/ — SQL files
• assets/images/ and assets/fonts/ — images and font files
• misc/ — JSON, plain text, Markdown, SVG, and anything else

Uploading a .zip unpacks it first, keeping each entry's original relative path for later matching, then sorts every extracted file the same way. You can also drag a file onto a different folder header to re-file it manually.

Every language runs on its own, or together

Set the preview entry to any runnable file — the runtime is picked automatically by extension:

• HTML runs as a normal page; matching CSS and JS are inlined into it automatically.
• JS can also run standalone as the entry itself, not just linked from HTML.
• SQL files run against a fresh in-memory SQLite database (via sql.js/WebAssembly); results render as tables in the preview.
• PHP files run through a WebAssembly PHP runtime and their output is rendered as the page. This one is experimental — it depends on a third-party CDN build and won't support every PHP extension.

Because each is chosen independently by the entry you pick, you can keep an HTML+CSS+JS site, a SQL query, and a PHP script all in the same project and switch between them freely. Supported file types cover the essentials: HTML, CSS, JS, PHP, SQL, JSON, plain text, Markdown, SVG, images, and fonts.

Opening a .js file reveals a Script type selector — Auto-detect, Classic script, or ES Module — so you don't have to hand-edit type="module" onto a <script> tag just to use an import statement. Auto-detect guesses from your code and whether you've added dependencies; the other two options force it either way.

A Tools sidebar for tablets and up

Project switching and Dependencies live in a collapsible Tools panel — click the "Tools" button in the toolbar to open or close it. On tablet and desktop widths it sits as a fourth column alongside the file manager, editor, and preview; on narrow screens it stacks in normally when opened. Your open/closed choice is remembered between visits.

Installing packages without a backend

The Dependencies section in the Tools panel adds an import map to the running preview, pointing package names at esm.sh's public CDN build of that package. Pick from the popular list or type name@version yourself, set the file's Script type to "ES Module", then import it from your code — no npm install, no bundler. This works for pure-JavaScript packages; anything requiring native/Node-only APIs won't run in a browser regardless of how it's loaded.

Text vs. binary, handled separately

Code files are decoded as text — UTF-8 by default, with ISO-8859-1 and UTF-16 available per file if something looks garbled. Images and fonts are kept as binary and referenced by the preview through in-browser blob URLs.

One page, several screens — and real navigation between them

The Run panel renders your chosen entry inside a mobile, tablet or desktop-sized frame, or any exact pixel width you type in. Clicking an internal link inside the preview — <a href="about.html"> and similar — navigates to that file within your project, the same way it would on a real site, with a Back button to return. External links (anything starting with a protocol like https://) are left alone rather than risking a broken navigation. "Open in new tab" pops the same run, including internal navigation, into its own tab; "Fullscreen" fills the screen. "live reload" re-runs it a moment after you stop typing.

Works without every dependency

ReztXeditor's core — uploading, auto-organizing, editing, tabs, projects, and running HTML/CSS/JS — has no hard dependency on any CDN. If CodeMirror fails to load, the editor falls back to a plain text box automatically (you lose syntax highlighting and per-file undo, not the ability to edit and run). If JSZip or sql.js fail to load, only the features that specifically need them (zip import/export, .sql execution) are affected — you'll see a note about it in the Console tab on load, and everything else keeps working.

Console, Problems, and Audit

A Console panel relays console.log/warnings/errors from the running page. A Problems tab flags unclosed HTML tags, mismatched CSS braces, and JS/SQL/PHP syntax issues on save. An Audit tab scores the current entry on SEO (title, meta description, headings, alt text, canonical…), performance (total asset weight, oversized images, render-blocking scripts), and stability (lint problems, console errors) — a lightweight, heuristic approximation of tools like Lighthouse, computed entirely client-side rather than a guaranteed ranking signal.

This site practices what it audits

Each page here ships a unique title and meta description, a canonical link, Open Graph and Twitter card tags, a favicon, semantic headings, and a JSON-LD SoftwareApplication entry on the landing page, plus a robots.txt and sitemap.xml at the project root. Swap the placeholder domain in those files for your real one once you host this.

Light by default, dark on request

ReztXeditor opens in a light, professional theme. The moon/sun icon switches the whole app — including the code editor — to a dark theme, and remembers your choice.