What Onlook Does
Onlook is an open-source visual editor for React and Next.js applications that has been dubbed the Cursor for Designers. With 25.9K+ GitHub stars and Apache 2.0 licensing, it bridges the gap between design and development by providing a visual canvas that works with real code-backed interfaces — not static mockups or a proprietary format. The current site emphasizes AI, code, and design side-by-side, with component/layer inspection, versioning, templates, and team workflows built around the idea that the product codebase is the source of truth.
Architecture and Workflow
The technical architecture is elegantly simple. Onlook instruments your served bundle with data-oid attributes at build time. When you visually edit an element, it uses the oid to locate the corresponding JSX, patches it, and triggers a hot module reload. The AI layer uses Morph Fast-Apply and OpenRouter to stream code edits via diff-match-patch, showing updates simultaneously in both the canvas and the file tree. The entire stack runs on CodeSandbox SDK with Bun runtime for fast installs and hot reloads. A local Git branch tracks changes under the hood with checkpoint rollback support.
The workflow collapses the traditional design-development gap. You connect a code-backed React or Next.js project, design on an infinite canvas with real components, and keep product UI closer to the implementation. Click elements to inspect structure, navigate layers, preview code side-by-side with the visual design, and iterate with AI assistance. The current official site lists React, Next.js, Storybook, and shadcn/ui as core compatibility surfaces, so teams should validate any broader framework expectations before adoption.
AI Integration and Collaboration
AI integration is conversational and context-aware. Describe changes in plain English — make this hero section darker on hover — and Onlook generates the React and Tailwind diff, applies it, and shows the result instantly. Drop images, mockups, or documentation into the conversation as context for better AI results. The AI can scaffold entirely new features: ask it to add auth with Supabase and it generates pages, hooks, and schema wired to your existing UI. This is not generic code generation — it understands your project structure and component patterns.
Collaboration features position Onlook for team adoption. Share your canvas and leave spatial comments — annotations that are positioned on specific elements, not floating in a separate thread. Work together on designs in real time. When ready, push changes directly to your repository, review diffs before committing, and your changes become a real pull request for engineers to review and merge. No handoff, no translation, no design specs that get misinterpreted.
Tailwind and Framework Support
The styling workflow is Tailwind-native. Visually edit and apply Tailwind classes with auto-completion and real-time previews. Build mobile-first with breakpoint previews and automatic media query generation. The editor toolbar lets you adjust Tailwind styles, directly manipulate objects, and experiment with layouts. All familiar hotkeys work — CMD/CTRL+Z and everything in between. Start from any Next.js and Tailwind template and the AI understands your patterns to generate matching components.
Current official framework positioning is focused on React and Next.js. The pricing and product pages also highlight Storybook and shadcn/ui, plus real design-system, theming, branding, branching, version-control, and component-tree workflows for teams. Because the current official surface does not clearly support broad Vue or Angular production use, buyers should treat Onlook primarily as a React/Next.js visual code editor unless they verify another framework path directly with the vendor.
Open Source and Limitations
The open-source nature is a genuine advantage. The stack is Apache 2.0 licensed, self-hostable from GitHub, and built transparently. Current pricing lists Starter as free for individuals and small teams with 200 MCP calls per day, unlimited projects, unlimited AI chat, and community support. Teams pricing is custom and adds templates, branching/version control, real design-system workflows, theming and branding, custom domains, advanced security, SSO, audit logs, admin controls, dedicated support, and custom integrations.
Limitations are practical. The tool is primarily optimized for React and Next.js product workflows, with official surfaces emphasizing Storybook and shadcn/ui compatibility. Visual editing of complex stateful components with hooks and context can be less intuitive than simple layout changes. AI code generation is not infallible, so complex features still require manual adjustment and code review. Hosted team features also use custom pricing, so organizations should expect a sales/demo step before standardizing around it.
The Bottom Line
Onlook represents a meaningful rethinking of how designers and developers collaborate on React applications. By working with code-backed interfaces rather than static mockups, it can reduce the handoff problem that slows product teams. For teams building React or Next.js applications, Onlook is a practical candidate for visual editing and AI-assisted UI iteration. Start with the free self-hosted or Starter path, verify the workflow against a real project, and evaluate Teams features when collaboration, security, and design-system governance become important.
