The AI for React
Frontend Development
Beta
Use AI to build your app
Prompt Onlook's AI to build, design, and experiment with your ideas. Go beyond pretty pixels and make your frontend interactive.
Styles
Chat (beta)
map_card.tsx
button.tsx
When this is clicked, make the map card appear and have an active background
I updated the Map Card to appear when the button is clicked, and I updated the background property to be the right style when it is active.
Ask follow up questions or provide more context...
Variables
Assets
Color Styles
blue-100
blue-200
blue-300
blue-400
blue-500
blue-600
blue-700
blue-800
teal-100
teal-200
teal-300
teal-400
Teal / 500
Teal / 600
Teal / 700
Teal / 800
Variables
Assets
Text Styles
title1
36/Auto
title2
24/Auto
title3
20/Auto
largePlus
18/140
large
18/140
regularPlus
15/140
regular
15/140
smallPlus
13/140
small
33/140
microPlus
11/Auto
micro
11/Auto
Use the styles already in your codebase
Onlook's frontend AI builds new features with the same styles you use throughout your app. Fewer revisions, faster results.
Setup and start prompting in seconds
Bring your own projects into Onlook or start a new React app from Onlook. Use AI to generate a new project from scratch, or to add new styles and features.
Import existing project
Work on your React UI
New Onlook Project
Start a React App
Layers
Side menu
Primary navigation
Opener
H2
Welcome to your Dashboard
Overview
Client Logo
Actions
Share
New project
Projects section
Controls
Filter
Sort
Project • 12 instances
Polish the final look-and-feel of your AI generations
Edit the AI outputs to make your frontend look exactly how you want without re-prompting every time.
Design and Code in the source of truth
Onlook writes code as you prompt and design, always using the latest version.
It's time for a change. Or two or three.
Test out new ideas, new styles, new copy, new layouts, and more
