Table of Contents

1. Introduction
2. Real-time design edit
3. Code-first approach
4. Compatible with existing React projects
5. Benefits of using Onlook
6. Prerequisites
7. Project setup
8. Understanding the Onlook interface
9. Creating and managing components

---

Introduction

Onlook is a React visual editor that bridges the gap between design and development, allowing developers to integrate design features into their React projects while maintaining full control. It has gained popularity with over 4.2k Github stars.

Real-time design edit

Onlook offers real-time editing capabilities beyond basic styling. With AI assistance, it can suggest designs based on current work, recommend color palettes, layouts, and component choices, and help users develop ideas quickly.

Code-first approach

Onlook's code-first approach ensures that visual edits translate to clean, maintainable React code. It allows direct manipulation of existing component code, no generation of unnecessary wrapper elements or style bloat, and full access to component props, state, and methods during editing.

Compatible with existing React projects

Onlook seamlessly integrates with existing React projects, supporting modern React features and popular styling solutions like Tailwind CSS, CSS modules, context, hooks, and preserving build and deployment workflows.

Benefits of using Onlook

• Removes the need to switch between design tools and code editors
• Fosters a more efficient and integrated development process
• Allows for experimenting with layouts, styles, and interactions with speed
• Bridges the gap between designers and developers with a shared visual language
• Translates design to React codes making it easier for React developers

Prerequisites

To follow along with this tutorial, you will need:

• A code editor like VS Code or Cursor
• Basic familiarity with running commands on your terminal
• Basic familiarity with design and React concepts

Project setup

1. Download and install the Onlook desktop application
2. Follow setup instructions
3. Start designing your application using the Onlook interface

Understanding the Onlook interface

Upon opening Onlook, you'll see a workspace with three main sections:

• Component Canvas: where you can see components working in real-time
• Properties and AI chat panel: controls for the element being edited, with a chat feature to interact with AI
• Component Tree Navigator: displays the structure of your application Additional sections include the Toolbar, linking design and development aspects.

Creating and managing components

Let's create a to-do list app using Onlook. You can design components visually in Onlook's interface, click "Open in VS Code" to view and edit the generated code, and make changes in either environment with real-time updates in both places.

---