Plan 1
免费
O
Official websiteOnlook
Product information, use cases, and access for Onlook.
AI designBrand & graphic designPrototypingFree plan
Plans and pricing
- Access
- Free plan
- Paid plans from
- $0.18
- Billing
- Subscription + credits
Plan 2
$0.18
Plan 3
$5/mo
$ 0
$0
DevPrice organizes public information and does not sell Onlook subscriptions. Prices and availability are determined by Onlook.
What is Onlook?
Onlook is an open-source, visual-first design and code editor for AI-native product work. It connects a React application’s rendered interface with the code behind it, so a designer can begin with a text or image direction, import an existing project, and refine the result in a browser preview. The tool is aimed at designers and frontend developers who need to explore interfaces quickly while keeping the resulting work in code.
Its current workflow focuses on Next.js and TailwindCSS projects, with an AI chat, a real-time code editor, and visual controls for styles and layout. Onlook maps preview elements back to their locations in the project, allowing visual changes and code changes to remain connected. This makes it useful for prototype iteration, interface refinement, and handoff between visual and engineering work.
Key features of Onlook
Visually edit React projects
Select elements in the browser preview, adjust their styles, properties, or layout, and carry those changes back into the project code. This fits rapid iteration on running React interfaces.
AI-assisted creation and editing
Use the AI chat to describe a new project or an intended change to an existing one; the assistant can access the code while creating or editing it. This suits turning design intent expressed in natural language into interface changes.
Real-time design preview
The editor displays the running project in a preview window, where visual adjustments can be observed immediately and viewed alongside the code. This is useful for checking layout changes and comparing design directions quickly.
Code-location mapping
Onlook indexes the project and maps preview elements to corresponding code locations, so users can locate the implementation behind an element. This helps designers understand where a change lives and developers maintain the result.
Layout and component controls
The tool supports drawing in elements, rearranging them by drag and drop, and organizing page structure through component and layer views. It is suited to prototyping, component refinement, and exploring page hierarchy.
Development and project iteration
The project workspace includes a code editor, command-line access, checkpoints, and branching for experiments. These tools fit development workflows that require designing, running, saving, and testing variations in one place.