NitroIDE Documentation

Welcome to the official guide for NitroIDE, the near-instant, entirely client-side browser IDE. Powered by the Monaco Editor engine, NitroIDE transforms your browser into a fully functioning frontend workspace.

Because it uses your browser's native capabilities (via HTML5 srcdoc and local sandbox evaluation), your code runs only in your browser for editing and preview. This keeps your code in your browser, with offline code editing and instantaneous execution speeds.

The Virtual File System: Your Local Workspace

Unlike traditional playgrounds, NitroIDE supports a dynamic, multi-file architecture mimicking a real local environment.

Click the Explorer icon in the workspace toolbar to open the sidebar. From here, you can:

  • Create: Click the + icon to generate new .html, .css, or .js modules.
  • Rename/Delete: Hover over any non-core file in the explorer to reveal the Edit and Trash actions.
  • Compile: The execution engine automatically concatenates all files into the live preview DOM in real-time.

Hot Module Replacement: When you edit CSS, the engine intelligently replaces the specific style block in the preview without reloading the iframe, preserving your current scroll position and JavaScript state.

The Developer Console

We built an integrated console directly into the IDE that supports native object serialization. This means if you log a complex JSON object, array, or HTML Node, it will render interactively exactly like Chrome DevTools.

// Instead of seeing [object Object], see the real data: console.log({ status: 200, user: { role: "Admin", id: 99 } }); // DOM Nodes are safely serialized and highlighted: console.log(document.querySelector('.hero-title'));

The input bar at the bottom of the console acts as a true CLI. You can issue native commands to control the IDE:

> install tailwind ⚡ Success: Injected tailwind. > theme dark // Accepts 'dark', 'light', or 'toggle' 🎨 Theme updated. > export zip 📦 Bundling ZIP... > format ✨ Code Formatted! > clear // Clears the console history

The State Visualizer

Debugging state changes in vanilla JS or React can be tedious. We built a global hook called Nitro.watch() to solve this.

If you pass a variable into this function, the IDE will render a live, syntax-highlighted JSON tree in the State tab.

// Inside your script.js file let playerState = { health: 100, level: 5, items: ['Sword'] }; // Bind it to the IDE visualizer Nitro.watch('Player Data', playerState); // Automatically updates the UI every second setInterval(() => { playerState.health -= 5; Nitro.watch('Player Data', playerState); }, 1000);

Dependency Injection (CDN)

NitroIDE manages dependencies natively without cluttering your HTML.

  • UI Method: Open the Preferences menu and click Manage Dependencies to paste any unpkg or cdnjs URL, or click the quick-add buttons.
  • CLI Method: Type install react directly into the console to magically pull the latest minified build.

Device Emulation

In the Preferences menu, you can instantly toggle the live iframe dimensions between Desktop, Tablet, and Mobile views. This allows you to test your CSS media queries and responsive breakpoints seamlessly without leaving the workspace.

Keyboard Shortcuts

Keep your hands on the keyboard with these shortcuts.

  • Cmd/Ctrl + K : Open the Command Palette / Universal Search.
  • Cmd/Ctrl + S : Save buffers to VFS and force a hard re-compile.
  • Esc : Close open palettes or menus.

Export HTML, CSS, & JS Projects

Because your code lives in your local machine's memory, exporting requires zero server communication or backend processing.

  • Download ZIP : Utilizes client-side JSZip to download your full frontend project as a cleanly separated, production-ready folder.
  • Export as 1-File : Bundles all of your CSS modules, JS modules, and CDN links into a single portable HTML file.

Embed NitroIDE

You can embed any shared NitroIDE workspace directly into your own blog, documentation, or tutorial page with a single iframe. Append ?embed=1 to a codebox share URL to load a stripped-down, read-only viewer: the full IDE chrome (file explorer, console, and settings menus) is hidden, leaving only the editor and the live preview so readers can focus on the code and its output.

Take any share URL (the code parameter from a shared workspace link) and drop this snippet into your page, replacing YOUR_SHARE_CODE:

<iframe src="https://nitroide.com/tools/codebox.html?embed=1&code=YOUR_SHARE_CODE" width="100%" height="500" frameborder="0"></iframe>

Automatic attribution: Every embed carries a footer link reading "Built with NitroIDE — open & edit". Clicking it opens the exact workspace in the full editor, so your readers can fork and experiment with a single click.

Open in NitroIDE Badge

Let anyone open your code in NitroIDE straight from a GitHub README, docs page, or gist with a one-click badge.

The codebox.html page accepts two URL parameters for this:

  • ?url= — loads any publicly accessible raw file URL (for example a raw.githubusercontent.com link) directly into the editor.
  • ?gist= — loads a GitHub Gist by its ID, no raw URL required.

Paste this Markdown into your README, replacing the placeholder with your raw file URL:

