Favicon of Onlook

Onlook

An open-source visual editor for React websites. Run it locally or self-host it, with AI chat and support for Next.js and Tailwind CSS.

Screenshot of Onlook website

Onlook is a visual code editor for designers who want to work directly on a website rather than hand off a separate mockup. It uses the actual app code as the design source, so visual edits change the product itself. The Apache 2.0 project can run locally or be self-hosted; Onlook also offers a hosted cloud product.

The editor combines an infinite canvas, a live app preview and AI chat. You can rearrange and resize elements visually, adjust styling, and ask the AI to create pages or edit existing code. It supports importing React codebases, with the open-source editor focused on Next.js and Tailwind CSS. You can also start a website from text, an image or a template.

For teams with an existing design system, Onlook can manage brand fonts, colors and styles. Layers and page views help you select elements and work across a site, while image management keeps project assets in the editor. Branching lets you try design alternatives, and revision history and checkpoints let you restore earlier work.

Local hosting doesn't make the AI fully offline: the listed AI services include OpenRouter, Morph Fast Apply and Relace. The AI has access to project code to understand and edit it. You own the code you create and can export it to your machine, publish it to GitHub or host the site with a custom domain.

Similar to Onlook