Der Cursor für Designer – ein Open-Source-Code-Editor mit visuellem Fokus

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 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 ins Web? Lesen Sie unsere Entscheidung:
Migration von Electron zu 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. Jederzeit können Sie per Rechtsklick auf ein Element dessen genaue Code-Position öffnen.

Zeichnen Sie neue div-Elemente und ordnen Sie sie per Drag-and-Drop innerhalb ihrer übergeordneten Container neu an.

Betrachten Sie den Code nebeneinander mit Ihrem Website-Design.

Nutzen Sie die Editor-Toolbar von Onlook, um Tailwind-Stile anzupassen, Objekte direkt zu manipulieren und mit Layouts zu experimentieren.

Dokumentation

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

Anleitungen zur Mitarbeit finden Sie in unserem Dokumentationsbereich unter Contributing to Onlook.

Funktionsweise

Bei der Erstellung einer App laden wir den Code in einen Web-Container.
Der Container führt den Code aus und stellt ihn bereit.
Unser Editor empfängt die Vorschau-URL und zeigt sie in einem iFrame an.
Der Editor liest und indiziert den Code aus dem Container.
Wir instrumentieren den Code, um Elemente ihrer Position im Code zuzuordnen.
Bei der Bearbeitung eines Elements wird dieses erst im iFrame, dann im Code angepasst.
Unser KI-Chat hat ebenfalls Code-Zugriff und Werkzeuge, 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 die optimale Zusammenarbeit mit Next.js und TailwindCSS.

Eine detaillierte Erklärung finden Sie in unseren Architecture Docs.

Unser Tech-Stack

Front-end

Next.js - Full stack
TailwindCSS - Styling
tRPC - Server-Schnittstelle

Datenbank

Supabase - Authentifizierung, Datenbank, Speicher
Drizzle - ORM

KI

AI SDK - LLM-Client
Anthropic - LLM-Modellanbieter
Morph Fast Apply - Fast-Apply-Modellanbieter
Relace - Fast-Apply-Modellanbieter

Sandbox und Hosting

CodeSandboxSDK - Entwicklungs-Sandbox
Freestyle - Hosting

Laufzeitumgebung

Bun - Monorepo, Laufzeit, Bundler
Docker - Container-Verwaltung

Mitwirken

Falls Sie einen Vorschlag haben, der dies verbessern könnte, forken Sie bitte das Repository und erstellen Sie einen Pull Request. Sie können auch Issues öffnen.

Weitere Anleitungen und den Verhaltenskodex finden Sie in der CONTRIBUTING.md.

Mitwirkende

Kontakt

Team: Discord - Twitter - LinkedIn - Email
Projekt: https://github.com/onlook-dev/onlook
Website: https://onlook.com

Lizenz

Veröffentlicht unter der Apache 2.0 Lizenz. Weitere Informationen finden Sie in der LICENSE.md.