Sign inCreate account
Sign inCreate account

onlook

From public sources

Onlook is an open-source visual code editor for designing and editing Next.js and Tailwind CSS websites with AI directly in the browser.

ApplicationCategory: Web Apps · CMS & publishing · Design & whiteboardsOpen sourcedata checked Oct 15, 2026
Add to compareAdd to collection

Overview

Designing a website usually means switching between a design tool and code, so visual changes drift away from the actual codebase. Onlook closes that gap by letting you edit a Next.js + TailwindCSS project visually while the changes are written back to real code. You can create a new Next.js app from text, an image or a template, then adjust elements directly in a Figma-like interface, with a live preview beside the code. Right-clicking an element jumps to its location in the source, and an AI chat can create or edit the project. Other capabilities include brand tokens, page and layer navigation, branching for design experiments, and checkpoints to save and restore work. Onlook suits designers and front-end developers who want to work on real code, and it can be run locally or used as a hosted app. It is released under the Apache 2.0 license and is positioned as an open-source alternative to tools such as Bolt.new, Lovable and Figma Make.
  • ai
  • claude-code
  • codex
  • cursor
  • design
  • design-system
  • design-to-code
  • design-tool
  • figma
  • frontend
  • ide
  • nextjs

Installation

Commands are shown, never run by the marketplace. Check them against the official documentation.

Compatibility

Unknown means no evidence was found — not that the product is incompatible.
PlatformStatusArchitectureEvidenceConfidence
Web browserCompatible—Declared on the card—
Server / self-hostedUnknown———
Container (OCI)Unknown———
WindowsCompatible—official build in release v0.2.32: Onlook-setup.exe0.60
macOSCompatiblearm64official build in release v0.2.32: Onlook-arm64.dmg0.70
Compatiblex86_64official build in release v0.2.32: Onlook-x64.dmg0.70
LinuxCompatiblex86_64official build in release v0.2.32: Onlook-amd64.deb0.70
Compatiblearm64official build in release v0.2.32: Onlook-arm64.AppImage0.70

Releases

checked Oct 29, 2026
v0.2.32LatestJul 17, 2025Official source ↗

Files in 0.2.32

The marketplace does not host these files: downloads go to the official source. Files have not been scanned by us.
FilePlatformSizeSHA-256Download from the official source
Onlook-amd64.deblinux · x86_64 · deb173 MBa0b1fd0f8d55…Official source ↗
Onlook-arm64.AppImagelinux · arm64 · appimage231.8 MB6c79de2469a5…Official source ↗
Onlook-arm64.deblinux · arm64 · deb168.2 MB7f9219f3f18d…Official source ↗
Onlook-arm64.dmgmacos · arm64 · dmg235.3 MB73a06b8482ac…Official source ↗
Onlook-arm64.zipUnknown226.5 MB96921613063c…Official source ↗
Onlook-setup.exewindows · exe167.8 MB88ce6b5ec85f…Official source ↗
Onlook-x64.dmgmacos · x86_64 · dmg241.5 MBe357d4defe7c…Official source ↗
Onlook-x64.zipUnknown232.7 MBe5b6c9e715c2…Official source ↗
Onlook-x86_64.AppImagelinux · x86_64 · appimage231.5 MB5d817d5a62af…Official source ↗
Onlook-arm64.dmg.blockmapother250.5 KB3d12d34b33c6…Official source ↗
Onlook-arm64.zip.blockmapother243.7 KB22d4fa32e2dc…Official source ↗
Onlook-setup.exe.blockmapother181.1 KBcd7310f68505…Official source ↗
Onlook-x64.dmg.blockmapother257.5 KBf224cb45caf1…Official source ↗
Onlook-x64.zip.blockmapother250.5 KB8467cb966657…Official source ↗
latest-linux-arm64.ymlother512 Bef0ecc5fdeed…Official source ↗
latest-linux.ymlother514 Be559f96ab066…Official source ↗
latest-mac.ymlother765 B2c402b7524f6…Official source ↗
latest.ymlother330 B76de10f90f41…Official source ↗

Release history

Quality profile

algorithm quality-v1.0 · assessed Oct 15, 2026
Quality Score83
Risk Score0
Confidence 1.00
Quality Score and Risk Score are different measures. A high score does not guarantee safety.

Score components

Maintenance · 2016
last activity 52 days ago
Documentation · 1515
README 10719 chars, description present
Ready to use · 156
install instructions: no; releases: yes
Metadata · 1010
4/4 of description, homepage, license, topics
Releases · 106
10 release(s), latest 455 days ago
Category confidence · 1010
classifier confidence 1
Adoption · 1010
26919 stars (log-dampened, 10k = max)
License clarity · 55
SPDX Apache-2.0
Community · 55
issues enabled, 2203 forks

