Airship - A visual tool for editing your codebase

Airship is a visual editor designed for codebases, allowing developers to edit their running applications directly. By utilizing AI coding agents like Claude Code, Codex, or OpenCode, users can select elements, describe changes, and see the source code update in real-time. This tool aims to streamline the development process by providing an intuitive interface that integrates seamlessly with existing workflows.

1. Visual Editing

   Airship provides a Figma-like visual workspace that connects directly to your running application, allowing for real-time edits without the need for a separate design tool.

2. Integration with AI Coding Agents

   Users can leverage AI agents such as Claude Code, Codex, or OpenCode to make changes. This integration allows for a smooth transition between visual editing and code adjustments.

3. Real-time Source Code Updates

   Changes made in the visual editor are reflected immediately in the source code, enabling developers to see the impact of their modifications instantly.

4. No Plugin Required

   Airship operates as a reverse proxy, meaning it does not require any plugins or modifications to the existing codebase, ensuring a hassle-free setup.

5. Device Viewports

   The tool allows developers to see how changes affect different devices by providing real viewports for desktop, tablet, and mobile, facilitating responsive design.

6. Safe Mode

   Airship includes a safe mode that restricts potentially destructive commands, ensuring that users can work confidently without risking their codebase.

7. Undo Functionality

   Users can easily revert changes made in the editor, as Airship keeps track of previous versions of files, making it simple to undo edits without relying on Git.

1. Start by running your application as usual.
2. Use the command npx @airshiplabs/cli --target 3000 to connect Airship to your development server.
3. Select an element in the visual editor to scope your changes.
4. Describe the desired change clearly to see the resulting code diff.
5. Utilize the real viewports to test how changes appear across different devices.

What is Airship?

Airship is a visual editor that allows developers to edit their applications in real-time using AI coding agents, enhancing the development workflow.

How does Airship work?

Airship connects to your existing development server and provides a visual interface for editing elements. Users can describe changes, and the tool updates the source code accordingly.

Do I need to change my build or add plugins?

No, Airship runs as a reverse proxy and does not require any changes to your build process or additional plugins.

Can I use my existing coding agent with Airship?

Yes, Airship is compatible with Claude Code, Codex, and OpenCode, allowing you to use the agent you are already familiar with.

Is it safe to use Airship with a real repository?

Airship operates locally and does not send your code to external servers, ensuring that your code remains secure.

Price data is not available yet; please visit the official Airship website for the latest information.

1. Airship effectively simplifies the editing process for developers by providing a visual interface that integrates seamlessly with existing workflows. The ability to see real-time changes enhances productivity and reduces the need for constant switching between tools.

2. However, the reliance on AI agents may pose a learning curve for some users, particularly those unfamiliar with these technologies.

3. While the undo functionality is a significant advantage, the overall user experience could be improved with more intuitive navigation and additional tutorials for new users.

4. Overall, Airship presents a promising solution for developers looking to streamline their coding process, but further enhancements in user guidance and support could elevate its usability.