Onlook
Onlook
Open-source visual editor that lets designers make changes directly in a live React or Next.js codebase.
Updated
The read
Onlook renders a live preview of a React or Next.js application and lets designers drag, resize, and restyle elements visually, with every change writing directly to the actual source files rather than a separate design file. It operates on code as the single source of truth, so there is no design-to-developer handoff gap. The project has over 25,000 GitHub stars and a cloud-hosted version for teams. Because it requires a working React or Next.js project, it cannot be used to start from scratch, and cloud pricing is not publicly listed and requires a demo booking.
Where it shines
- Edits write directly to source files eliminating the design-to-code handoff gap
- Open-source core is free and self-hostable on any infrastructure
- Supports real-time multiplayer collaboration on live codebases
Worth knowing first
- Requires an existing React or Next.js project to function
- Cloud pricing requires a demo booking rather than self-serve signup
Index score
78.6
Provisional. This score is read from the product's public capability, not from the one-prompt rebuild the fully reviewed entries went through, so treat it as a placing rather than a verdict.
- Rank
- 24 of 101
- Builds
- Web
- Category
- Design-first
- Output
- Edited React or Next.js source files
- Pricing
- Free tier
- Best for
- Design-developer teams iterating visually on a live React codebase
Scores are our own editorial judgement, weighted craft 30, speed 25, control 25 and value 20.
Also worth a look
Full index- 04Framerframer.comA designer's canvas with AI doing the tedious parts.Design-firstFree tier86.3
- 10RecraftRecraftProvisionalAI image and vector generation platform with brand-style controls and editable SVG output.Design-firstFree tier82.2
- 11Subframesubframe.comProvisionalA design tool where code is the output, not an export.Design-firstFree tier81.6
