> ## Content Index > Fetch the complete content index at: https://itsfoss.com/llms.txt > Use this file to discover other available public pages before exploring further. # Hands-On with Onlook: The AI-Powered Visual Editor That Blends Code and Design - URL: https://itsfoss.com/news/onlook/ - Published: 2025-07-30T13:25:05.000Z - Updated: 2025-07-30T13:25:05.000Z - Description: Discover how Onlook combines AI, code, and design effortlessly. - Author: Sourav Rudra - Tags: First Look, News, #Import 2025-11-08 21:15 Tools like AI-powered code generators and website builders make the jobs of programmers and web designers easier by automating routine tasks, speeding up development, and providing quick starting points. They reduce manual effort while allowing people to focus on other things. These tools also help non-technical users create digital solutions more quickly by managing much of the underlying complexity. However, sometimes [this approach can backfire](https://decrypt.co/331961/tea-app-claimed-protect-women-exposes-72000-ids-epic-security-fail?ref=itsfoss.com), so it is important to approach their use with caution. AI-powered visual editors, on the other hand, bring design and coding together under the same umbrella, allowing anyone to generate new projects, adjust layouts, modify elements, and see changes in real-time. One great example of this is [Onlook](https://onlook.com/?ref=itsfoss.com), an open source visual editor for building and editing [React](https://react.dev/?ref=itsfoss.com) and [Next.js](https://nextjs.org/?ref=itsfoss.com) projects styled with [Tailwind CSS](https://tailwindcss.com/?ref=itsfoss.com). 🚧 This tool is still being developed, so be careful using it for production. ## Onlook: Overview ⭐ Built by a team focused on making web development easier, **Onlook is based on a strong technical stack**, with Next.js, Dirzzle, Supabase, and Bun. This allows it to offer quick visual editing, live code updates, and a streamlined way to build and refine projects. While a lot of the basic functionality is in place, features like real-time collaboration with other users, the ability to directly import project files from [Figma](https://www.figma.com/?ref=itsfoss.com), and a few others are still under development. ### ⭐ Key Features While the highlight here is the ability to edit React and Next.js projects visually with instant code updates, other important features include: - Drag-and-drop layout editing for easy design changes. - Straightforward styling with Tailwind CSS integration. - AI-powered assistance to help speed up coding and design tasks. ## Initial Impressions 👨‍💻 I chose the cloud-hosted solution from the Onlook team and signed in with my GitHub account on the Free plan. This gave me access to the visual code editor, allowed me to create up to five projects, and includes a maximum of 5 AI chat messages per day and 50 messages per month. ![the login dialog for onlook, that says: login to edit share projects, collaborate, and design more in code; there are two buttons below to login via github and google](https://itsfoss.com/content/images/2025/07/onlook-account-login-dialog.png) The first thing I did was **ask Onlook what it can do**. It responded with a detailed list of its capabilities, including reading and analyzing existing React and Next.js code, creating new components, refactoring code, and implementing UI designs with Tailwind CSS. ![onlook with an empty project, the chat window has a prompt by me that asks what can you do?, the ai system on board replies with some important information below that](https://itsfoss.com/content/images/2025/07/onlook-what-can-you-do-prompt.png) I then asked it to generate a website for a fictional country called "*Jahranpur*." It took some time to process my request, figuring out what I wanted, the kinds of pages and information such a site would need, and other details before producing [a very usable website](https://2g7mnp-3000.csb.app/?ref=itsfoss.com). **Onlook takes some time to generate a new website.* Using the "*Preview*" page, I could easily explore how the website worked and view its details. To my surprise, the results were impressive. **Onlook clearly understood the task**, adding meaningful placeholder text, functional menu items, handy social media buttons, and effective calls to action (*CTAs*). ![](https://itsfoss.com/content/images/2025/07/onlook-code-tab.png) ![](https://itsfoss.com/content/images/2025/07/onlook-device-view-dropdown.png) **The Code tab and device view dropdown are very useful.* I could even review the generated code in the "*Code*" tab, located next to the Chat tab on the right-hand side. Any changes I made there were immediately reflected on the Figma-like canvas. And to check whether my project worked well on other devices, such as mobile and tablets, I used the device view dropdown in the *Design* toolbar to easily switch between a wide range of device options. ## 📥 Get Onlook ![the pricing page for onlook's cloud hosted option, there is a free plan for $0 a month, and a pro plan with variable pricing according to messages per month, i have selected 400 messages per month, and the quote for that is $100 per month](https://itsfoss.com/content/images/2025/07/onlook-pricing-plans.jpg) You can choose the [cloud-hosted option](https://onlook.com/?ref=itsfoss.com), which offers *Free* and *Pro* plans, or [self-host](https://docs.onlook.com/contributing/developers/running-locally?ref=itsfoss.com) Onlook on your own infrastructure. For setup help, check the [official documentation](https://docs.onlook.com/?ref=itsfoss.com). To get the source code, visit the project’s [GitHub](https://github.com/onlook-dev/onlook?ref=itsfoss.com) repository. [Onlook](https://www.onlook.com/?ref=itsfoss.com)