AI Agents Map

MCP Servers NEW

Categories Tags Blog Advertise

Submit

Onlook

4.6 (324 reviews)

Verified Popular

Onlook is a visual code editor that helps designers and product managers create websites using AI. It lets you design directly in the browser, blending design and code so you can build and preview web experiences faster, even without deep coding knowledge.

Start Free Trial

Overview Features Screenshots & Demo Use Cases Reviews FAQ Pricing Integrations

What is Onlook?

Who It's For

Onlook is for designers, product managers, and developers. It helps bridge the gap between creative design and actual coding. If you want to build websites and prototypes faster, this tool is for you.

What You Get

You get a visual editor to drag, drop, and style elements directly, working with code side-by-side. Use AI to generate components, get design help, and ensure brand consistency. Import existing projects or Figma designs, then publish your work.

How It Works

Onlook lets you change your website's look directly in the browser. As you design, it instantly creates the real code. You can ask the AI to build site parts or fix issues. It's open-source and works with your existing React and TailwindCSS projects.

Features & Capabilities

🤖 AI-Powered Design

AI-Assisted Web Creation

Craft web experiences and prototypes faster with integrated AI capabilities.

Instant Code Translation

Automatically converts visual designs into functional code in real-time.

AI Chat for Design Help

Receive immediate design assistance and feedback directly within the editor.

✨ Intuitive Visual Editor

Direct Canvas Manipulation

Edit, rearrange, and scale elements directly on an infinite design canvas.

Reusable Components System

Build and customize components that can be easily reused across projects.

Unified AI, Code, Design View

Work in a synchronized environment where AI, code, and design are visible side-by-side.

🚀 Seamless Development Workflow

Existing Codebase Import

Integrate and build upon existing React, Next.js, or Tailwind projects.

Figma Design Conversion

Transform Figma designs into live, working products within the editor.

Version Control & History

Track all design and code changes with the ability to revert to previous states.

Custom Domain Publishing

Deploy and share your web creations by attaching a custom domain.

🌐 Open Platform & Control

Local Code Ownership

Retain full ownership of all generated code, stored locally on your device.

Open-Source Development

Benefit from a transparent, community-driven platform that developers can contribute to.

Screenshots & Demo

See Onlook in action with screenshots and video demonstrations

Product Screenshots

Onlook

Design React websites visually with AI-powered code generation

Ready to see more?

Experience Onlook firsthand with a free trial or schedule a personalized demo.

Start Free Trial

Real-World Use Cases

Rapid Prototyping and Website Creation

Designers and product managers can quickly ideate and build functional web prototypes and full websites from scratch using AI-assisted visual editing. This eliminates the need for manual code translation, accelerating the design-to-development cycle and shipping products faster.

Industry: Web Development • User Type: UI/UX Designers, Product Managers

Seamless Design-to-Code Handoff

Onlook unifies the design and development workflow by allowing designers to craft web experiences directly in a visual code editor, with code as the source of truth. This bridges the communication gap, reduces misinterpretations, and fosters real-time collaboration between design and engineering teams.

Industry: Software Development • User Type: Design Teams, Front-end Developers, Cross-functional Product Teams

Accelerating UI Component Development with AI

Developers and designers can leverage Onlook's AI assistance to instantly generate functional and well-structured UI components from natural language descriptions. This significantly speeds up the creation of new features and ensures brand consistency through integrated styling and brand compliance tools.

Industry: Web Development • User Type: Front-end Developers, UI/UX Designers

Visual Iteration on Existing React/Next.js Projects

Teams can import their existing React, Next.js, and TailwindCSS projects into Onlook to enable visual editing and iteration. This empowers designers to make direct changes to live code and allows developers to quickly adjust layouts and styles without deep coding, streamlining maintenance and feature enhancements.

Industry: Software Development • User Type: Front-end Developers, Web Development Agencies, Design Systems Teams

Frequently Asked Questions

Need more information?

For specific questions about Onlook, pricing, or technical support, please contact the Onlook team directly through their official website.

Visit Onlook Website

Specifications

Available via:

Browser

Cloud

Built for:

Individual

Startup

Business

Complexity:

Developer

Programming knowledge required

Pricing Plans

Free

Free plan with basic features

Free

5 Daily Messages
Visual code editor access
5 projects
5 AI chat messages a day
15 AI messages a month
Unlimited styling and code editing
Limited to 1 screenshot per chat

Pro

Best for growing teams

$25

/monthly

100 Messages per Month
Unlimited projects
Deploy to a custom domain
Collaborate with your team
Turn projects into templates

Enterprise

Custom solutions for enterprises

Custom

pricing

Custom integrations
On-premise deployment options
Usage analytics
Branching
24/7 premium support
Custom SLA

✓ Free trial • ✓ Free plan • ✓ Plans from $25 / monthly • ✓ Enterprise options

Integrations

GitHub

Next.js

Google

Figma

Links

onlook.com