DrawDE overlays its visual editor onto the active page in VS Code's integrated browser. No application dependency, source import, or component placement is required.
Getting started
Install DrawDE and open the workspace for the application you want to change.
Start the application and open its localhost URL in VS Code's integrated browser.
With that browser debugger active, run DrawDE: Open Visual Editor.
Annotate the page, describe the change, and choose Implement.
The extension saves the task and annotated screenshot under .drawde/tasks and opens VS Code Agent chat. It bundles the browser runtime inside the VSIX, starts a 127.0.0.1 bridge on an ephemeral port, and authenticates each connection with a fresh token.
Commands
DrawDE: Open Visual Editor — inject and display DrawDE on the active integrated-browser page.
DrawDE: Disable On Current Page — remove the injected overlay.
DrawDE: Open Current Visual Task — open the latest saved task packet.
DrawDE: Inspect Native Browser Commands — list browser and chat command IDs for diagnostics.
Requirements
VS Code 1.125 or later.
A localhost page open through VS Code's integrated browser/debugger.
A VS Code coding-agent/chat provider for automatic handoff. The task is still saved locally if handoff is unavailable.
