CodewithChat LogoCodewithChat
DocsBuilding & IterationLive Code Editing & Monaco Editor
Building & Iteration• Web IDE Tools

Live Code Editing & Monaco Editor

Take manual control over your codebase with our integrated VS Code Monaco editor.

Switching Between Chat and Code

At any time, you can toggle between the AI chat panel and the full code editor. Click on any file in the file tree to edit lines directly, add custom CSS, or install packages.

Keyboard Shortcuts

Enjoy full VS Code keybindings: `Ctrl+P` (or `Cmd+P`) for quick file search, `Ctrl+F` for text find/replace, and `Ctrl+S` to save and compile instantly.

Instant Compilation & Hot Reload

Any manual keystroke immediately triggers live preview compilation. The AI will also notice your manual changes and respect them in subsequent prompts.

Ready to build your first website or web app?

Start with your idea and let the AI mentor guide you step-by-step from an empty folder to a successful launch.

Start Building Now

Command Palette

Search for a command to run...