A beaver-themed, browser-based code editor with a live preview and an AI coding assistant. Built with React, TypeScript, and Vite — and lovingly overengineered for April Fools.
- Monaco Editor — The same editor that powers VS Code, with full syntax highlighting and optional Vim keybindings
- Virtual File System — A full in-browser file tree with create, rename, delete, drag-and-drop, copy/paste, and duplicate support, all persisted to IndexedDB
- Live Preview — Instantly renders your HTML, CSS, and JS in a sandboxed iframe right next to the editor
- Beaver Code AI — An AI chat assistant (powered by OpenRouter) that reviews and writes code in your VFS, with accept/reject diffs per file change, reasoning controls, and live token/context usage stats. Deeply in character as a beaver 🦫
- Multi-Project Management — Create, switch between, and manage multiple projects, each with their own isolated file system and chat history
- Resizable Panels — Drag to resize the sidebar, editor, preview, and chat panes to your liking
- Command Palette — Quick-access commands via
Ctrl+P/Cmd+P - Animated Intro — A smooth iris-wipe intro animation on first load
Using Bun:
bun installbun run devOr:
bun devThen open http://localhost:5173 in your browser.
Beaver Code AI uses OpenRouter to power its chat. You supply your own API key — nothing is hardcoded or sent anywhere except directly to OpenRouter.
- Sign up at openrouter.ai and generate an API key
- Open Beaver Code in your browser
- Click the AI Chat button (bottom-right) to open the chat panel
- Click the settings/gear icon inside the chat panel
- Paste your OpenRouter API key and enter a model name (e.g.
anthropic/claude-sonnet-4.6,openai/gpt-5.4,z-ai/glm-4.5-air:free) - Use the chat settings panel to inspect OpenRouter model metadata, toggle thinking, and pick the available effort/detail profile for the current model
- Start gnawing on some code 🪵
Your API key and model preference are saved to localStorage in your browser only.
| Shortcut | Action |
|---|---|
Ctrl+B / Cmd+B |
Toggle sidebar |
Ctrl+Shift+E / Cmd+Shift+E |
Toggle code editor panel |
Ctrl+Shift+\ / Cmd+Shift+\ |
Toggle AI chat panel |
Ctrl+Shift+; / Cmd+Shift+; |
Toggle full-screen AI chat |
Ctrl+Shift+T / Cmd+Shift+T |
Toggle thinking |
Ctrl+Shift+{/} / Cmd+Shift+{/} |
Switch thinking effort |
Ctrl+P / Cmd+P |
Open file switcher |
Ctrl+Shift+P / Cmd+Shift+P |
Open command palette |
| Command | Description |
|---|---|
bun run dev |
Start the development server with HMR |
bun run build |
Type-check and build for production |
bun run preview |
Preview the production build locally |
bun run lint |
Run ESLint across the project |
| Tool | Purpose |
|---|---|
| React 19 | UI framework |
| TypeScript | Type safety |
| Vite | Build tool & dev server |
| Tailwind CSS v4 | Styling |
| Monaco Editor | Code editor |
| monaco-vim | Vim keybindings for Monaco |
| Framer Motion | UI animations |
| anime.js | Intro animation |
| idb-keyval | IndexedDB persistence |
| OpenRouter | AI model routing for the chat |
src/
├── components/
│ ├── Editor.tsx # Monaco-based code editor
│ ├── Preview.tsx # Live iframe preview
│ ├── Sidebar.tsx # File tree & project sidebar
│ ├── Chat.tsx # AI chat panel
│ ├── CommandPalette.tsx # Command palette overlay
│ ├── Intro.tsx # Animated intro screen
│ ├── ProjectManagerModal.tsx
│ ├── SettingsModal.tsx
│ └── Skeletons.tsx # Loading skeletons
├── store/
│ ├── VFSContext.tsx # Virtual file system state & persistence
│ ├── LayoutContext.tsx # Panel layout state
│ ├── EditorSettingsContext.tsx
│ └── vfs.ts # VFS types & initial file tree
└── utils/
└── projectStorage.ts # IndexedDB project storage helpers