Onlook

Introduction

Imagine being able to click on an element in your React-based website interface and change its color, spacing, or font directly, just as you would in Figma, only to find that the actual code in your project has been updated instantly without writing a single line by hand. This is exactly what Onlook offers: an open-source visual editor that combines the experience of graphic design tools with the reality of writing real code, with an AI layer mediating between them. Onlook does not treat your design as an image that can later be exported into approximate code; instead, it works directly with the real React or Next.js project on your machine and updates the actual JSX/TSX and Tailwind files while you edit visually. In this review, we break down the tool in detail: its functions, features, how to use it, its limitations, and its position among competing AI tools in the design and development space.

What Is Onlook?

Onlook is an open-source design-to-code editor often described as an attempt to build something like “Figma for real code” or “Cursor for designers.” It can be accessed through the official website https://onlook.com, and it is available as a desktop application currently focused primarily on macOS, with a web version and ongoing development to support other operating systems.

The tool works by connecting itself to an existing React or Next.js project on your local machine (preferably one that uses Tailwind CSS). Onlook opens this project in Live Preview mode and allows you to interact with displayed elements as you would with a design canvas: selecting an element, dragging it, changing its dimensions, and adjusting its colors, fonts, internal and external spacing (padding/margin) from a side properties panel very similar to the design panels in Figma. The key difference is that every change you make is immediately translated into real changes in your source code files, usually by modifying Tailwind classes or element properties directly, rather than generating new code separate from your project.

The second layer of the tool is its built-in AI, which works as a Chat assistant within the interface. Through it, you can request the creation of new components, modify the design of an entire section, or even restructure an element through text prompts instead of manual visual editing. In this way, Onlook combines three working modes: direct visual editing, traditional code writing (because the project remains real React code that can be opened in any editor such as VS Code), and AI generation through text commands.

Key Features

• Visual editing on real code: Clicking any element in the live preview opens a properties panel that lets you modify colors, fonts, borders, shadows, and layout through Flexbox/Grid, with every change immediately written as a Tailwind class or CSS property inside the component file.
• Context-aware AI assistant: You can select an element or page section and ask the assistant to modify it in natural language, such as “make this section responsive for smaller screens” or “add a call-to-action button using the current color style.” The AI then generates the modification directly in the code associated with that specific element.
• Direct support for React, Next.js, and Tailwind: The tool is not general-purpose for every language; it is specifically designed for the modern frontend development workflow common in startups and technical teams.
• Fully open source: The code is available on GitHub, meaning you can inspect how the tool works internally, contribute to its development, or run a modified version locally for private or security-related purposes.
• Hot Reload and direct connection to the local project folder: There is no need to upload or import files; Onlook opens the same project folder on your disk and interacts with it, so your Git environment and build tools (npm/yarn/pnpm) remain intact without conflicts.
• Layers and properties panel similar to design tools: A tree view of page elements (DOM tree) makes it easier to navigate between nested components without manually opening every file.
• Responsive preview for different screen sizes: The ability to switch between screen sizes (mobile, tablet, desktop) to preview the design while editing, which is critically important in modern frontend development.

How to Use Onlook

The practical usage steps for the tool begin with installation and end with integrating the changes into your actual project, as follows:

1. Install the application: From the official website https://onlook.com, you can download the desktop version (primarily macOS at the moment), or try the web version if it is enabled for your account.
2. Connect an existing React/Next.js project: When opening the app, select the local project folder on your device; the project should preferably be built with Tailwind CSS for the best integration with the properties panel.
3. Run the development server: Onlook connects itself to your project’s development server (such as npm run dev) to display the live preview within its interface.
4. Navigate and select: Using the cursor, click any visible element on the page, and a side panel appears with all editable properties: colors, fonts, dimensions, spacing, and layout.
5. Edit directly or through AI: You can modify properties manually from the panel, or open the chat window and write a text request, such as “change this section’s background to a light blue gradient” or “create a new product card using the same styling as the current card.”
6. Review through Git: Since changes are written directly into code files, you can review the differences (diff) through Git just as you would with any normal code change, and easily revert any unwanted modification.
7. Build and deploy: After completing the changes, continue using your project’s usual deployment tools (Vercel, Netlify, or your own server) without any additional dependency on Onlook itself.

Advantages and Benefits

Onlook delivers direct value to several categories of users, with the nature of the benefit varying according to their specialization:

• Non-programmer designers: They can visually modify the interface of a real application without needing deep knowledge of CSS or React, reducing constant dependence on developers for minor design changes such as colors or spacing.
• Frontend developers: They save significant time on precise design fine-tuning that usually takes longer to implement manually in an editor, such as adjusting spacing or aligning elements with pixel-level precision.
• Small product teams and startups: It accelerates the feedback loop between design and development teams because a designer can make a direct change to the real version instead of sending a Figma file and waiting for implementation.
• Independent developers: They can build quick prototypes by using AI to generate complete components from a text description, then refine them visually with precision.
• Full transparency due to its open-source nature: Teams that need security assurances or internal hosting can run the tool or modify it to suit their environment.

Drawbacks and Challenges

Despite its ambitious idea, Onlook faces a number of practical limitations that should be considered before adopting it in a real workflow:

