Visual editing in Chrome
Use the Chrome extension to inspect live UI, select elements, adjust styles, and send the resulting changes back to your coding agent.
Handle
Handle is a live product design tool for web apps that helps you edit UI directly in code with your existing coding agent. It includes a Chrome extension for in-browser refinement and a macOS Studio app for deeper design work and publishing.
Design directly in production code
Handle is a live product design tool for web apps that lets you make UI changes directly in production code instead of translating them through mockups or tickets. It is presented as a way to explore, refine, and land interface changes with the help of an existing coding agent.
The product is split into two entry points. Handle Extension runs in Chrome for in-browser refinement on a live local app, while Handle Studio is a macOS app for deeper design and refinement work. In both flows, Handle keeps the browser or desktop workspace connected to your coding agent so changes can move back into code with less handoff friction.
Features
Live product canvas
Work against real components, data, and interactions rather than mockups so the page you edit matches the product you are shipping.
Create, refine, land workflow
Start from prompts or agent-driven drafts, then refine layout, spacing, typography, and styling with more exact controls.
Existing-agent compatibility
Keep using the agent and local dev server you already have; the source lists support for Claude Code, Codex, Cursor, GitHub Copilot, Gemini CLI, Rovo Dev, and Windsurf in the extension.
Change staging and rewind
Stage edits, preview them, and undo changes before or after they are sent to an agent in Studio.
Design-system-aware editing
Work with design tokens, components, and breakpoints so changes stay aligned with the app’s system and structure.
Use cases
Refine a live web app in Chrome
Use the Chrome extension when you want to inspect a running web app, adjust styles or layout, and pass the edit back to your coding agent without recreating the screen elsewhere.
Do deeper product design work in Studio
Use Studio when you need a fuller workspace for iterative design work on a product UI, with live previews, precision editing tools, and the ability to publish changes as a clean commit or branch.
Keep an existing agent workflow
Use Handle when your team already works in Claude Code, Codex, or another supported agent and wants UI changes to stay inside that existing workflow.
Make design-system-aligned edits
Use the token, component, and breakpoint-aware editing flow when you want changes to stay aligned with an established design system rather than being treated as one-off visual tweaks.
Prepare changes for team review
Use the publish flow in Studio when you want to summarize changes, preview them, and push a clean commit or remote branch for review.
Pros and Cons
Pros
- Lets you edit on live UI with real components, data, and interactions instead of static mockups.
- Works with existing coding agents, reducing the need to adopt a separate implementation workflow.
- Provides precision visual tools for layout and styling changes, including element selection, inline text edits, and token-aware adjustments.
- Supports both quick browser-based refinement and a deeper Studio workspace for product design work.
- Offers free and open source access with no account required according to the source.
Cons
- The pricing page returned 404, so pricing structure is not confirmed from the available sources.
- Studio is limited to macOS 13+ on Apple Silicon, which narrows the supported desktop environment.
- The source does not provide detailed information about enterprise controls, collaboration permissions, or repository integrations beyond the listed agent connections.
FAQ
How do I get started with Handle?
Handle Extension installs with `npx handle-ext@latest init` and is used in Chrome on top of your live app and local dev server. Handle Studio is a macOS app that connects to your existing Claude Code, Codex, or Rovo Dev setup.
Which coding agents does Handle support?
Handle is designed to work with existing coding agents. The source explicitly lists Claude Code, Codex, Cursor, GitHub Copilot, Gemini CLI, Rovo Dev, and Windsurf for the extension, and Claude Code, Codex, and Rovo Dev for Studio.
What platforms does Handle run on?
The extension is used in Chrome, while Studio is available as a macOS app. The source also states that Studio requires macOS 13+ on Apple Silicon.
What does Handle output when I finish editing?
Handle is built around live product UI: you create or explore changes with your agent, refine them with visual tools, and then send the changes back so they land in code or a remote branch. Studio adds publish-oriented workflows such as diff summaries and clean commits.
Is Handle priced or does it require an account?
The source shows that Handle is free and open source and does not require an account. A pricing page exists but returned 404, so no pricing plans or paid tiers are confirmed from the available evidence.
Quick Facts
- Category
- Design Tool / Developer Tool
- Platform
- Chrome extension; macOS app
- Primary users
- Design engineers, product designers, solo founders
- Supported agents
- Claude Code, Codex, Cursor, GitHub Copilot, Gemini CLI, Rovo Dev, Windsurf
- Availability
- Free and open source
- Source domain
- gethandle.ai
Handle 대안
ClawTick
ClawTick is an AI agent automation platform for scheduling jobs from the CLI, dashboard, or REST API. It is aimed at developers and teams running LangChain, CrewAI, webhook, or custom agent workflows that need monitoring, alerts, and logs.
Falconer
Falconer is an AI-powered company brain that keeps internal documentation accurate, searchable, and up to date by syncing with tools like GitHub, Slack, and Linear. It helps engineering and cross-functional teams centralize knowledge and answer questions from a shared source of truth.
Ghost
Ghost는 채팅, 코드 생성, 터미널 작업 실행을 지원하는 터미널 기반 AI assistant입니다. 무료 모델을 제공하며 Linux, macOS, Windows를 지원하는 오픈 소스입니다.
OpenFlags
OpenFlags is an open-source, self-hosted feature flag platform for modern JavaScript teams. It supports local evaluation, targeted rollouts, and controlled launches while keeping flag data in your own infrastructure.
Skills Janitor
Skills Janitor is a GitHub-hosted set of slash commands for auditing, tracking, and managing Claude Code and OpenAI Codex skills. It helps users find duplicates, broken links, and unused skills, then clean them up with self-contained commands.
Devin
Devin is an AI coding agent and software engineer that helps developers and engineering teams plan and execute complex software tasks. It is available through desktop, cloud, JetBrains, and CLI surfaces, with plans for individuals, teams, and enterprises.