UI Overview

Onlook's interface is designed to be intuitive for designers while providing powerful capabilities for editing React components.

Main Interface Areas

The Onlook interface is divided into several key areas:

Canvas: The central area where you see and interact with your components
Layers Panel: Shows the component hierarchy, similar to layers in design tools
Properties Panel: Edit properties of the selected component
Style Editor: Modify Tailwind styles through a visual interface
Code Panel: View and edit the generated code
AI Chat: Interact with AI to help generate and modify components

Use the Project Selector to switch between projects
The File Browser allows you to navigate through your project files
The Breadcrumb Navigation shows your current location in the component hierarchy

Keyboard Shortcuts

Onlook provides various keyboard shortcuts to speed up your workflow:

Ctrl/Cmd + S: Save changes
Ctrl/Cmd + Z: Undo
Ctrl/Cmd + Shift + Z: Redo
Ctrl/Cmd + C: Copy selected component
Ctrl/Cmd + V: Paste component
Delete: Remove selected component
Escape: Deselect current selection

User Guide

How to use Onlook effectively

Quickstart

Get up and running with Onlook quickly