• Relatively narrow specialization: The tool is designed specifically for React/Next.js and Tailwind CSS projects. If your project is built with Vue, Angular, or traditional non-Tailwind CSS, the tool’s usefulness is greatly reduced or may disappear entirely.
• Operating system support is currently limited: Core development has focused on macOS, meaning Windows and Linux users may find the experience less mature or may need to use the browser version if it is available.
• The tool is in an ongoing growth phase: Its status as an active open-source project means there may be bugs and frequent changes to the interface and features, which is highly expected for projects that have only recently reached production-use stages.
• AI accuracy is not absolute: As with all AI generation tools, complex text requests may require precise wording and repeated attempts to achieve a result that exactly matches what you envision, especially in complex multi-level layouts.
• The need for a basic understanding of web concepts: Despite the visual interface, understanding component structures and Tailwind remains highly useful for using the tool efficiently. This makes it more suitable for technically experienced UI designers than for designers who are complete beginners in programming.
• Dependence on a local development environment: Using the tool requires running a full React project on your machine with Node.js, which is an obstacle for those who want a quick experience without setting up a development environment.

Comparing Onlook with Competing Tools

Onlook vs. Figma

Figma remains the leading reference for interface design, but it produces design files separate from real code, and converting them into code usually requires a manual step or additional tools (such as Figma-to-code plugins) that generate approximate code requiring review. Onlook’s core advantage is that it modifies the actual code directly, leaving no gap between “design” and “implementation.” However, it lacks the richness of the plugin and component ecosystem as well as the strength of the team collaboration tools that Figma has developed over the years.

Onlook vs. v0 by Vercel

The v0 tool focuses on generating entirely new React/Tailwind components from a text description or image, and it is powerful for quickly creating interfaces from scratch. Onlook, on the other hand, excels when you already have an existing project that you want to edit and customize visually with precision, rather than generating new pages from scratch every time.

Onlook vs. Cursor and Windsurf

These tools are AI-powered code editors aimed directly at programmers through a traditional code window with a powerful AI assistant. Onlook differs fundamentally by providing a visual-first layer that hides code complexity from non-programmers, while keeping the real code in the background for anyone who wants to edit manually. This makes it more of a bridge between the worlds of design and programming than a direct competitor to pure code editors.

Onlook vs. Webflow

Webflow is a very mature visual website-building tool aimed primarily at non-programmers, but it operates within its own closed ecosystem and ties you to its hosting. Onlook, by contrast, is open source and works on a standalone code project that you can deploy anywhere you want. This gives it greater flexibility for technical development teams that do not want to be tied to a particular hosting platform.

Practical Examples of Using Onlook

• Editing an existing marketing page: A marketing team wants to change the texts and colors of a SaaS product homepage without waiting for the development team’s schedule; they open the project in Onlook and edit the elements directly, then send the changes to the developer for review through Git.
• Building a new product card with AI: A developer writes in the chat window, “Create a product card that displays an image, title, price, and add-to-cart button, using the website’s current design style.” The assistant then generates the component directly within the project structure using Tailwind styles that match the website.
• Improving responsiveness (Responsive Design): Select a section that does not display well on mobile and ask the assistant to rearrange the elements vertically on small screens, then review the result immediately through the reduced screen-size preview inside the tool.
• Speeding up design reviews with clients: A design agency shows the client a version that actually works instead of a static Figma mockup and applies feedback directly in front of them during the meeting.
• Refining precise visual details: Adjust line spacing, font size, and card shadows in an existing design without having to search for the correct line in a massive CSS file.

Pricing

Onlook primarily follows an open-source model, where the application can be downloaded and used for free, with the option to contribute or run a self-hosted version for users who want full control. According to what is announced on its official website https://onlook.com, the tool also offers plans and subscriptions related to the use of advanced AI features or optional cloud hosting. These may include limits on the number of monthly AI requests in the free plan, in exchange for higher or unlimited limits in paid plans. It is recommended to review the pricing page directly on the official website before subscribing, as plan details and prices may change frequently in rapidly evolving projects like this.

Evaluation and Getting Started Tips

Onlook is clearly aimed at a specific audience: teams that actively use React or Next.js with Tailwind CSS in their projects and want to reduce the gap between design and implementation. If you are a UI designer working within a technical team that uses these technologies, you will find in Onlook a tool that gives you real independence to implement your changes without waiting for a developer. If you are a solo developer building your own product, you will benefit from combining AI generation with precise visual editing to accelerate the interface-building stage.

On the other hand, if your project uses a framework other than React, or if you are looking for a complete website-building tool that requires no prior technical knowledge, Webflow or ready-made website builders may be a more suitable option for your situation. My advice for getting started: try the tool first on a small project or an experimental copy of your real project (a separate Git branch), to ensure that the changes you apply are compatible with the existing code structure before relying on it directly in a production environment.

Conclusion

Onlook represents a serious and exciting attempt to solve a long-standing problem in the web industry: the time and technical gap between the person who designs an interface and the person who writes its code. By combining direct visual editing of real code with AI assistance, while being a fully open-source project, the tool offers tangible practical value for frontend development teams based on React, Next.js, and Tailwind CSS. Its current limitations related to operating system support and technical maturity make it more of a tool that should be tried cautiously and monitored as it evolves, rather than a rigid production tool that can be fully relied upon from day one. For anyone working specifically within this technology ecosystem, Onlook is worth trying through its official website https://onlook.com as a first step in evaluating how well it fits your own project workflow.