What is Codevre IDE
A VS Code-style editor, a Node.js terminal, a live browser with DevTools and an AI coding agent, all running in one browser tab.
On this page
Codevre IDE is a browser-based development environment at codevre.com/ide. It looks and works like VS Code: a Monaco editor, an Explorer, Search, Source Control, a terminal and dockable panes. It adds a live browser with DevTools and an AI coding agent that can read, edit and run your project.
There is nothing to install. It runs on school Chromebooks and on any recent desktop browser.
The parts of the IDE
Link to “The parts of the IDE”| Part | What it does | Read more |
|---|---|---|
| Editor | Monaco, the editor from VS Code, with IntelliSense for JS/TS, diagnostics, a diff view and optional inline AI completions | The editor |
| Explorer | Your project's files, with upload, drag and drop, Git markers and "not saved" dots | Files and projects |
| Search | Find and replace across the project, with regex, whole-word and include/exclude globs | The workbench |
| Source Control | Git, built on the same Git the terminal uses, plus GitHub publish, push, pull and sync | Git and Source Control |
| Terminal | A shell running on Nodepod: node, npm, git and Codevre's vre command | Terminal |
| Browser | A browser pane with the permanent localhost:codevre tab and one tab per running dev server | localhost:codevre, Dev servers |
| DevTools | Elements, Console, Network and more, built into both kinds of preview | DevTools |
| Agent | An AI coding agent (or plain chat) that works inside your project | The Agent |
| Settings | VS Code-style User and Workspace settings, also editable as settings.json | Settings |
Where your code runs
Link to “Where your code runs”Everything that runs your code runs on your device, inside your browser:
- Static pages are served by VRE, Codevre's in-browser preview engine. It shows up as the localhost:codevre tab.
- Terminal commands,
npm install, build scripts and Node servers run in Nodepod, a Node.js-compatible runtime that runs in the browser on a virtual file system.
Codevre's servers load and save projects, sign you in, and relay AI requests to the provider you choose. They never execute your project's code.
Previews and the runtime live on a separate origin (preview.codevre.dev), away from the editor at codevre.com. A page you build can't reach into the editor, your account or your saved keys. See Security model.
Two ways to preview
Link to “Two ways to preview”| localhost:codevre (VRE) | Dev server tab (localhost:PORT) | |
|---|---|---|
| Use it for | HTML, CSS and JS, ES modules, canvas, CDN libraries | Projects that need a real server: Express, APIs, a Vite or esbuild dev server |
| How it starts | Save an HTML file, run vre run, or Terminal ▸ Run Preview (VRE) | Start the server in the terminal, e.g. npm run dev |
| Reloads | Automatically after a save (vre.preview.autoRun) | Your server's own reload, plus a change watcher |
| DevTools | Built in | Built in (Nodepod DevTools) |
If your project is just files, use localhost:codevre. You don't need live-server, http-server or python -m http.server; VRE already does that job.
What you need
Link to “What you need”- A recent desktop browser. Chromium-based browsers (Chrome, Edge, Arc, Brave) get the most testing; Firefox and Safari are supported.
- An account to save projects, connect GitHub, or use the Agent. You can open the IDE and run code without one.
- Your own API key from an AI provider to use the Agent. OpenRouter offers free models. See Providers and API keys.
Other Codevre editors
Link to “Other Codevre editors”Codevre also has the original Codevre Editor (HTML, CSS and JS, no Node.js), the three-pane Sandbox, the q5 Editor for learners, and Codevre Learn for classrooms. These docs cover Codevre IDE.
Next steps
Link to “Next steps”- Quickstart builds and previews a first project in a few minutes.
- How Codevre works explains the architecture.