onlook
Onlook is an open-source visual editor for React apps that pairs an AI agent with a design-tool-style canvas, letting you edit a live Next.js/TailwindCSS app visually and in code while the changes write back to the actual source. It positions itself as a "Cursor for designers," bridging the gap between design and front-end development.
Embed badge
[](https://opensources.dev/resource/onlook)Apache-2.0Permissive — free to use in commercial and proprietary software, with attribution.View license →
Production readiness
4/5- Actively maintainedCommits in the last 6 months
- No known vulnerabilitiesNot yet scanned
- Clear, usable licenseApache-2.0 (permissive)
- Proven adoptionWidely used
- Has documentationDocumentation indexed
npm install onlookOur analysis
Onlook is an open-source, AI-powered visual editor for React/Next.js applications that combines a canvas-based design surface with an AI agent, editing real source code (TailwindCSS-styled components) rather than a proprietary format.
When to use onlook
Use it when you want designers and developers to collaborate on a real codebase, when you want to make visual tweaks to a live React app and have them reflected in source, or when you want a self-hostable, open alternative to AI app builders like v0 or Lovable.
When not to
Skip it if your stack isn't React/Next.js + Tailwind, if you need a pure code agent (use Cursor/Aider), or if you want a polished managed product with strong SLAs rather than a fast-moving open-source tool.
Strengths
- Edits the actual codebase, avoiding lock-in to a proprietary visual format
- Combines visual canvas, code editing, and an AI agent in one workflow
- Open source with a large, active community and strong star momentum
- Targets a real pain point: design/developer handoff for front-end work
Trade-offs
- Tightly coupled to React/Next.js + TailwindCSS conventions
- AI-generated/visual edits can produce messy or non-idiomatic code requiring cleanup
- Relies on external LLM providers, with associated cost and quality variance
- Still maturing; behavior on large or unconventional codebases may be inconsistent
Maturity
A rapidly growing project (~26k stars) with active development and a documented product roadmap, but still evolving; treat it as an emerging tool rather than a battle-tested enterprise product. Note the provided documentation only describes the docs site scaffold, not the product internals.
Onlook Documentation
This is a Next.js application for the Onlook documentation.
Run development server:
bun run dev
# or
pnpm dev
# or
yarn dev
Open http://localhost:3000 with your browser to see the result.
Explore
In the project, you can see:
lib/source.ts: Code for content source adapter, provides the interface to access your content.app/layout.config.tsx: Shared options for layouts, optional but preferred to keep.
RouteDescriptionapp/(home)The route group for your landing page and other pages.app/docsThe documentation layout and pages.app/api/search/route.tsThe Route Handler for search.
Documentation Structure
The documentation is organized into the following sections:
Getting Started: Quick introduction and installation guides
User Guide: Comprehensive guide for using Onlook
Features: Detailed description of Onlook's features
Tutorials: Step-by-step guides for common tasks
Developer Documentation: Technical documentation for contributors
Learn More
To learn more about Next.js, take a look at the following resources:
Next.js Documentation - learn about Next.js features and API.
Learn Next.js - an interactive Next.js tutorial.