Works withClaude CodeCodexOpenCode

Visual editor for your codebase

Airship lets you edit your running app visually with Claude Code, Codex, or OpenCode. Select an element, describe the change, and watch the source update.

Get started

How it works

A visual canvas connected to your codebase.

Wrap your dev server with a visual canvas.

Airship brings your running app into a Figma-like visual workspace. Work directly with the real UI, explore layouts, and experiment across device sizes without rebuilding it in a separate design tool.

Bring your coding agent into the canvas.

Use Claude Code, Codex, or OpenCode directly from Airship. Select an element, describe the change, and get the resulting code diff without switching between tools.

Give your agent the full context.

Airship resolves your selection to its source file, including the exact changes you made.

airship → agent
## Selection
button.cta-primary  ·  122 × 45
src/components/sections/hero-section.tsx:24  ·  <CtaButton>

## Pending tweaks
  border-radius  6px  →  9999px     scrubbed in the inspector

## Frames
  Desktop  1440 × 900   /
  Mobile    393 × 852   /        ← selection made here

## Tools
  get_element_context()   re-read the selection at any point
  Read · Grep · Edit       rooted at --cwd

> Make this warmer.

Get started

Airship runs alongside your project without adding anything to the codebase.

  1. Start your app the way you always do.

    pnpm dev    # http://localhost:3000

    Works with Vite, Next, Remix, Rails, or anything that serves HTML over HTTP. No plugins required.

  2. Point Airship at your dev server.

    npx @airshiplabs/cli --target 3000

    Airship connects to the port you're already running and opens the visual editor.

  3. Bring your coding agent.

    npx @airshiplabs/cli --target 3000 --agent codex --safe

    Pick the agent you already use and start making changes without running a separate agent interface.

Airship uses the authentication you already have configured for Claude Code, Codex, or OpenCode

Questions

Including the ones with unflattering answers.

No. Airship runs as a reverse proxy in front of your existing dev server. Nothing is added to your dependencies, config, or bundle.

Yes. Airship works with the styling system already in your project. It works with the tokens and styling conventions already in your codebase, so visual changes can map back to the values your design system already uses.

Your development build already carries information about where rendered elements came from. Airship uses those to resolve your selection to a source file, then passes them to the agent.

Airship makes your visual context visible to the agent. It passes along what you selected, where it lives in the code, which values you changed, and the frames you were working in.

Yes. Airship works with Claude Code, Codex, and OpenCode, so you don't need to change your agent just to use the visual editor.

Airship runs locally and works directly with the repository you point it at. By default, your coding agent has the same filesystem and network access it normally has. Safe mode can restrict edits to your project and block potentially destructive commands.

Every edit can be undone directly in Airship. Airship keeps the previous version of the file, so you can revert a change instantly without needing Git.

Yes. Airship gives you real viewports running the same app side by side. Make a change once and see how it affects desktop, tablet, and mobile without resizing the frame.

Yes. Git isn't required by Airship. Some agents may still use Git internally for their own diff and change tracking.

Airship runs entirely on localhost. It has no account, telemetry, or hosted service, and your code isn't sent to Airship. Your chosen coding agent handles requests using the same credentials and provider it would use from your terminal.