CODE WITH
YOUR EYES
See your app. Click an element. Tell Claude what to change. Pane is the AI code editor where you point at what you want to fix, not hunt through files to find it.
EVERYTHING YOU NEED.
NOTHING YOU DON'T.
Visual Inspector
Click any element in your live preview. A popup appears. Type what you want changed. Claude edits the source file. No more hunting through code to find the right div.
Live Browser Preview
Built-in Chromium browser. See your changes instantly. Auto-detects dev server URLs from your terminal output.
Claude Code
Dedicated Claude terminal runs alongside your own. Send instructions from the inspector, or type directly. Claude sees your entire project.
Clone Any UI
Browse to any website. Pane analyzes the page structure, extracts design tokens, and sends it all to Claude to recreate in your project.
Isolated Workspaces
Each project gets its own terminal, Claude session, and browser preview. Switch between projects without losing state. Run multiple apps simultaneously.
Git & GitHub
Stage, commit, push, pull. Switch between GitHub accounts. Create repos, connect remotes. All without leaving the app.
File Explorer
Navigate your project tree. Color-coded file type icons. Expand directories on demand.
IDE Launcher
Open your project in VS Code, Cursor, or Zed with one click.
FROM IDEA TO
IMPLEMENTATION
Open your project
Create a workspace, point it at a folder. Pane spins up an isolated terminal and Claude Code session automatically. Or create a new project folder right from the dialog.
Start your dev server
Run your framework in the terminal — Vite, Next, Astro, anything. Pane detects the localhost URL and loads it in the built-in preview. No copy-pasting ports.
Click what needs fixing
Toggle the inspector. Hover over your live app. Click the element that needs work. A popup appears where you type what you want changed — "make this blue", "add a shadow", "move this left".
Claude edits the source
Your instruction goes straight to Claude Code, which knows your full project. Claude finds the right file, makes the edit. Your preview updates. The element changes in front of you.
WHY WE BUILT
PANE
Visual first, files second
Most AI editors make you describe what you want changed. You type 'the header on the pricing page'. Pane lets you point at it. Your eyes already know where the problem is — your editor should too.
Every project gets its own sandbox
Separate terminal. Separate Claude session. Separate browser preview. Work on three projects at once and nothing bleeds between them. Kill one workspace, the others keep running.
Clone what already works
See a UI you like on another site? Browse to it in Pane. The clone tool analyzes the page structure, extracts colors, fonts, and spacing, and gives Claude everything it needs to rebuild it in your codebase.
Your tools, not ours
Pane doesn't replace your IDE. Open any workspace in VS Code, Cursor, or Zed with one click. Your git workflow stays the same. Your terminal is a real shell, not a sandbox. We just add the visual layer.
Free Download
START BUILDING
WITH YOUR EYES
Pane is free to use. Download, open your project, and start pointing at what needs fixing. Bring your own Claude API key.