Favicon of Onlook

Onlook

A self-hosted visual editor for Next.js and Tailwind CSS websites that combines direct design changes with AI code editing.

Alternative to:

Screenshot of Onlook website

Onlook is a visual code editor for designers building websites and prototypes. Its open-source editor works on the app's code, so design changes become part of the working product rather than a separate mockup.

  • Visual editing: Change elements directly in a live app preview, with layers and page views to help you select and organize content.
  • AI project creation: Start a Next.js site from text, an image or a template, and use AI chat to create or edit project code.
  • Brand assets: Manage brand assets, design tokens and project images alongside the website you're editing.
  • Design alternatives: Use branches to try different designs and checkpoints to save and restore work.

The open-source editor supports Next.js projects styled with Tailwind CSS. It's free, licensed under Apache 2.0, and can run locally or be self-hosted. Onlook also offers a separate hosted cloud product, whose website advertises an infinite canvas, reusable component customization and revision history.

Local operation doesn't make the AI offline. Its AI services include OpenRouter, Morph Fast Apply and Relace, and the assistant accesses project code to understand and edit it. You own the code you create and can export it to your machine or publish it to GitHub.

Similar to Onlook