Onlook
Open-source visual editor for React and Next.js
About Onlook
Onlook is an open-source, visual-first code editor that lets designers and product managers edit live React and Next.js apps directly in the browser. Changes made on the canvas write back to real component code, so design edits arrive as production-ready commits rather than handoff tickets. It integrates with Figma and an existing codebase.
Key Features
- Visual canvas editing on a live React app
- Writes changes back to real component code
- Figma import
- Tailwind CSS aware styling controls
- Self-hostable and open source
Pros & Cons
Pros
- Genuinely open source with no vendor lock-in
- Edits map to real code rather than an export
- Strong fit for teams already on React and Tailwind
Cons
- Limited to the React and Next.js ecosystem
- Younger project with a smaller plugin ecosystem
Best For
Onlook suits design engineers and product teams on React or Next.js who want visual editing without abandoning their existing repository and component library.
Our verdict
The best pick if you want designers editing the real codebase instead of throwing mockups over the wall — provided your stack is already React.
Categories
- Designers
- React developers
- Design engineers
Tags
- #open-source
- #react
- #nextjs
- #visual-editor
- #design-to-code
Show off your listing
Embed this badge on your site to link back to your BestAIBuilder.org listing.
<a href="https://bestaibuilder.org/tools/onlook" target="_blank" rel="noopener"><img src="https://bestaibuilder.org/badges/listed.svg" alt="Listed on BestAIBuilder.org" width="220" height="44" /></a>Are you the founder of Onlook?
Claim this listing to add screenshots, update your description, and get a Verified badge.