Onlook: The Cursor for Designers

What is Onlook

Onlook is an open-source, visual-first code editor designed for designers, described as "The Cursor for Designers." It allows users to craft websites, prototypes, and designs with AI in Next.js + TailwindCSS environments. Users can make edits directly in the browser DOM with a visual editor and design in real-time with code. It serves as an open-source alternative to platforms like Bolt.new, Lovable, V0, Replit Agent, Figma Make, and Webflow.

Main Features

• Create and Manage Next.js Apps
• Start from text or image descriptions
• Use prebuilt templates
• Import from Figma

• Start from GitHub repositories

• Visual Editing Tools

• Figma-like UI interface
• Real-time app previews
• Brand asset and token management
• Page creation and navigation
• Layer browsing
• Component detection and usage

• Image management

• Development Tools

• Real-time code editor
• Checkpoint saving and restoration
• Command-line interface
• App marketplace integration

• Local code editing

• Deployment and Collaboration

• One-click deployment
• Sharable link generation
• Custom domain integration
• Real-time collaborative editing
• Comment functionality

How to Use Onlook

Onlook works with any Next.js + TailwindCSS project. Users can:

1. Import an existing project or start from scratch in the editor
2. Use the AI chat to create or edit projects
3. Right-click elements to locate them in code
4. Draw new divs and rearrange them via drag-and-drop
5. Preview code side-by-side with the site design
6. Use the editor toolbar to adjust Tailwind styles and manipulate objects

Technical Architecture

When creating an app in Onlook: 1. Code is loaded into a web container 2. The container runs and serves the code 3. The editor receives and displays the preview link in an iFrame 4. The code is read and indexed from the container 5. Code instrumentation maps elements to their position in the code 6. When elements are edited, changes apply to both the iFrame and code 7. AI chat has code access and tools to understand and edit the code

Tech Stack

• Front-end: Next.js, TailwindCSS, tRPC
• Database: Supabase, Drizzle
• AI: AI SDK, Anthropic, Morph Fast Apply, Relace
• Sandbox and hosting: CodeSandboxSDK, Freestyle
• Runtime: Bun, Docker

Target Audience

• Web designers looking for visual design tools with code capabilities
• Developers who prefer visual editing alongside code
• UI/UX designers transitioning to development
• Teams collaborating on web projects
• Users of platforms like Webflow, Figma, or similar design tools

Project Links

• Website: https://onlook.com
• Repository: https://github.com/onlook-dev/onlook
• Documentation: https://docs.onlook.com

Use Cases and Applications

• Rapid Prototyping: Quickly create and visualize web designs
• Design to Code: Transform design mockups into functional code
• Visual Editing: Make changes to websites with a visual interface
• Collaborative Development: Work on web projects in teams with real-time editing
• AI-Assisted Development: Use AI to help generate and modify website components
• Educational Purposes: Learn web development through a visual interface
• Client Presentations: Create and share interactive prototypes with clients

The project is currently transitioning from a desktop-based Electron app to a web-based application to improve accessibility and feature set.