# 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.

Last updated: October 17, 2026
Source: https://codevre.com/docs/ide/overview

Codevre IDE is a browser-based development environment at [codevre.com/ide](https://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

| 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](editor.md) |
| Explorer | Your project's files, with upload, drag and drop, Git markers and "not saved" dots | [Files and projects](files-and-projects.md) |
| Search | Find and replace across the project, with regex, whole-word and include/exclude globs | [The workbench](workbench.md#search) |
| Source Control | Git, built on the same Git the terminal uses, plus GitHub publish, push, pull and sync | [Git and Source Control](source-control.md) |
| Terminal | A shell running on Nodepod: `node`, `npm`, `git` and Codevre's `vre` command | [Terminal](terminal.md) |
| Browser | A browser pane with the permanent **localhost:codevre** tab and one tab per running dev server | [localhost:codevre](localhost-codevre.md), [Dev servers](dev-servers.md) |
| DevTools | Elements, Console, Network and more, built into both kinds of preview | [DevTools](devtools.md) |
| Agent | An AI coding agent (or plain chat) that works inside your project | [The Agent](agent.md) |
| Settings | VS Code-style User and Workspace settings, also editable as `settings.json` | [Settings](settings.md) |

## 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](security-model.md).

## 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

- 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](providers-and-keys.md).

## 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

- [Quickstart](quickstart.md) builds and previews a first project in a few minutes.
- [How Codevre works](how-codevre-works.md) explains the architecture.