Welcome to the official guide for NitroIDE, the zero-latency, 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 never touches an external server. This guarantees 100% absolute privacy, offline code editing, and instantaneous execution speeds.
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:
.html, .css, or .js modules.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.
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.
The input bar at the bottom of the console acts as a true CLI. You can issue native commands to control the IDE:
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.
NitroIDE manages dependencies natively without cluttering your HTML.
unpkg or cdnjs URL, or click the quick-add buttons.install react directly into the console to magically pull the latest minified build.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.
Keep your hands on the keyboard with these shortcuts.
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.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.
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.
Your code never leaves your computer. All keystrokes, modules, and virtual files are stored strictly within your browser's local localStorage API. We employ absolutely zero telemetry or tracking.
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.
Because NitroIDE is a 100% serverless environment, we do not host your code on a database to generate shareable URLs (like traditional cloud editors). To share your work, simply use the Export Code to ZIP feature and send the standalone files, or push them directly to your own GitHub repository.
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.