Onlook
The open-source visual editor for React — design directly in your real app
Overview
Onlook lets designers edit a real running React/Tailwind app visually — click any element, restyle it Figma-style, and the change writes back to your actual code. Open source, AI-assisted, and the most direct bridge between design and production UI.
Features
How to Get Started
Start at onlook.com (cloud) or self-host the open-source app. Import or create a Next.js + Tailwind project, then click-to-edit any element — commits show exactly what changed.
Pricing
Free (open source) / cloud plans
View pricing detailsFAQ
Is this another Figma?
No — Figma edits pictures of UI; Onlook edits the UI itself. Design tweaks land as code commits, no handoff.
What stacks work?
React with Tailwind is the sweet spot (Next.js best supported).
Is it production-safe?
Changes are normal code edits you review in git like any PR — safer than designers describing changes in tickets.
Read AI & Design Articles
Stay up to date with the latest trends and tips in design and AI
Learn AI Skills
Discover practical skills for using AI tools effectively