Everything you need to get started with VibeCode Editor, from your first project to the AI assistant and terminal.
From the Dashboard, click "New Project" and pick a template (Next.js, React, Astro, Vue, etc.). Give your project a name and hit Create. Your project opens right away in the editor with all files ready to go.
Your projects are saved to your account. Visit the Dashboard to see all your projects. Click any project card to re-open it in the editor exactly where you left off.
VibeCode uses the same editor engine as VS Code. You get syntax highlighting, bracket matching, code folding, multi-cursor editing, and IntelliSense for JavaScript, TypeScript, HTML, CSS, JSON, and more.
Open multiple files simultaneously. Tabs show unsaved changes with an orange dot. Close individual tabs or use Close All. Press Ctrl+S (or ⌘S on Mac) to save the active file.
The sidebar shows your full project tree with file-type icons. Right-click (or use the ... menu) to create, rename, or delete files and folders. Use the refresh icon to sync the tree after terminal operations.
As you type, the AI analyzes your context and suggests code completions inline. Press Tab to accept a suggestion, Escape to dismiss. Toggle AI suggestions on/off from the toolbar. The AI indicator in the toolbar shows "AI Thinking..." when a suggestion is loading.
Open the AI chat panel from the right sidebar. Ask questions about your code, request explanations, generate snippets, or debug errors. The assistant streams responses in real-time and understands your project context.
A full xterm.js terminal sits below the preview. Run npm install, file operations, git commands, whatever you need, directly in your browser via WebContainers.
Click the + button in the terminal tab bar to open additional terminals. The "Server" tab shows your dev server output. Each additional tab gets its own shell session.
When you open a project, the WebContainer automatically installs dependencies and starts the dev server. The preview pane shows your running app with hot-reload. Edit a file, save, and changes show up right away.
The editor and preview are separated by a draggable handle. Pull it left or right to allocate more space. The preview and terminal also have a vertical resizable divider.
VibeCode ships with starter templates for common setups. Each one is a ready-to-run project with dependencies pre-configured.
