Quickstart

Open the IDE, start a project, preview it, run a Node server and save your work.

Last updated 2 min read
On this page

Open codevre.com/ide. The Welcome tab gives you several ways to begin:

  • Start from a template. HTML, CSS and JS; Three.js; React (with esbuild); Node.js. View all templates opens the full gallery.
  • Upload folder… or Upload files… from your computer. If the workspace is empty, an uploaded folder becomes the project: its contents become the root and its name becomes the project name.
  • Clone Git repository… opens the terminal with git clone typed for you. Paste the URL and press Enter. Public repositories clone without connecting GitHub.
  • Open project… (Ctrl+O) lists projects you've saved to Codevre.
  • Start with AI. Describe what you want and the Agent builds it. This needs an account, an API key and a model. See The Agent.

You can also link straight to a template: https://codevre.com/ide?template=<id>.

Create index.html, type some HTML and save. A running preview updates on every save; the first time, start it with any of these:

  • Run vre run in the terminal (or vre run about.html for another page).
  • Choose Terminal ▸ Run Preview (VRE).
  • Right-click an .html file and choose Preview in VRE.

The page opens in the localhost:codevre tab of the Browser pane, with DevTools underneath. See localhost:codevre.

Open the terminal with Ctrl+\` (backquote). It's a real shell on Nodepod:

sh
npm init -y
npm install canvas-confetti
node -e "console.log('hello from Node in the browser')"

npm install works with the regular npm registry. Packages that need native binaries (such as sharp, sqlite3 or bcrypt) can't run in a browser; use pure-JS alternatives such as bcryptjs or sql.js. See What works in Nodepod.

js
// server.js
const http = require('http');
http.createServer((req, res) => res.end('Hello!')).listen(3000);

Run node server.js. When the server starts listening, Codevre opens a localhost:3000 tab in the Browser and adds a localhost:3000 link to the status bar. To stop the server, press Ctrl+C in its terminal or click the stop button next to the status-bar link. See Dev servers.

Press Ctrl+S (Cmd+S on Mac) to save the project to your Codevre account. Sign in first if you haven't. Until you save:

  • a green dot marks new files that aren't saved to Codevre yet
  • an orange dot marks files modified since the last save

Editor tabs are written to the runtime as you type, so the preview and terminal always see your latest code. Saving to Codevre is the separate step that keeps it in your account. See Files and projects.

node_modules is never saved. It is reinstalled when you reopen the project.

  • Put the project on GitHub: Source Control ▸ Publish to GitHub. See GitHub.
  • Let the Agent build or fix things: The Agent.
  • Make the project start itself when opened: Tasks.
  • Tune the editor: Settings.
Docs