See your pages on an infinite canvas. Click elements. Describe changes.
Claude Code edits your source files.
Installation • Features • Getting Started • How It Works • Configuration • Shortcuts
FrontCode is a VS Code extension that turns your sidebar into a visual website editor. It connects to your running dev server (Next.js, React, Vite, etc.) and displays your pages on an infinite canvas — like Figma, but for real code.
Click any element, describe what you want to change, and Claude Code edits your actual source files. No generated code, no abstractions — just your project, edited visually.
View all your pages side by side on a pannable, zoomable canvas. Drag page headers to rearrange. Zoom with scroll wheel. Switch between Desktop, Tablet, and Mobile presets instantly.
Expand any page to fill the entire canvas. Scroll through the full page content just like a real browser. Press Escape to return to canvas view.
Enable edit mode and click any element — it gets highlighted with an orange outline. Open the element editor, describe your change in plain language, and Claude Code modifies your source files directly.
Claude Code reads your prompt, finds the right file, makes the edit, and your dev server hot-reloads the change instantly:
Create multiple pages at once with the project setup dialog. Check "Setup full project structure" to scaffold a complete Next.js + React + TypeScript project from scratch — all through Claude Code.
Switch between Desktop (1920px), Tablet (768px), and Mobile (375px) with one click. All pages update simultaneously. Set custom width/height values in the toolbar.
Drag any page card edge to resize. Hold Shift to constrain to one axis. Dimensions update live in the page header.
Drag an image into the element editor. It saves to your project and the path is included in your prompt to Claude Code.
Connect to any dev server port — not just 3000. FrontCode auto-detects server restarts and refreshes all pages automatically.
- Download the latest
.vsixfrom Releases - In VS Code:
Ctrl+Shift+P→ "Extensions: Install from VSIX..." - Select the file and reload VS Code
git clone https://github.com/joeygiljam/FrontCode.git
cd FrontCode
npm install
npm run compile
npx vsce package
# Install the generated .vsix filenpm run devClick the FC icon in the VS Code sidebar. A Claude Code terminal starts automatically.
The toolbar shows the server URL (default http://localhost:3000). Change the port if needed and click the arrow button.
Click the New Page button. Enter page names, optionally check "Setup full project structure", and click Create. Claude Code builds the files.
Press E to enable edit mode. Click any element. Open the editor (pencil button, bottom-right). Type what you want. Hit Send. Done.
Your Dev Server (localhost:3000)
|
FrontCode Proxy (localhost:8082)
- Injects bridge script into HTML pages
- Streams all other assets directly (fast)
|
VS Code Webview (infinite canvas)
- Renders pages in iframes
- Edit mode for element selection
- Sends prompts to Claude Code terminal
|
Claude Code
- Edits your actual source files
- Changes appear instantly via HMR
FrontCode runs a lightweight proxy that injects a small bridge script into your pages. The bridge enables element highlighting, click selection, and height reporting. All code edits go through Claude Code, which understands your project structure and makes precise source file changes.
| Setting | Default | Description |
|---|---|---|
frontcode.serverUrl |
http://localhost:3000 |
Dev server URL |
frontcode.proxy.port |
8082 |
Proxy server port |
frontcode.proxy.enabled |
true |
Enable proxy (required for editing) |
frontcode.pages |
[] |
Pages to display on canvas |
| Key | Action |
|---|---|
| E | Toggle edit mode |
| R | Refresh all pages |
| Escape | Exit focus mode |
| Scroll | Zoom in/out |
| Drag | Pan the canvas |
- VS Code 1.74+
- Claude Code —
npm install -g @anthropic-ai/claude-code - A running dev server (Next.js, React, Vite, or any HTTP server)
- Node.js 16+
| Framework | Status |
|---|---|
| Next.js (App Router) | Fully supported |
| Next.js (Pages Router) | Supported |
| React (Vite) | Supported |
| Plain HTML | Supported |
Pages not loading? — Click the refresh button in the top-right corner of VS Code (circular arrow icon), or press R to refresh all pages. If that doesn't work, reload VS Code with Ctrl+Shift+P → "Reload Window".
Pages blank? — Make sure your dev server is running and the URL in the toolbar matches your port.
Pages keep growing? — FrontCode auto-detects height loops and locks them. Switch device preset or manually resize.
Port in use? — Restart VS Code or run npx kill-port 8080 8082.
Edit clicks not working? — Press E to enable edit mode (button turns green).
Extension not activating? — Open the FrontCode sidebar panel (FC icon in the activity bar). The extension activates when the panel is opened.
Source available — see LICENSE
Built by Joey Giljam