How to Use Onlook: A Step-by-Step Tutorial for Building React Apps Visually

In this hands-on tutorial, we'll walk through setting up Onlook and building a React application entirely through visual editing with AI assistance. Whether you're a seasoned developer or new to React, this guide will show you how Onlook transforms the design-to-code workflow.

Step 1: Installation

The easiest way to run Onlook is with Docker. Simply pull the image and start the container:

Once running, open your browser and navigate to http://localhost:8080 — you'll see the Onlook workspace.

Step 2: Create Your First Project

From the dashboard, click "Create New App". You have three options:

• Start from text — Describe what you want to build in natural language
• Start from an image — Upload a design mockup or screenshot
• Use a prebuilt template — Choose from community templates

Step 3: Visual Editing

Onlook's visual editor provides a Figma-like interface directly in your browser. You can:

• Select any element on the page and edit its styles
• Drag and drop components to rearrange layouts
• Use the AI assistant to generate new sections or modify existing ones
• Manage brand assets, colors, and typography tokens

Step 4: Experiment with Branches

One of Onlook's most powerful features is branching. Before making major changes, create a branch to experiment freely:

Step 5: Deploy

When you're happy with your design, deployment is one click away. Onlook generates shareable links and lets you connect custom domains. Your code is production-ready React with Next.js and TailwindCSS.

Conclusion

Onlook represents a new paradigm in web development — where designers and developers can work together in the same tool, with AI handling the translation between visual design and production code. With 26,000+ GitHub stars, it's clear the community sees the potential. Try it today and experience the future of React development.