// the find
onlook-dev/onlook
The Cursor for Designers • An Open-Source AI-First Design tool • Visually build, style, and edit your React App with AI
Onlook is a visual editor for React/Next.js+Tailwind apps that lets you click elements in a live browser preview and edit them directly, with AI chat that writes code alongside you. It instruments your source files to map DOM elements back to their exact code location, so visual edits write real Tailwind classes rather than inline styles. Aimed at designers who can't or won't open a code editor, and developers who want a faster way to iterate on UI.
The DOM-to-source mapping is the genuinely hard part and they've built it — right-clicking any element and landing on the exact JSX line is more useful than most design tools manage. Using CodeSandbox SDK for the sandbox layer is a smart call: they get ephemeral containers without building infra. The branching feature for design experiments maps cleanly onto git concepts without exposing git to non-technical users. Active migration history (19 Drizzle migrations visible) and CI/Chromatic setup suggest the codebase is being maintained seriously, not just starred and abandoned.
Hard lock-in to Next.js + Tailwind is a real constraint — the README admits non-Next.js and non-Tailwind support is not on the near-term roadmap, so it's a no-go for anything else. The product is pivoting toward a hosted SaaS waitlist model; the open-source repo is explicitly described as 'what started Onlook,' which means the interesting new work may drift closed-source over time. Collaboration features (comments, multi-user) are listed as unfinished, which limits use in any team larger than one. Relying on multiple third-party fast-apply model providers (Morph, Relace) adds fragile external dependencies that are outside your control when they're down or change pricing.