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, 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, an open source visual editor for building and editing React and Next.js projects styled with Tailwind CSS.
🚧
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, 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 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.
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.
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).
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.
Here's why you should opt for It's FOSS Plus Membership:
- Even the biggest players in the Linux world don't care about desktop Linux users. We do. - We don't put informational content behind paywall. Your support keeps it open for everyone. Think of it like 'pay it forward'. - Don't like ads? With the Plus membership, you get an ad-free reading experience. - When millions of AI-generated content is being published daily, you read and learn from real human Linux users. - It costs just $2 a month, less than the cost of your favorite burger.
Become a Plus Member today and join over 300 people in supporting our work.
