Onlook reimagines the React development experience by providing a visual editing layer that sits on top of real codebases. Designers and developers can select elements, modify styles, adjust layouts, and add components through a visual interface while the tool generates clean React code that integrates directly into the project repository. Unlike design-to-code tools that produce throwaway markup, Onlook works with existing code.
The platform supports code-backed product workflows where teams want design changes to stay close to the real implementation. AI assistance helps generate component variations, suggest layout improvements, and convert visual changes into React/Next.js-oriented code patterns. The open-source architecture with 25.9K+ GitHub stars ensures transparency and a free self-hosted path for teams that want to evaluate it before using hosted collaboration features.
Onlook's current pricing model lists free self-hosting, a hosted Starter option with daily MCP-call limits, and custom Teams pricing for collaboration, security, branding, custom domains, and dedicated support. The tool focuses on keeping code as the source of truth rather than producing one-off visual exports, making it most relevant for product teams that already work in React or Next.js codebases.
