Visual Edit

Visual Edit is now available in React Grab. Click any part of your app, ask for a change, and see it happen in under 20 seconds. It uses Grok Code Fast 1 through OpenCode Zen¹ . It generates a list of changes and returns the result live.

See it in action

Fast and free

React Grab is free and open source. Visual Edit is incredibly fast. We ran 20 UI editing tasks on the shadcn/ui dashboard, comparing Visual Edit against traditional AI coding tools.

Each task was timed from prompt to completion. Visual Edit averages under 6 seconds per edit. Traditional tools average around 17 seconds.

Distribution of edit times across 20 UI tasks. Visual Edit eliminates the search phase by providing exact file paths and line numbers, letting the agent jump straight to the code. See the full benchmark for methodology and detailed results.

The right way to visual edit

We think this is the correct approach to visual editing. Developers don't want a worse AI coding tool, and designers don't want a worse Figma.

Design and engineering are different modes of work with different needs.² Workflows bespoke to each will be used by both. We're designing things that are legitimately useful for daily use, that we dogfood internally and see our users use hundreds of times a day.

Getting started

Run this command at your project root and select the Visual Edit option:

npx grab@latest init

CLI will inject a script tag and configure Visual Edit automatically. Just start the dev server and you're good to go.

What's next

Visual Edit works with any agent that has a CLI or API. But we're also building Ami, a coding agent designed specifically for UI work.

Visual Edit handles the UI side: what you clicked, the component stack, the prompt. Ami handles the agent side: planning, editing, understanding your design system. Today, Visual Edit makes your existing tools faster. Once Ami is ready, it gives it a natural place to live.