Make your
designs real

Onlook is a next-generation visual code editor
that lets designers and product managers craft
web experiences with AI

Onlook isn't ready for Mobile – Please open on a larger screen

Supported by You &
... other builders

Join the community building
the open source prompt-to-build app

What can
Onlook do?

Direct editing

Drag-and-drop, rearrange, scale, and more with elements directly in the editor.

Components

Jul
2025
S
M
T
W
T
F
S
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
Calendar
LoginSign Up
Enter your email below
Email
m@example.com
PasswordForgot?
Login
Login with Google
Card
2
Carousel
Bar Chart
Visitors last 3 months
Chart
Name
Age
City
John
25
NYC
Jane
30
LA
Table
72°
Weather
Su
Mo
Tu
We
Th
Fr
Sa
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
Components

Customize reusable components that you can swap-out across websites.

Versions

Today
New typography and layout
Alessandro · 3h ago
Update colors
Jonathan · 10h ago
Added new background image
Sandra · 12h ago
Copy improvements and new branding
Jonathan · 3d ago
Yesterday
Site version preview
Revision history

Never lose your progress – revert when you need to

Design me an inventory tracker website for my Cafe
Absolutely! Let's start by getting the general layout in place with a top navigation bar and a main content area.
Website.tsx
AI Chat

Get instant design help and feedback from AI, right in your workflow.

Brand Colors

Slate
Gray
Zinc
Orange
Amber
Lime
Green

Brand Colors

Cyan
Blue
Indigo
Violet
Purple
Pink
Rose
Brand compliance

Make your fonts, colors, and styles all speak the same language.

Layers

Navigation Bar
Models
Exotic
Roadster
Terrestrial
Logo
Reserve
Header
Endorphins
In Motion
Order Now
Video
Section
Experience excellence
The feel of something more
Layers

Select elements with precision and control.

...and so
much more

Import from GitHub or locally
Bring your existing React / Next.js / Tailwind codebase and start building
Import from Figma
Make your designs come to life with a real working product
Publish your work
Attach a custom domain and share your work with the world
Draw-in Layers
Trace divs and text directly in your designs and create code in real-time
All your favorite hotkeys
CMD/CTRL+Zand design lightning fast with all your favorite shortcuts
Use Images and media assets
Manage your graphics and images all from one place

Frequently
asked questions

You can prototype, ideate, and create websites from scratch with Onlook

When you design in Onlook you design in the real product – in other words, the source of truth. Other products are great for ideating, but Onlook is the only one that lets you design with the existing product and the only one that translates your designs to code instantly.

The code you make with Onlook is all yours. Your code is written locally directly to your files, and isn't hosted off your device.

Craft a website
for free today

No credit card required.
Cancel anytime.