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.