Changelog

Fine-tune colors with a new opacity slider and roomier controls, and keep image references working for everyone on your team.

Color controls with opacity

The color popover now has an opacity slider, and hex values accept an alpha channel — so you can dial in transparency right where you pick the color instead of reaching for a separate control. The color input also stretches to the full width of the panel now, and the fields in the color panel line up cleanly.

Workspace-relative image paths

Background images can now point at a repo asset with a plain relative path (like assets/hero.png) instead of an absolute file URL. That means image references stay valid for anyone who opens the project, not just on the machine that added them.

Improvements

• You can now register a whole icon package — like lucide-react — in your project config and drop any icon onto the canvas, just like a component, and your agent can place them by name too (Lucide.ArrowRight and friends).
• Dragging a node out of an autolayout stack no longer leaves stray blue tearing artifacts on the canvas.
• Dragging a component over empty canvas no longer freezes a hug-sized autolayout parent into a fixed size as a side effect.
• Component props your agent sets outside the configured schema now show up in the right panel as long as they carry a value.
• Dropdowns and popovers now match the panel background instead of showing through with the wrong theme.

Jump straight to a component's source file, keep your shortcuts working without VS Code stealing them, and let your AI agent set up Overlay's config on its own.

Open a component's source file from the panel

Select a component on the canvas and hit "Open source file" in the right panel to jump straight to its code — no more hunting through the file tree to find where it's defined.

Agent-assisted project setup

Your AI agent can now create Overlay's .overlay config files for you and register a component into it, so getting a new project wired up takes one request instead of manual file editing.

Improvements

• The left panel stays snappier while dragging or reparenting layers in large files.
• Wrapping a selection in a frame (⌘⌥G) now correctly includes components, not just frames and text.
• Editor shortcuts like Group (⌘⌥G) and Bold (⌘B) used to get intercepted by VS Code's own commands while the canvas was focused. Overlay now claims those chords first, so they always do what you expect on the canvas.
• Fixed component position drifting to the parent's corner when the component itself renders a positioned wrapper.
• Toggling a layer's Absolute position no longer leaves its selection box or sizing stuck in the wrong place.
• Toolbar tools now show tooltips, and the rectangle tool is renamed to "Frame" to match what it actually creates.
• The panel tab icon respects your VS Code theme again.

Connect your AI agent to Overlay in one click, and see your project's own fonts right in the font picker.

One-click agent setup

A new "Connect your agent" button in the left panel wires up Claude Code, Codex, or Cursor to Overlay's MCP server automatically — no manual config file editing. Click once and your agent can start reading and acting on the canvas. If you've already connected by hand, the button updates your entry in place so nothing else is disrupted.

Project fonts in the font picker

Fonts your project declares via next/font/google (or any font source the extension can detect) now appear at the top of the font picker under a "Project Fonts" group. Choosing one loads it from Google Fonts, so the canvas matches what your app renders.

Bugfixes

• Pasting text between text layers now preserves bold, italic, and underline — no more stripped formatting after a copy/paste.
• Text elements with the Absolute toggle enabled now correctly break free of their flex parent, matching the behavior that frame elements already had.
• The selection box no longer drifts after you add or remove a sibling element from a flow container.

A packed two weeks: format text directly on the canvas, feel dragging get noticeably smoother, and watch AI-generated designs stop falling back to white.

Rich text editing

Text layers now support inline formatting. Select any run of text while in deep-edit mode and toggle it bold, italic, or underlined right on the canvas — no need to split a label into separate layers. Formatting survives AI edits and round-trips cleanly through copy/paste.

Absolute positioning inside flex containers

Elements placed inside auto-layout frames can now break free of the flow. Turn on the new Absolute toggle in the position panel and the element sits at the coordinates you set, while the siblings around it reflow as if it weren't there. Useful for badges, tooltips, and any overlay that needs to float over its parent without pushing other content aside.

AI agent available earlier

The AI agent integration now activates as soon as any Overlay panel is open in VS Code — not only when the main canvas is in view. If you have the left panel open while the canvas is loading, your agent can already start reading and acting on the design.

Improvements

• Dragging and resizing are noticeably smoother on busy designs — the canvas now skips a large category of redundant work on every pointer move.
• Modern color formats like oklch (the Tailwind v4 / shadcn default) now render correctly instead of silently falling back to white.
• Selecting text inside an element no longer accidentally moves it.
• Inserting components via the AI agent produces significantly fewer parsing errors.

Reorganize your design by dragging rows in the layer tree, get notified when a new version of Overlay is available, and count on the component bundler to recover from errors rather than getting stuck.

Drag to reorganize layers

Drag rows in the left panel to reparent and reorder your layers. A guide shows where the layer will land, collapsed groups open as you hover, and the list auto-scrolls when you drag near the edge. Dropping onto the empty area at the bottom moves a node to the root level.

Extension update notifications

The extension now checks for new versions and lets you know when one is available, directly from the left panel. No more manually checking the Marketplace to stay up to date.

More reliable component bundler

The bundler now ships cross-platform native binaries, fixing a class of crashes that appeared when the toolchain failed to load on some machines. If something does go wrong, the bundler recovers instead of entering a crash loop, and the exact error is surfaced in the UI so you know what to fix.

Improvements

• MCP port conflicts now appear as a clear banner in the left panel instead of failing silently.
• Interactive elements inside component nodes (buttons, links) no longer intercept canvas clicks.
• Restoring a deleted node via Undo now places it back at its original position in the tree.
• An /overlay MCP prompt is now available to help orient your AI agent at the start of a session.
• Unsupported Tailwind browser directives are stripped on import instead of causing errors.