Changelog

Getting a whole codebase ready for Overlay now takes one prompt instead of many, and new projects open with a guided setup artboard instead of a blank canvas.

One-command project setup

The new /overlay/init-project MCP prompt configures an entire project for Overlay in one pass: it finds your design system, writes the config files, registers your components and icon library, and wires up your token stylesheet and fonts. Previously you had to run register-component once per component — now it's a single prompt.

A guided start for new projects

Brand-new projects no longer open on an empty grid. They open on a getting-started artboard that walks you through the three things worth setting up first: connecting an AI agent over MCP, registering your components, and pointing Overlay at your design tokens. If you installed before this release and haven't added anything to your canvas yet, you'll see it too the next time you open the project.

Improvements

• A new button next to the editor tabs takes you back to the welcome screen — where agent setup and helpful links live — without closing your canvas, with a matching button to jump right back to the editor.
• AI agents can now reliably discover and read the annotations you draw on the canvas, even outside Overlay's own web chat (Claude Code, Cursor, Codex, and other MCP hosts included) — the clear button is now a pill showing how many are waiting for the agent.
• Fixed copy, cut, and paste not working while editing text inside a text node.
• Fixed AI agents' edits sometimes snapping an absolutely positioned element back into the surrounding auto-layout flow instead of leaving it in place.
• Fixed the editor panels sometimes not following your VS Code color theme correctly.

Bring existing components and pages onto the canvas as editable designs, get keyboard shortcuts that finally play nice with VS Code, and enjoy smoother zooming and agent workflows along the way.

Added MCP shortcut to import components into the canvas

You can now use the MCP prompt /overlay/import-component @component-path to point an AI agent at a file in your codebase and it can bring that component, or an entire page, onto the canvas as fully editable nodes – not just referenced, but expanded into real elements you can select and restyle. Components already registered in your design system come in as reusable instances, so nothing gets duplicated; anything else gets rebuilt natively from its source. It's the fastest way to get an existing screen into Overlay and keep iterating on it. Note: this differs from the /register-component prompt, which imports the chosen component without as a non-editable React node (aside from its props).

Keyboard shortcuts stop fighting VS Code

A batch of fixes lands here: opacity shortcuts, copy/paste, undo/redo, and select-all now work reliably no matter where your focus is — inside the canvas, inside a nested frame, or in a properties-panel field. Previously some of these chords fought VS Code's own keybindings (Cmd+B while editing text, for instance, used to also toggle VS Code's sidebar), or did nothing at all when the browser's native clipboard handling got in the way. Now the editor claims exactly the keys it needs and leaves everything else to the host, so nothing overlaps and nothing goes missing.

Improvements

• Fixed the canvas zoom occasionally drifting away from your content instead of staying centered on it.
• Fixed the canvas freezing briefly while an AI agent captured a screenshot.
• Improved agent guidelines. AI agents now more reliably load the full set of design rules before generating components, reducing failed imports in some hosts.

Selection stays precise, no matter your zoom level

We fixed a critical bug, whereby dragging or resizing a selected element could drift slightly out of alignment depending on your canvas zoom, your browser's zoom, or — inside VS Code — your editor window's zoom setting. All three are now accounted for, so the selection box lands exactly where you'd expect regardless of how zoomed in or out you are.

When a component can't render, your layout doesn't fall apart

If a component's key is missing from your registry, its build failed, or it crashes at runtime, Overlay used to leave you guessing — sometimes with no indication anywhere that something was wrong. Now every broken state is clearly flagged in the layers tree and the properties panel, with an explanation of what happened and, where possible, a prompt you can hand to an AI agent to fix it. The placeholder that stands in for the missing component also keeps the size it last rendered at, so the rest of your layout doesn't jump around while you sort it out.

Improvements

• Added support for importing composite shadcn/ui components — components made of several parts, like Avatar's image and fallback, Card's header/content/footer, or Sidebar's header/content/footer — as a single coherent component with real default content, instead of an empty shell or scattered duplicate parts.
• Undo now correctly reverts your first edit to a freshly inserted or imported component instead of deleting it entirely.
• Screenshot capture (used by AI agents to see your canvas) no longer hangs indefinitely when an image fails to load.
• Added a documentation link to the left panel for quick access.

Selecting and dragging on the canvas feels steadier this release, your theme now sticks where it should, and a failed load gets an actual explanation instead of a blank panel.

Smoother selection and dragging in autolayout nodes

Multi-selecting autolayout elements and dragging them around is more predictable now — transform handles land where you'd expect. Shift-clicking overlapping elements selects exactly the one you clicked instead of grabbing whatever's underneath, and absolutely positioned elements no longer get reflowed into a parent's autolayout when you didn't ask for that. You can also alt-drag a component to duplicate it, just like any other node.

A more reliable start

If the editor ever failed to load, you used to just get a blank panel with no explanation. Now you get a clear error page that tells you what went wrong. We also fixed an underlying packaging issue that could cause the production extension to fail loading in the first place.

Theming that sticks

Your canvas color scheme now persists across editor reloads instead of resetting to default, and dark-mode color tokens follow the canvas scheme properly wherever they're used. Text selection highlighting and switch toggles now match your theme too, instead of looking out of place.

Improvements

• Press Option+1 (Mac) to reveal the Overlay left panel from anywhere.
• Project fonts now load reliably from your config when you open the editor.

Find any icon in seconds and drop it straight onto the canvas — plus support for working across multiple windows.

An Icons tab for your whole icon library

Icons now have their own tab in the left panel, so you can browse a whole package visually and drop any icon onto the canvas — no need to remember its name. Point Overlay at a popular pack like lucide-react, Tabler, Phosphor, Feather, or Radix and it comes with sensible presets out of the box, or register a folder of your own SVGs as a custom library. If you work in a monorepo, icon libraries can now resolve from a specific package, so they load correctly no matter where your icons live.

Work across multiple windows

You can now open more than one Overlay window at a time and have your AI agent connect to the right one. The MCP connection hands off cleanly between windows, so agent tools keep working as you move between projects instead of getting stuck on a stale connection.

Improvements

• You can now search the Components tab to filter down to the component or icon you want instead of scrolling — and components are always on now, no flag to flip.
• Boolean component props now render as a switch instead of a text field, so toggling them is one click.
• Long prop names no longer overflow the panel — they truncate, and you can hover to see the full name.
• Selecting a node on the canvas now reveals and scrolls to it in the left-panel layer list.
• The left panel is now resizable, so you can give your layers and components more room.
• Fixed a background image re-request loop that could keep the editor busy while idle, making the canvas cooler and snappier.