Onlook

Onlook is an open-source visual editor for React and TailwindCSS applications, often described as 'Cursor for Designers.' It enables teams to design visually while writing real, production-quality code that integrates seamlessly with existing component libraries and design systems. Unlike traditional design tools that export static mockups, Onlook works directly in your codebase, making the design the source of truth. The tool is built for product teams who want to bridge the gap between design and development. Designers can visually edit React components, apply styles, and see changes reflected in real code, while developers can collaborate in the same environment, using AI-powered assistance to generate and refine code. Onlook supports advanced features like branching, version control, reusable project templates, and AI chat for responsive fixes. What sets Onlook apart is its open-source nature, AI integration, and focus on real code workflows. It uses AI to help with styling, layout, and even fix responsive issues via natural language prompts. The tool is specifically optimized for larger screens and currently supports Next.js, React, Storybook, and shadcn/ui out of the box. Onlook is free for individuals and small teams with a starter tier that includes 200 MCP calls per day and unlimited AI chat. For teams, custom pricing provides advanced features like SSO, custom domains, and dedicated support. The hosted cloud version requires booking a demo for team setup.