New File → Creates a new file (temporary if no folder is open)
New Folder → Creates a new folder inside the currently selected folder (requires a real project to be open)
Open Folder → Opens a real folder from your computer
Save → Saves all modified files
Format → Formats the current file
Boilerplate → Inserts basic HTML structure (only works on .html files)
Preview → Opens preview (behavior depends on file type)
Guide → Opens this help guide
3. File Explorer
Click a folder to select it and expand/collapse its contents.
Click a file to open it in a new tab.
Click an image file to preview it directly, instead of opening it as text.
Drag and drop any file onto a folder (or the project root) to move it there instantly — no need to recreate your project structure by hand.
Click the trash icon next to a file to delete it (with confirmation).
4. Editor Features
Syntax highlighting for ~35 languages, including HTML, CSS, JS, TypeScript, Python, JSON, and more.
Smart autocomplete suggestions for common JavaScript and Python patterns (loops, try/catch, array/object helpers, Python builtins, etc).
Auto-closing brackets, quotes, and HTML tags as you type.
5. Console Tab
The Console tab is used to run JavaScript code and see output.
Click "▶ Run Current JS" to execute the code in the active .js file.
All console.log() outputs will appear in the box below.
Only works when a .js file is open and active.
6. Preview System
HTML Preview
Opens inside the editor in an overlay.
Only inlines the .css and .js files this specific HTML file actually links to (via <link> or <script src>) — other open tabs that aren't connected to it are left out.
External CDN stylesheets/scripts (full http(s):// URLs) are left untouched and load normally.
Relative image paths (like img/logo.png) are automatically resolved from your opened folder, so images and SVGs display correctly.
JavaScript using import/export runs as a real ES module, so you can pull packages straight from a CDN, e.g. import _ from "https://esm.sh/lodash".
Responsive Device Preview
While previewing, tap the small circular ⋮ button to open a radial menu of preview options.
Choose Desktop, Tablet, or Mobile to see how your page looks at different screen sizes.
Use ↻ to refresh the preview, or ✕ to close it.
The circular menu button can be dragged anywhere on screen — handy for reaching it comfortably on phones and tablets.
Python Preview
Python files open in a new tab and run using Pyodide, a full Python runtime in the browser.
print() output and errors appear live in that tab.
On a properly deployed site (with the required security headers), input() works as a real, inline, in-page prompt — type directly into the output panel, just like a real terminal.
If those headers aren't available (e.g. testing locally), input() automatically falls back to a popup dialog, so your code still runs correctly either way.
import statements are scanned automatically — anything not in Python's standard library is installed on the fly (Pyodide's own precompiled packages first, then PyPI via micropip as a fallback). Packages with uncompiled C extensions generally won't install.
First-time Pyodide loading can take 15–30 seconds.