Onlook
The Cursor for Designers. An open-source AI-first design tool to visually build.
Onlook makes designing on top of your codebase effortless. Craft exceptional experiences with AI in code. 👨💻👩💻👨💻 👩💻👨💻👩💻 · · I'm using markdown "reference style" links for readability. Reference links are enclosed in brackets [ ] instead of parentheses ( ). See the bottom of this document for the declaration of the reference variables for contributors-url, forks-url, etc. This is an optional, concise syntax you may use. *** https://www.markdownguide.org/basic-syntax/#reference-style-links -->
中文 | Español | Deutsch | français | Português | Русский | 日本語 | 한국어
This is the open-source visual editor that started Onlook (Next.js + Tailwind). The hosted product we're building next, for AI-native designers, is in early access via the waitlist above.
3 Reviews
Log in to leave a review.
I love that it works against your actual codebase rather than a throwaway canvas. For inclusivity it would help to surface semantic structure and roles as you edit, so the design stays accessible by default. The onboarding was clear and never left me guessing.
Editing a real React app visually and having it write back to code is the demo I always wanted to believe in. Dragging an element and seeing a sensible diff is quietly thrilling. The selection handles could be crisper, but this closes a real gap between design and build.
As a solo founder who cannot afford a separate design pass, this lets me nudge layouts without breaking the build. The waitlist energy is real but the open source core already does useful work. It made my landing page tidier in an afternoon.