Der Cursor für Designer – ein Open-Source, visueller Code-Editor

Erstellen Sie Websites, Prototypen und Designs mit KI in Next.js + TailwindCSS. Nehmen Sie Änderungen direkt im Browser-DOM mit einem visuellen Editor vor. Gestalten Sie in Echtzeit mit Code. Eine Open-Source-Alternative zu Bolt.new, Lovable, V0, Replit Agent, Figma Make, Webflow usw.

🚧 🚧 🚧 Onlook für Web befindet sich noch in der Entwicklung 🚧 🚧 🚧

Wir suchen aktiv nach Mitwirkenden, die uns dabei helfen, Onlook für Web zu einem herausragenden Prompt-to-Build-Erlebnis zu machen. Schauen Sie sich die offenen Issues für eine vollständige Liste der vorgeschlagenen Funktionen (und bekannten Probleme) an und treten Sie unserem Discord bei, um mit Hunderten von anderen Entwicklern zusammenzuarbeiten.

Was Sie mit Onlook tun können:

Onlook-GitHub-Example

Onlook für Desktop (auch Onlook Alpha)

Wir befinden uns in der frühen Vorschauphase für Onlook Web. Falls Sie die herunterladbare Desktop-Electron-App suchen, wurde diese zu Onlook Desktop verschoben.

Warum wechseln wir zum Web? Lesen Sie mehr über unsere Entscheidung: Migration von Electron zum Web

Erste Schritte

Demnächst verfügbar als gehostete App oder lokal ausführbar.

Verwendung

Onlook funktioniert mit jedem Next.js + TailwindCSS-Projekt. Importieren Sie Ihr Projekt in Onlook oder starten Sie direkt im Editor von Grund auf neu.

Nutzen Sie den AI-Chat, um ein Projekt zu erstellen oder zu bearbeiten. Sie können jederzeit mit einem Rechtsklick auf ein Element dessen genaue Position im Code öffnen.

Zeichnen Sie neue Divs und ordnen Sie sie durch Drag-and-Drop innerhalb ihrer übergeordneten Container neu an.

Vorschau des Codes nebeneinander mit Ihrem Seiten-Design.

Verwenden Sie die Editor-Symbolleiste von Onlook, um Tailwind-Stile anzupassen, Objekte direkt zu manipulieren und Layouts zu experimentieren.

Dokumentation

Die vollständige Dokumentation finden Sie unter docs.onlook.com.

Anleitungen zur Mitwirkung finden Sie in unserer Dokumentation unter Mitwirkung an Onlook.

Funktionsweise

Wenn Sie eine App erstellen, laden wir den Code in einen Web-Container.
Der Container führt den Code aus und stellt ihn bereit.
Unser Editor erhält den Vorschaulink und zeigt ihn in einem iFrame an.
Unser Editor liest und indiziert den Code aus dem Container.
Wir instrumentieren den Code, um Elemente ihrer Position im Code zuzuordnen.
Bei Bearbeitung eines Elements wird dieses im iFrame und anschließend im Code aktualisiert.
Unser AI-Chat hat ebenfalls Code-Zugriff und Tools, um den Code zu verstehen und zu bearbeiten.

Diese Architektur kann theoretisch auf jede Sprache oder jedes Framework skaliert werden, das DOM-Elemente deklarativ anzeigt (z.B. jsx/tsx/html). Derzeit konzentrieren wir uns auf Next.js und TailwindCSS.

Eine ausführliche Erläuterung finden Sie in unseren Architektur-Dokumenten.