Onlook vs Subframe
A side-by-side comparison of Onlook and Subframe, two Design tools, drawn from Ignaite's continuously-verified listings.
Compared from listings verified as of
At a glance
| Attribute | Onlook | Subframe |
|---|---|---|
| Category | Design | Design |
| Pricing | FREEMIUM | FREEMIUM |
| License (differs) | Open core | Proprietary |
| Deployment (differs) | Hybrid | Cloud |
| Platforms | Web | Web |
| Model support | Multi-model | Multi-model |
| Vendor (differs) | Onlook | Subframe |
| Capabilities (differs) |
|
|
The honest brief
Onlook
Edits your real Next.js + Tailwind code visually on an infinite canvas, keeping the codebase as the source of truth instead of exporting throwaway markup.
- Free to self-host
- Edits real code, not exports
- AI assistance for larger changes
- Works with Next.js, Tailwind, shadcn
- Hosted cloud pricing not public
- Scoped to the React/Next.js stack
- Young project (YC W25)
Subframe
Outputs deterministic production React/Tailwind from real components — what you design is the code you ship — and exposes designs to agents via MCP.
- Build from real coded components
- Exports clean React + Tailwind
- MCP hooks into Cursor/Claude Code
- Figma sync + auto design system
- Generous free tier
- Scoped to the React + Tailwind stack
- Pro is per-editor ($29/mo)
- Smaller community than Figma
When to pick which
Both cover Code generation and UI design / design-to-code.
Pick Onlook if you need AI app builder.
- AI app builder (secondary capability)
Pick Subframe if you need MCP server.
- MCP server (secondary capability)
They also differ on:
- License
- Open core · Proprietary
- Deployment
- Hybrid · Cloud