Onlook is a visual code editor designed for designers and frontend developers who want to build React applications without leaving their design workflow. It bridges the gap between Figma-style visual design and real React/Next.js/TailwindCSS code by allowing users to drag, drop, and style elements visually while seeing live code updates. This eliminates the need for manual handoff and reduces development time for prototypes and production apps.
Built with Next.js, TailwindCSS, Supabase, and Drizzle, Onlook runs in the browser using a CodeSandbox SDK-powered container to instrument and sync DOM elements with source code. It supports AI-powered edits via OpenRouter and Morph, and integrates with GitHub for project import and deployment. The tool is optimized for teams collaborating on visual interfaces and is extensible to other frameworks in the future.
What You Get
- Visual DOM Editor - Drag, drop, and resize elements directly on the live preview with real-time code updates in React + TailwindCSS, eliminating manual CSS editing.
- Real-time Code Editor - Side-by-side code view that syncs with visual changes, allowing developers to inspect and edit the exact component or style being modified.
- AI-Powered Edits - Use natural language prompts to generate or modify UI components, fix layout issues, or add features like responsive columns or badges.
- Figma-like Design Tools - Layer navigation, brand token management, image asset library, and page navigation mirroring Figma’s interface for familiar designer workflows.
- Branching & Checkpoints - Experiment with design variations using branches and save restore points to revert changes without losing progress.
- GitHub Integration - Import existing React projects from GitHub, generate PRs, and deploy apps with custom domains using Freestyle hosting.
- Supabase & Drizzle Integration - Built-in authentication, database, and storage via Supabase with Drizzle ORM for managing user data and project state.
- AI Toolcalls & MCP Support - Enable Onlook to use itself as a tool for branch creation and iterative design improvements via AI model tool calls.
Common Use Cases
- Designing a product UI without writing code - A product designer uses Onlook to turn Figma mockups into a working Next.js prototype by visually dragging elements and adjusting Tailwind classes.
- Rapid prototyping for startup MVPs - A founder builds a landing page with AI prompts like ‘Add a villain verification badge system’ and deploys it live in under 10 minutes.
- Team collaboration on frontend code - A designer and developer work simultaneously: the designer adjusts layouts visually while the developer reviews and refines the generated React components.
- Fixing responsive bugs in production - A frontend engineer uses AI to describe a mobile layout issue (‘The masonry layout is breaking on mobile’) and Onlook auto-generates and applies the fix in real time.
Under The Hood
Architecture
- Monorepo structure with clearly delineated workspaces for web, backend, and database layers, enabling independent development and deployment cycles
- React/Next.js frontend employs stateless, prop-driven components that enhance reusability and testability
- Backend and database concerns are isolated into dedicated packages with disciplined migration and seeding workflows
- Dependency injection is supported implicitly through workspace-aware module resolution, though no formal DI container is present
- Dockerized deployment with multi-stage builds and health checks ensures consistent production-grade infrastructure
Tech Stack
- Monorepo managed with Bun, unifying tooling across web, backend, and database workspaces
- Next.js 14+ with TypeScript, server components, and standalone builds deployed via custom Docker images
- Custom database tooling with Bun-driven migrations, seeding, and schema generation, suggesting a Prisma-like system
- Comprehensive tooling including ESLint, Vitest, Zod, and Vercel integrations for type safety, testing, and deployment
- Frontend enhanced with Framer Motion, Next-Themes, MobX, and Radix UI integrated with Tailwind’s cn utility for theme-aware animations and components
Code Quality
- Extensive test suite leverages AST manipulation to validate JSX and CSS transformations with high precision
- Strong type safety enforced through TypeScript and custom parser utilities that ensure structural correctness
- Clean separation of concerns in utilities for fonts and images, promoting maintainable evolution
- Consistent naming and modular test structures mirror production code, improving readability and reliability
- Robust AST traversal and attribute validation ensure error resilience, though custom error classes are absent
What Makes It Unique
- Native AI agent architecture with built-in checkpointing and usage tracking, eliminating external LLM orchestration dependencies
- Real-time visual editor with intelligent snap-to-guidelines that detect layout relationships without external libraries
- Automated domain verification with TLD parsing and conflict-aware DNS record management
- Unified trace ID propagation across chat, analytics, and usage systems for end-to-end observability
- Server-side chat routing with embedded rate-limiting and usage accounting, enforcing billing policies at the API layer