License

Apache-2.0
Known licensefrom the repository host

This is the catalog policy status, not legal advice.

Sources

github.com/onlook-dev/onlookPrimary★ 26,919 starslast activity Aug 25, 2026Primary repository · Confidence 1.00

Reviews

Sign in to write a review

No reviews yet.

Alternatives

plasmicSimilar
Plasmic is an open-source visual builder for React that lets teams design and build apps and websites by dragging their own codebase components onto the canvas.MIT · Web Apps
violitSimilar
Pure Python Web Framework. Streamlit simplicity, no reruns.MIT · Web Apps
system-design-primerSimilar
Learn how to design large-scale systems. Prep for the system design interview. Includes Anki flashcards.Web Apps
excalidrawSimilar
Excalidraw is an open-source virtual whiteboard for hand-drawn style diagrams and sketches, with real-time collaboration and end-to-end encryption.MIT · Web Apps
documensoSimilar
Documenso is an open-source document signing application and DocuSign alternative for signing and managing e-signature workflows you can self-host.AGPL-3.0 · Web Apps
workout-coolSimilar
🏋 Modern open-source fitness coaching platform. Create workout plans, track progress, and access a comprehensive exercise database.MIT · Web Apps

README

From onlook-dev/onlook · license Apache-2.0 · fetched Oct 29, 2026

[Discord] [LinkedIn] [Twitter]

中文 | Español | Deutsch | français | Português | Русский | 日本語 | 한국어

This is the open-source visual editor that started Onlook (Next.js + Tailwind). The hosted product we're building next, for AI-native designers, is in early access via the waitlist above.

An Open-Source, Visual-First Code Editor

Craft websites, prototypes, and designs with AI in Next.js + TailwindCSS. Make edits directly in the browser DOM with a visual editor. Design in realtime with code. An open-source alternative to Bolt.new, Lovable, V0, Replit Agent, Figma Make, Webflow, etc.

What you can do with Onlook:

  • Create Next.js app in seconds
    • Start from text or image
    • Use prebuilt templates
  • Visually edit your app
    • Use Figma-like UI
    • Preview your app in real-time
    • Manage brand assets and tokens
    • Create and navigate to Pages
    • Browse layers
    • Manage project Images
    • Detect and use Components – Previously in Onlook Desktop
    • Drag-and-drop Components Panel
    • Use Branching to experiment with designs
  • Development Tools
    • Real-time code editor
    • Save and restore from checkpoints
    • Run commands via CLI
    • Connect with app marketplace
  • Deploy your app in seconds
    • Generate sharable links
    • Link your custom domain
  • Collaborate with your team
    • Real-time editing
    • Leave comments
  • Advanced AI capabilities
    • Queue multiple messages at once
    • Use Images as references and as assets in a project
    • Setup and use MCPs in projects
    • Allow Onlook to use itself as a toolcall for branch creation and iteration
  • Advanced project support
    • Support non-NextJS projects
    • Support non-Tailwind projects

[Onlook-GitHub-Example]

Getting Started

Use our hosted app or run locally.

Usage

Onlook will run on any Next.js + TailwindCSS project, import your project into Onlook or start from scratch within the editor.

Use the AI chat to create or edit a project you're working on. At any time, you can always right-click an element to open up the exact location of the element in code.

Draw-in new divs and re-arrange them within their parent containers by dragging-and-dropping.

Preview the code side-by-side with your site design.

Use Onlook's editor toolbar to adjust Tailwind styles, directly manipulate objects, and experiment with layouts.

Documentation

For full documentation, visit docs.onlook.com

To see how to Contribute, visit Contributing to Onlook in our docs.

How it works

  1. When you create an app, we load the code into a web container
  2. The container runs and serves the code
  3. Our editor receives the preview link and displays it in an iFrame
  4. Our editor reads and indexes the code from the container
  5. We instrument the code in order to map elements to their place in code
  6. When the element is edited, we edit the element in our iFrame, then in code
  7. Our AI chat also has code access and tools to understand and edit the code

This architecture can theoretically scale to any language or framework that displays DOM elements declaratively (e.g. jsx/tsx/html). We are focused on making it work well with Next.js and TailwindCSS for now.

For a full walkthrough, check out our Architecture Docs.

Our Tech Stack

Front-end
Database
AI
Sandbox and hosting
Runtime
  • Bun - Monorepo, runtime, bundler
  • Docker - Container management

Contributing

[image]

If you have a suggestion that would make this better, please fork the repo and create a pull request. You can also open issues.

See the CONTRIBUTING.md for instructions and code of conduct.

Contributors

Contact

[image]

License

Distributed under the Apache 2.0 License. See LICENSE.md for more information.

Open the repository ↗