[![Open in NitroIDE](https://nitroide.com/logo/logo_white.png)](https://nitroide.com/tools/codebox.html?url=YOUR_RAW_FILE_URL)

For a Gist, use this variant with your Gist ID instead:

[![Open in NitroIDE](https://nitroide.com/logo/logo_white.png)](https://nitroide.com/tools/codebox.html?gist=YOUR_GIST_ID)

Frequently Asked Questions

Is NitroIDE completely free to use?

Yes. NitroIDE is a 100% free and open-source project. Because the entire IDE architecture relies on your browser's local memory to compile and execute code, there are no expensive backend cloud servers to maintain, allowing us to keep the tool free forever.

Does this browser IDE require an internet connection?

NitroIDE is designed to function as an offline code editor for vanilla HTML, CSS, and JavaScript. The only time an active internet connection is required is if you use the Developer Console to fetch external libraries (like React or Tailwind) via the CDN injector.

Where is my code stored?

Your code runs only in your browser. All keystrokes, modules, and virtual files are stored strictly within your browser's local localStorage API. There is no code telemetry — analytics is GA4 only.

Can I use frameworks like React, Vue, or Tailwind CSS?

Absolutely. While NitroIDE does not use a package.json or a traditional node server, you can instantly inject any NPM package using our integrated CDN manager. Just type install react or install tailwind in the Developer Console to pull the minified builds directly into your workspace.

How do I share my code with other developers?

Yes — hit the Share button in the editor and you get a link like nitroide.com/tools/codebox.html?code=... with your entire project compressed into the URL itself. Nothing is uploaded to any server: opening the link reconstructs your workspace locally in the recipient's browser. For very large projects the URL can get long — then use Export Code to ZIP and send the standalone files, or push them to your own GitHub repository.

Can I use NitroIDE on my phone or tablet?

Yes! The NitroIDE interface is fully responsive. While typing complex logic on a mobile keyboard isn't always ideal, the workspace is perfect for quickly reviewing code, testing CSS media queries with our built-in device emulator, or debugging JavaScript on the go.

Getting Started in 2 Minutes

New here? Here's the fastest path from zero to a running project:

  1. Open the workspace — hit Launch Workspace. No signup, no download; the editor loads straight into a sample project.
  2. Pick a template — skip the blank page with one of twelve starter templates (portfolio, todo app, games, tools). Each opens directly in the editor via ?template=slug.
  3. Learn the palette — press Ctrl + K to open the command palette. Every IDE action (format, export, layouts, themes) lives there, fuzzy-searchable.
  4. Share or export — hit the Share button for a link, or export zip in the console to download your project. Done.

Power-user move: memorize the keyboard shortcut cheatsheet — Ctrl + S saves and recompiles, and the Monaco editor shortcuts you know from VS Code all work.

Install as an App (PWA)

NitroIDE is a Progressive Web App: install it and it behaves like a native desktop or mobile app, including offline support. Your code, the editor and the preview all keep working without a connection (open the workspace once while online so everything gets cached).

  • Chrome / Edge (desktop): open the workspace, then click the install icon in the address bar (or menu → Save and share → Install page as app).
  • Android (Chrome): open the site, tap the ⋮ menu → Add to Home screen → Install.
  • iPhone / iPad (Safari): open the site, tap Share → Add to Home Screen.

Installed apps launch fullscreen in their own window, get their own taskbar/dock icon, and update automatically — the service worker always fetches the latest version when you're online.

Troubleshooting

Quick fixes for the most common hiccups:

The editor (Monaco) fails to load

The editor bundle is large, so a flaky connection can interrupt it. Hard-refresh (Ctrl + Shift + R), disable aggressive ad/script blockers for nitroide.com, and try again. Your files are safe — they're stored separately in localStorage.

localStorage is full / quota errors

Browsers cap localStorage around 5–10 MB per site. If saves start failing, export finished projects (export zip in the console) and delete old ones from the Project Manager dashboard to free space.

Share link is too long

Share links encode your code in the URL, and browsers cap URL length around 2,000 characters. For big projects, use export zip or Export as 1-File and share the file instead.

Offline mode isn't working

Offline support kicks in after your first online visit — the service worker needs one successful load to cache the app. If it still fails, check that you're opening the installed app (or the same browser profile), not a private/incognito window, which blocks service workers.

localStorage doesn't work inside the preview

The preview runs in a sandboxed iframe with an opaque origin — a security isolation that stops code in shared links from touching your saved projects. That means localStorage, sessionStorage, and cookies are unavailable inside the preview pane; in Safari, touching them throws a SecurityError. Wrap storage access in try/catch:

function safeGet(key) {
  try { return localStorage.getItem(key); }
  catch (e) { return null; } // preview sandbox blocks storage
}

Your projects saved in the IDE itself are unaffected — this only applies to code running inside the preview.

API Reference

The small public surface NitroIDE exposes to your project code and to share links. Everything here is already described elsewhere in these docs or implemented in the workspace script.

Nitro.watch(name, data)

Call Nitro.watch() inside your project's script.js to send a value to the IDE's State tab. name is the label shown in the State tab; data is any value that can be serialized to JSON. The IDE renders it as a live, syntax-highlighted JSON tree. Call it again with the same name to update the displayed value.

Nitro.watch('Player Data', playerState);

Share and import URL parameters

All parameters go on the workspace URL, tools/codebox.html. Share links are generated by the Share button; import links load outside code into the editor.

  • ?code= — a share link. The Share button compresses your whole workspace (files plus active files) into this one parameter. Opening the link reconstructs the workspace locally in the recipient's browser; nothing is uploaded to any server by the Share button. For very large projects the URL can get long — use ZIP export instead.
  • ?gist= — loads a GitHub Gist by its ID, no raw URL required.
  • ?url= — loads any publicly accessible raw file URL (for example a raw.githubusercontent.com link) directly into the editor.
  • ?template= — loads a built-in starter template by its slug, for example ?template=portfolio.

Embed parameters

  • ?embed=1 — appended to a codebox share URL, loads a stripped-down, read-only viewer: the full IDE chrome (file explorer, console, and settings menus) is hidden, leaving only the editor and the live preview. Every embed carries a footer link reading “Built with NitroIDE — open & edit”, which opens the exact workspace in the full editor.

Example embed URL: tools/codebox.html?embed=1&code=YOUR_SHARE_CODE

Put it into practice.

Open the workspace