Airship: Visual Canvas for Claude Code and Codex

A Design Canvas That Leaves Your Project Untouched

Most AI coding agents operate from a text prompt with no view of the running UI. Airship addresses this by placing a Figma-style canvas in front of the dev server you already have running. Click an element in the canvas, describe the change, and the agent edits the source file directly. The canvas is not a screenshot: every frame is a live browser window, which means interactions like form filling and navigation work normally inside it.

The tool targets developers who are already using Claude Code, Codex, or OpenCode and want to work visually without setting up a separate design environment. It adds nothing to the project's bundle, config, or dependencies. The README states explicitly: "No plugin. No config. Nothing added to your dependencies or your bundle." The only requirement outside the project is a Node 22.13.0 or higher installation to run the CLI.

How the Overlay Connects to a Running Server

Airship opens a new browser port above whichever port your dev server occupies. When you click an element, Airship resolves the file and line number that produced it using source maps from the running server. It passes that context to the chosen agent, streams the diff back, and keeps a copy of the previous file version so undo works. The underlying connection is a proxy: Airship does not rebuild your app or start a second server with different output.

For Claude Code and OpenCode, the previous file version is held in memory by Airship itself. For Codex and OpenCode in undo scenarios, the prior version comes from Git, which means undo on those agents requires a Git repository. Without one, the undo action has nothing to restore. This is a concrete operational constraint the README documents explicitly.

Installing Airship and Starting the First Session

The README gives three installation paths. The first requires nothing beyond Node and npm:

npx @airshiplabs/cli --target 3000

Run this while your app is already serving on port 3000. Airship connects to that port and opens the visual editor on the next free port. For a persistent global binary:

npm i -g @airshiplabs/cli
airship --target 3000

If you want Airship to also start and stop your dev server, use the `--exec` flag with the command you would normally run:

airship --exec "pnpm dev"

When `--exec` is used, Airship reads the port from `package.json` so `--target` is not needed. The tool uses whatever authentication is already configured for Claude Code, Codex, or OpenCode: no additional credentials are required. Run `airship doctor` if the agent does not connect on first launch.

The package is published on npm as `@airshiplabs/cli`. Works with Vite, Next.js, Remix, Rails, or any framework that serves HTML over HTTP.

Canvas Mode, Inline Mode, and the Editor Controls

Airship offers two viewing modes for the same editor. Canvas mode (the default) places the app inside one or more pannable frames, one per device size. All frames show the same route, so mobile and desktop layouts are visible side by side. Inline mode puts the editor toolbar on top of the app's own page in a single window, matching the viewport the app already occupies. Switch between them from the bottom bar at any time; pressing `?` in the editor lists all keyboard shortcuts, and `Cmd+K` (or `Ctrl+K` on Windows and Linux) opens the command palette.

Within Canvas mode there are two sub-modes. Edit mode is element-focused: hover to highlight, click to select, and the agent panel and inspector open on either side. View mode suspends element selection so the page is fully interactive. A frame list appears on the left and a minimap in the bottom-right corner. The minimap's indicator drags to pan the canvas, and clicking anywhere else on the map jumps there. The panel arrangement is remembered per mode, so switching back to Edit mode restores the inspector exactly as you left it.

The inspector has three tabs for the selected element: Edit (position, size, spacing, layout), CSS (the box model and the rules actually hitting the element), and DOM (the tree with drag-to-reorder).

Choosing an Agent: Claude, Codex, and OpenCode

Airship supports three agents, and the differences are not cosmetic. Claude Code and OpenCode stream edits word by word so you see changes as they arrive. Codex delivers the complete reply at once when it finishes. Budget controls like `--max-turns` and `--max-budget` work with Claude but are ignored by Codex and OpenCode. The `--effort` flag works with Claude and Codex but is ignored by OpenCode.

The `--safe` flag changes behavior per agent. For Claude Code it prompts for approval before each edit or command. For Codex it activates a real sandbox. For OpenCode it asks before each action. The README's comparison table is the authoritative reference:

airship --target 3000 --agent codex --safe

Pass `--agent` to set the agent at launch, or switch between them inside the running editor. OpenCode must be installed separately by the user; Claude Code and Codex come included with Airship. Airship tells you at startup what features each agent does not support for that session.

What Airship Cannot Do

Airship depends on source maps to resolve element locations. A dev server that does not emit source maps gives Airship no file-and-line context, and the agent receives a weaker starting point or none at all. Production builds and static file servers are not supported: Airship is specifically a dev-server overlay.

There is no account, no telemetry, and no cloud service. The README states this as a feature, and in most cases it is. But it also means there is no history of past sessions, no shared canvases across machines, and no way to hand a session to a colleague. Teams wanting shared context or centralized audit trails would need a different tool.

Airship adds no linting, testing, or CI integration. It is purely a visual editing interface. Whether the changes the agent makes are correct, styled consistently, or safe for production is the responsibility of the developer and any existing review process.

Alternative Approach and License

Cursor is the main alternative in the AI-assisted editing space. It is a fork of VS Code that integrates AI editing directly into the editor window. Airship differs by operating as a browser overlay outside the IDE: your editor, keybindings, and extensions stay as they are, and Airship adds a visual layer on top of the running app rather than embedding inside the code editor. The tradeoff is that Airship cannot show a split view of code and preview in the same IDE window.

The repository carries an MIT license. The last push was on 2026-09-21. There are no published GitHub releases; distribution is through the `@airshiplabs/cli` npm package. Node 22.13.0 or higher is required by the `engines` field in `package.json`.

Editorial conclusion

Airship suits frontend developers who already use Claude Code, Codex, or OpenCode and want a visual reference for element-level edits without switching to a design tool or changing their build setup. It is the wrong choice for teams that need cloud history, shared sessions, or collaboration features, since Airship keeps everything local and has no account system. Before adopting it, verify that your dev server emits source maps: without them Airship cannot resolve file and line numbers, and the agent receives no starting context for edits. Node 22.13.0 or higher is required.

Frequently asked questions

Official sources

1. 0xnyn/airship on GitHub
2. Issues
3. License: MIT
4. Project website
5. README