Onlook is an open-source, AI-first visual code editor designed for designers and developers who want to build React applications using a Figma-like interface. It allows users to create, edit, and iterate on Next.js + TailwindCSS projects directly in the browser by interacting with live DOM elements, while simultaneously viewing and modifying the underlying code. Unlike traditional low-code tools, Onlook generates production-ready React components and maintains a tight feedback loop between visual design and source code. This tool bridges the gap between design and development, enabling non-developers to build functional web apps while keeping engineers in control of the codebase. It’s ideal for prototyping, rapid iteration, and collaborative design-to-code workflows.
Built on a modular architecture that uses Docker-based sandboxes to run and instrument code, Onlook maps UI elements back to their source in real time. This allows users to right-click any element on the page to jump directly to its code, edit styles visually via a Tailwind inspector, or use AI prompts to generate new components. The platform is focused on Next.js and TailwindCSS for now, with plans to expand to other frameworks. With over 24,500 stars on GitHub and active community contributions, Onlook is positioned as a powerful open-source alternative to proprietary tools like Bolt.new, V0, and Figma Make.
What You Get
- Visual DOM Editing - Directly drag, drop, and modify elements in the browser preview; changes are instantly reflected in React JSX and Tailwind CSS code.
- AI-Powered Code Generation - Use natural language prompts to create new pages, components, or layouts; the AI understands context and generates production-ready React + Tailwind code.
- Real-Time Code Preview - Side-by-side editor showing live DOM updates alongside the source code, enabling precise control over styling and structure.
- Project Branching - Experiment with design variations using branching, allowing non-destructive iteration without affecting the main codebase.
- Tailwind Style Inspector - Visually adjust spacing, colors, typography, and layout properties through an intuitive UI that auto-generates Tailwind classes.
- Image-to-Code - Upload images to use as visual references; Onlook’s AI interprets the design and generates matching React components with accurate styling.
- Checkpoint System - Save and restore project states at any point, enabling undo/redo-like functionality across visual and code changes.
- CodeSandbox Integration - Projects run in a containerized environment using CodeSandboxSDK, enabling safe execution and real-time code analysis.
- One-Click Deploy - Generate shareable links or connect custom domains to deploy your app without leaving the editor.
- Component Detection - Automatically identifies and extracts reusable components from your UI, making it easy to refactor and reuse elements.
- CLI Support - Run development commands directly from the terminal within the editor, including starting the dev server and managing dependencies.
Common Use Cases
- Building a marketing landing page from a Figma mockup - A designer uploads a Figma screenshot, uses AI to generate the layout in React + Tailwind, then fine-tunes typography and spacing visually before sharing a live link with stakeholders.
- Rapid prototyping of an admin dashboard - A developer uses Onlook to quickly build a data-heavy interface by dragging and dropping tables, charts, and forms while seeing real-time code updates — reducing setup time from hours to minutes.
- Problem: Stuck between design and dev handoffs → Solution: Onlook - Designers make visual edits directly in the browser, and developers review the generated code without needing to recreate the design manually.
- Team workflow: Non-technical stakeholders iterating on UI - Product managers and marketers adjust button colors, copy, or layouts using the visual editor, while developers retain full access to the underlying code and can merge changes via GitHub.
- Iterating on a mobile-first e-commerce product page - A team uses image references to match an existing high-fidelity design, then uses AI prompts like ‘Make the CTA button red and increase padding’ to refine elements without touching code.
- Educational use: Teaching frontend fundamentals - Instructors use Onlook to visually demonstrate how Tailwind classes affect layout and styling, helping students understand CSS-in-JS concepts interactively.
Under The Hood
Onlook is a modern development tool that merges AI-powered UI generation with traditional code editing, aiming to streamline the transition from design to implementation. It provides a collaborative environment where developers can visually build interfaces while maintaining full control over the underlying code structure.
Architecture
The project adopts a monorepo approach with a layered architecture that clearly separates frontend and backend concerns. This modular design enables scalable development and enhances reusability across components.
- The system is organized into distinct modules that encapsulate specific functionalities
- Component-based UI rendering and store-driven state management are core design patterns
- The architecture supports extensibility through modular stores and engine components
Tech Stack
The tech stack is built around a modern TypeScript ecosystem with Next.js as the primary framework. It integrates a wide array of tools and libraries to support full-stack development with AI and real-time collaboration features.
- Built in TypeScript using Next.js 16 and React 19 for frontend rendering
- Leverages Supabase for database and authentication, alongside AI SDKs like @ai-sdk/react
- Employs Bun as runtime, Storybook for documentation, and Vitest with Playwright for testing
- Uses ESLint and TypeScript for linting and type safety
Code Quality
The codebase reflects a mature testing strategy with broad coverage and consistent error handling practices. While the project maintains strong structural conventions, some technical debt remains in the form of duplicated logic and overuse of mocks.
- Comprehensive test suite covers various scenarios and edge cases
- Try/catch blocks and exception handling are consistently applied across modules
- Code follows established conventions with moderate consistency
- Technical debt is present in duplicated logic and mock-heavy test files
What Makes It Unique
Onlook stands out by combining AI-driven UI composition with real-time collaboration and extensible component architecture. Its integration of developer-centric tools and serverless infrastructure sets it apart from typical no-code platforms.
- AI-assisted UI composition synchronizes visual design with backend logic and state
- Modular store architecture enables dynamic component generation and seamless feature integration
- Supabase integration enables real-time data synchronization and collaborative workflows
- Embedded IDE and hotkey support enhance developer workflow within existing environments