Inspector - Visually edit your front-end.

Inspector is a visual editing tool designed for front-end development, allowing users to edit their codebase directly through a browser interface. It connects seamlessly with popular coding agents like Claude Code, Codex, and Cursor, enabling developers and designers to make changes visually and efficiently. The tool is available for MacOS and emphasizes local data storage for privacy.

1. Visual Editor

   Inspector provides a visual layer for your codebase, allowing users to move elements, edit text, and leave comments directly on the page. This feature simplifies the editing process and enhances productivity.

2. Connect Your Agent

   Users can connect their Claude Code, Codex, or Cursor accounts to Inspector, integrating their preferred coding agents for a streamlined workflow.

3. Local Codebase Connection

   Inspector connects to any local codebase, making it versatile and adaptable for various projects.

4. Page Aware Screenshots

   The tool allows users to take screenshots that snap to any element on the page, providing context for changes and documentation.

5. Direct Code Editing

   Users can double-click to edit text on the page, with changes saved directly to the codebase, ensuring a seamless transition from visual edits to code updates.

6. GitHub Integration

   Inspector connects to GitHub, enabling users to create branches, commit changes, and publish pull requests directly from the platform.

1. Download Inspector and select your codebase or start from a template to begin editing.
2. Connect to your preferred coding agent (Claude, Codex, or Cursor) for enhanced functionality.
3. Use the visual editor to move elements and apply changes directly to your codebase.
4. Take advantage of page aware screenshots for better context when documenting changes.
5. Ensure to commit your changes and publish pull requests through the integrated GitHub feature.

Is there any setup required?

No setup is needed. Simply download Inspector, select your codebase, or start from a template to get started.

Is this a browser or an IDE?

Inspector functions as a browser-based IDE, allowing users to visually select elements, move them, and apply changes directly to the code.

How do I get started?

Download Inspector, connect to your coding agent, and open a project locally to begin editing.

Is Windows supported?

Currently, Windows is not supported, but users can join a waitlist for future updates.

How do I publish my changes?

Inspector integrates with GitHub, allowing users to create branches, commit changes, and publish pull requests directly from the tool.

Can designers use Inspector?

Yes, many designers utilize Inspector to push changes to production codebases effectively.

Does this work with any front-end framework?

Inspector works best with React apps, linking visual elements directly to React code, but it can be used with other front-end frameworks as well.

Price data is not available yet, please go to the official website to check.

1. Inspector offers a user-friendly interface that simplifies front-end development, making it accessible for both developers and designers.
2. The integration with popular coding agents enhances its functionality, allowing for a more efficient workflow.
3. However, the current lack of Windows support may limit its user base, as many developers work on that platform.
4. While the tool excels in visual editing, users may need to familiarize themselves with the underlying code structure to maximize its potential.
5. Overall, Inspector is a promising tool for visual front-end editing, but expanding its compatibility and features could further enhance its appeal.