Onlook

Onlook is an open-source visual editor for React applications. It allows users to design websites and prototypes by editing the browser DOM directly, which then writes changes back to the underlying codebase in real time. The software is available as a hosted web application or can be run locally to manage frontend development workflows.

Designed specifically for Next.js and TailwindCSS projects, Onlook bridges the gap between visual design and frontend development. Users can start projects from text, images, or prebuilt templates, and then refine the UI using a visual interface. The tool integrates AI capabilities to generate and modify code based on user prompts, allowing for a hybrid approach where design and coding happen simultaneously.

Key features

• Visual editing of the browser DOM with real-time code updates
• AI chat for creating and editing projects from text or image prompts
• Side-by-side preview of the live site and the code editor
• Support for brand assets, tokens, and layer browsing
• Branching system to experiment with different design iterations
• Checkpoint system to save and restore project states
• Integrated CLI for running development commands
• Ability to right-click elements to locate their exact position in the code

The architecture utilizes web containers to run and serve code, which the editor then indexes and instruments to map DOM elements to their source files. It uses a tech stack comprising Next.js, TailwindCSS, Supabase, and Drizzle ORM, with AI integration handled via the AI SDK and OpenRouter. The system functions by loading code into a container, serving it, and then displaying the result in an iFrame where the editor can manipulate the elements. While currently focused on the Next.js and Tailwind ecosystem, the underlying logic is designed to scale to other declarative frameworks that use DOM elements such as JSX or HTML.

Onlook is a low-code IDE for AI-native designers and frontend developers who want to iterate on UI visually without leaving their codebase.