Skip to content

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

Onlook

Design

The Cursor for designers — edit React apps visually in real code.

View Onlook

Subframe

Design

AI-native design tool that ships production React + Tailwind code.

View Subframe

At a glance

Feature comparison of Onlook and Subframe
AttributeOnlookSubframe
CategoryDesignDesign
PricingFREEMIUMFREEMIUM
License (differs)Open coreProprietary
Deployment (differs)HybridCloud
PlatformsWebWeb
Model supportMulti-modelMulti-model
Vendor (differs)OnlookSubframe

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