Onlook is an open-source visual editor for React applications that has been dubbed the Cursor for Designers. With 22,000+ GitHub stars and Apache 2.0 licensing, it bridges the gap between design and development by providing a WYSIWYG canvas that works directly with your existing codebase — not static mockups, not a proprietary format, but your actual TSX and CSS files. When you drag, resize, or restyle an element in Onlook, the underlying React code updates in real time. What you design IS the code, and changes become mergeable pull requests.
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 your existing React, Next.js, or Vue project — no rebuilding, no migration required. Start designing in minutes using an infinite canvas with real components. Click any element to highlight the exact JSX line. Drag and drop to rearrange components within their parent containers. Use the layers panel to navigate component hierarchy. Preview code side-by-side with the visual design. Right-click any element to extract it into a reusable component with an auto-generated TSX file and Storybook stub.
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.
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.