AI Features — Onlook — Onlook

AI Design Tools for React Development

Build React Apps with AI That Understands Your Code

Onlook's AI doesn't just generate code—it understands your React components, your design tokens, and your project architecture, so every change fits seamlessly into the codebase your team already maintains.

26.7k+ GitHub stars

YC W25

Open Source

Villainterest - Product Notes

Design with AI on an infinite canvas

Craft, preview, and iterate with AI to ship better websites and prototypes faster than ever.

Native design tool features that work 1:1 with code.

A true developer tool for designers, helping you code without knowing anything about code.

AI for React codebases

AI that edits your real components

Onlook's AI reads your existing React codebase — your components, your design tokens, your Storybook setup — and writes changes that look like your team wrote them. Not generated boilerplate. Real edits to real files.

Visual AI Design Tools

Collaborate with AI on a Visual Canvas

Select any element and choose to edit it yourself or work together with AI. Unlike pure chat-based tools, you maintain full visual control while AI assists with the heavy lifting, creating a seamless collaboration between human creativity and AI capability.

AI Design System Management

Maintain Design System Consistency

AI automatically applies your brand guidelines, component patterns, and design tokens to ensure every element stays on-brand and consistent across your entire application, eliminating design drift and maintaining professional polish.

AI Design Tools with Visual Control

Visual Design Control Supercharged with AI

Get the precision of visual editing with the speed of AI generation. Design with complete creative control while AI handles the heavy lifting - from maintaining brand consistency to generating responsive layouts that match your exact vision.

Instant Visual Feedback

See AI-generated components appear in real-time as you describe them, with immediate visual updates for every change you make.

Component Library

AI automatically creates reusable components from your designs and suggests smart combinations from your existing library.

Global Styles

Define your brand colors, fonts, and spacing once - AI applies them consistently across every component it generates.

Responsive Breakpoints

AI builds mobile-first components that automatically adapt to any screen size with proper breakpoints and fluid layouts.

Layer Management

Navigate your app structure through an intuitive layer panel - select any element to edit manually or collaborate with AI.

Import Templates

Start with any React codebase and let AI understand your patterns to generate matching components.

Frequently asked questions

What is Onlook?

Onlook is a visual editor for designers working in a real React codebase. Designers get an infinite canvas of the components their team already maintains and shape the product with AI as the editor. The code is the source of truth, so what you build on the canvas is the real product, not a mockup.

What can I use Onlook to do?

Onlook is great for creating websites, prototypes, user interfaces, and designs. Whether you need a quick mockup or a full-fledged website, ask Onlook to craft it for you.

How do I get started?

Getting started with Onlook is easy. Simply sign up for an account, create a new project, and follow our step-by-step guide to deploy your first application.

Is Onlook free to use?

Onlook is free for your first prompt, but you're limited by the number of messages you can send. Please see our Pricing page for more details.

What is the difference between Onlook and other design tools?

Onlook is a visual editor for code. It allows you to create and style your own creations with code as the source of truth. While it is best suited for creating websites, it can be used for anything visual – presentations, mockups, and more.