Repolode
Submit
onlook-dev

onlook-dev/onlook

An open-source visual editor that lets you design and edit Next.js + Tailwind CSS code directly in the browser with AI assistance.

Open-source alternative to:FigmaWebflowLovable

View on GitHubWebsite
Stars
26,962
Forks
2,792
Open issues
382
Last commit
2 months ago

What is it?

Onlook is a visual code editor for building websites and interfaces in Next.js and TailwindCSS. Instead of editing only in a code editor, you select and change elements in a live preview of the app, and those edits are written back to the underlying source code. An AI chat can also create or modify the project.

The editor loads your project into a web container, displays the running preview in an iframe, and indexes the code so each element can be mapped to its location in the source. Right-clicking an element jumps to its line in code, and a side-by-side code view stays in sync with the design. Users can draw and rearrange divs, adjust Tailwind styles from a toolbar, save checkpoints, and deploy shareable links.

The project currently targets Next.js and Tailwind only; support for other frameworks is listed as planned. The README also notes that the team is building a hosted product for AI-native designers, available through a waitlist.

Key features

  • 01Edit elements directly in a live browser preview, with changes written back to code.
  • 02Right-click an element to jump to its location in the source.
  • 03Use an AI chat to create or edit the project.
  • 04Adjust Tailwind styles and layouts from a visual toolbar.
  • 05Save and restore checkpoints, and generate shareable deployment links.

Use cases

  • Prototyping landing pages or marketing sites in a Next.js and Tailwind project.
  • Letting designers make visual tweaks that land as real, reviewable code.
  • Exploring layout variations with AI before committing changes.

Quick start

  1. 1

    Use the hosted app at onlook.com

  2. 2

    Or read the local-run guide in the docs

Things to know

  • Only supports Next.js and Tailwind CSS projects; other frameworks are not yet supported.
  • The hosted product is in early access behind a waitlist.
  • Running locally is documented separately on the docs site rather than in the README.

Topics

#visual-editor#design-to-code#nextjs#tailwindcss#react#ai#typescript#claude-code#codex#cursor

FAQ

What is onlook?
An open-source visual editor that lets you design and edit Next.js + Tailwind CSS code directly in the browser with AI assistance. Onlook is a visual code editor for building websites and interfaces in Next.js and TailwindCSS. Instead of editing only in a code editor, you select and change elements in a live preview of the app, and those edits are written back to the underlying source code. An AI chat can also create or modify the project.
Is onlook free to use? What license does it have?
onlook is open source under the Apache-2.0 license. Check the license terms before using it in commercial products.
Is onlook still maintained?
Updated within 6 months. The last commit to onlook was on Aug 25, 2026.
What can I use onlook for?
Prototyping landing pages or marketing sites in a Next.js and Tailwind project. Letting designers make visual tweaks that land as real, reviewable code. Exploring layout variations with AI before committing changes.
How do I install onlook?
Use the hosted app at onlook.com Or read the local-run guide in the docs
Where can I get onlook?
The source code and installation instructions are on GitHub: https://github.com/onlook-dev/onlook

Summary generated by AI from the project's README. GitHub stats refresh daily.

Related projects