Wonder vs pen.dev
Full stack design harness vs WebGL canvas with AI
Wonder gives coding agents a canvas in the language they already use. Agents write code, and the Wonder canvas renders exactly that. Pen also works with coding agents, but they don’t design in code: they build each design through Pen’s own tools, translating it into objects in its separate .pen format.
In Wonder what you design is what you ship!
| Feature |  Wonder |  pen.dev |
|---|---|---|
| AI | ||
| Remote and headless MCP | Available: Remote and headless MCP; no desktop app required | Not currently available: Local MCP |
| Built-in agent chat | Available: Claude Code, Codex | Available: Claude Code, Codex, Cursor + more |
| How agents design | Writes HTML/CSS, rendered 1:1 | Translates designs into .pen objects |
| Parallel agents | Available: Unlimited, included free | Partial or external support: Up to 6 on paid Ultra |
| Manage multiple agent subscriptions | Available: Connect subscriptions, track usage and switch accounts | Not currently available |
| GitHub and local folders | Available: GitHub and local folders | Partial or external support: Via external agent |
| Image and SVG generation | Available: Images, editable SVGs and icons | Available: Image and SVG generation with monthly limits |
| Canvas | ||
| Rendering engine | HTML/CSS | WebGL |
| Live collaboration | Available | Not currently available |
| Layout support | CSS Flex, Grid, Block and Inline | Flex-style and absolute layouts |
| Preview and prototypes | Live app previews and code prototypes on canvas | Web pages embedded on canvas |
| Effects | Native CSS effects | WebGL effects, recreated in CSS |
| Plans and limits | ||
| Free plan | Unlimited parallel agents.3,000 AI-generated layers / week. | 1 agent at a time.Limited to 5 agent days per month. MCP tool calls are unlimited only on those days. |
| Pro | $20 / editor / monthBilled monthly. | $20 / user / monthBilled monthly. |
Scroll horizontally to compare both tools.