Onlook
Onlook · Coding
Onlook ist ein Open-Source-Editor, in dem Designer echten React- und Next.js-Code auf einer Leinwand mit KI-Hilfe bearbeiten, damit der Code die Quelle der Wahrheit bleibt.
Über Onlook
What Is Onlook
Onlook ist ein visueller Code-Editor, der im Browser läuft. Statt einen Entwurf in eine separate Designdatei zu exportieren, lädt er Ihr echtes React- und Next.js-Projekt, zeigt die Komponenten auf einer unendlichen Leinwand und schreibt jede Änderung direkt ins Repository zurück. Der Code gilt als Quelle der Wahrheit: Was Sie auf der Leinwand sehen, ist also das echte Produkt und nicht dessen Abbild.
Der visuelle KI-Code-Editor Onlook setzt genau an der Trennung an, die Webteams oft ausbremst. Als Design-zu-Code-Tool und Next.js-Editor schließt er die Lücke zwischen Design und Entwicklung: Designer arbeiten in einer visuellen Oberfläche, und Entwickler holen diese Änderungen mit dem gewohnten Git-Workflow ins Repository. Ein visueller KI-Code-Editor macht genau das aus: die visuelle Arbeit und der Code bleiben an einer Stelle verbunden. Onlook liest Ihre Design-Tokens, Ihre Typografie und Ihre Storybook-Komponenten und wendet sie an, damit die KI-Änderungen zu dem passen, was das Team bereits ausliefert.
Dass es ein Open-Source-Design-Tool ist, zählt ebenfalls, denn Teams können nachvollziehen, wie der Editor arbeitet, und ihn an ihr eigenes Setup anpassen, statt einer Blackbox zu vertrauen.
Die größte Einschränkung ist der Stack. Onlook läuft auf React- und Next.js-Projekten mit Styling aus Tailwind CSS. Teams mit Vue, Svelte oder reinem HTML können es derzeit nicht nutzen. Intensiver Einsatz der gehosteten KI stößt zudem an das Nachrichtenlimit des kostenlosen Tarifs, wer sich also fast täglich auf den Assistenten verlässt, braucht am Ende einen bezahlten Tarif oder einen eigenen Server.
Getting Started
- Legen Sie ein Konto in der gehosteten App auf onlook.com an, oder klonen Sie das Open-Source-Repository und betreiben Sie es selbst.
- Verbinden Sie ein GitHub-Konto und importieren Sie ein bestehendes Next.js- und Tailwind-CSS-Projekt, oder starten Sie ein neues im Editor.
- Wählen Sie auf der unendlichen Leinwand ein Element aus und bearbeiten Sie es von Hand, oder beschreiben Sie die Änderung im Chat und lassen Sie die KI schreiben.
- Prüfen Sie die Live-Vorschau und den darunterliegenden Code nebeneinander, und übernehmen oder pushen Sie die Änderungen dann per Git.
- Nutzen Sie die Versionshistorie, um einen Schritt zurückzugehen, oder veröffentlichen Sie auf einer eigenen Domain, wenn die Arbeit fertig ist.
Produktinformationen
Ein kurzer Überblick über Preise, unterstützte Plattformen und die Leistung von Onlook.
Am besten für
Die Nutzer, Aufgaben und Szenarien, für die dieses Tool am besten passt.
Nutzer
- Designer, die mit einem Frontend-Team arbeiten
- Frontend-Entwickler
- Kleine Produktteams in Startups
- Gründer, die eine Landingpage prototypen
Aufgaben
- React-Komponenten live auf einer Leinwand bearbeiten
- Eine visuelle Anpassung in eine Code-Änderung verwandeln
- Eine Marke über alle Seiten hinweg konsistent halten
- Ein bestehendes Repository importieren
- Eine Seite prototypen und durchdenken
Szenarien
- Eine Marketingseite vor dem Launch feinschleifen
- Layout-Ideen an einem echten Produkt testen
- Eine Designerin in ein React-Projekt einarbeiten
Wichtigste Funktionen
Visuelle Bearbeitung auf echtem Code
Der Kern von Onlook ist ein Tailwind-CSS-Design-Tool und ein visueller React-Editor auf einer gemeinsamen unendlichen Leinwand, die Ihre echten Komponenten rendert, nicht ein statisches Bild. Sie wählen ein Element aus und ziehen, skalieren, ordnen oder gestalten es um. Weil die Bearbeitungen in die Quelldateien zurückfließen, ist das, was Sie auf dem Bildschirm bewegen, auch das, was live geht. Designer behalten die Freiheit eines Design-Tools, ohne die Verbindung zum Repository zu verlieren.
KI, die Ihre Komponenten bearbeitet
Der Assistent von Onlook ist ein KI-Design-Assistent, der Ihre Komponenten, Ihre Design-Tokens und Ihr Storybook-Setup liest und dann Änderungen vorschlägt, die den Mustern des Teams folgen. Sie können ein Element selbst bearbeiten oder die Aufgabe an den Chat übergeben und ihn den Code schreiben lassen. Anders als reine Chat-Generatoren behalten Sie die volle visuelle Kontrolle, während die KI die wiederkehrenden Teile übernimmt.
Repository importieren
Sie können Onlook auf ein bestehendes Next.js- und Tailwind-CSS-Projekt auf GitHub richten und sofort mit der Bearbeitung beginnen. Es gibt kein eigenes Onlook-Dateiformat und keine zweite Kopie des Designsystems zu pflegen, das Projekt, das Sie hereinholen, ist also das Projekt, das Sie ausliefern.
Einhaltung des Designsystems
Der Editor verfolgt Schriften, Farben, Abstände und Komponentenmuster Ihrer Marke und wendet sie beim Generieren an. Jedes neue Element erbt dieselben Tokens, was die Seiten ohne manuellen Durchgang markentreu hält. Für Teams mit einem strengen Designsystem zählt diese Konsistenz mehr als die rohe Generierungsgeschwindigkeit.
Live-Zusammenarbeit und Versionshistorie
Teams können ein Projekt teilen und gleichzeitig auf derselben Leinwand arbeiten, so wie sie es schon aus Figma kennen. Eine Revisionshistorie hält jede Änderung fest, sodass jeder zu einer früheren Version zurückkehren kann. Dieses Sicherheitsnetz macht es leichter, ein mutiges Layout auszuprobieren, ohne gute Arbeit zu verlieren.
Zeichenbare Ebenen und Tastenkürzel
Onlook lässt Sie divs und Text direkt im Design nachzeichnen und passenden Code in Echtzeit erzeugen. Die üblichen Tastenkürzel kommen aus anderen Design-Tools, das Muskelgedächtnis überträgt sich also. Ebenen erlauben es, verschachtelte Elemente präzise auszuwählen, wenn ein Abschnitt einen dichten Komponentenbaum hat.
Veröffentlichen und Selbsthosten
Fertige Arbeit kann nach GitHub, auf einen Link oder eine eigene Domain gehen. Da Onlook unter der Apache-2.0-Lizenz quelloffen ist, können Teams es auch kostenlos selbst hosten und jedes Design und jede Code-Änderung auf der eigenen Infrastruktur halten. Die gehostete Version ergänzt Teamfunktionen wie Branches, Theming und SSO zu einem individuellen Preis.
Vor- und Nachteile
Vorteile
- Der Code bleibt die Quelle der Wahrheit, es gibt also keine separate Designdatei, die aktuell gehalten werden muss.
- Quelloffen unter Apache 2.0, mit einer kostenlosen Selbsthost-Option auf eigenen Servern.
- Die KI bearbeitet nach Ihren vorhandenen Komponenten und Tokens, das Ergebnis sieht also nach Teamarbeit aus.
- Live-Zusammenarbeit und Versionshistorie passen dazu, wie Design und Entwicklung schon zusammenarbeiten.
Nachteile
- Es werden nur React- und Next.js-Projekte mit Styling aus Tailwind CSS unterstützt, andere Frameworks fallen derzeit weg.
- Der kostenlose Tarif begrenzt die KI-Nachrichten, was den Assistenten ohne bezahlten Tarif einschränkt.
- Der gehostete Teams-Tarif hat keinen öffentlichen Preis, man muss also den Vertrieb kontaktieren, bevor sich Kosten vergleichen lassen.
- Eine selbst gehostete Instanz einzurichten setzt etwas technisches Geschick beim Ausrollen einer Web-App voraus.
Häufige Fragen
Onlook ist ein visueller Editor zum Bearbeiten von echtem React- und Next.js-Code. Sie bauen, gestalten und prototypen Web-Oberflächen auf einer Leinwand, und die Änderungen landen im Repository statt in einer eigenständigen Designdatei.
Ähnliche Inhalte
Entdecke passende Tools, Skills und Artikel zu Onlook.
Alternativen zu Onlook
GitGlow
GitGlow · Coding · ProduktivitätGitGlow ist ein Git-Client für den Desktop, der Ihren Code und die Änderungen Ihrer KI-Agenten in einer Review bündelt, damit Sie vor dem Ausliefern sehen, was die Maschine verlässt.
Together Link
Together AI · CodingTogether Link ist ein kostenloses Open-Source-Werkzeug von Together AI, das Coding-Agenten wie Claude Code und Codex mit offenen Modellen verbindet, samt automatischem Router und Kostenbeleg pro Sitzung.
HeyPi
Proactive Intelligence Ltd. · Coding · Produktivität · BusinessHeyPi ist eine KI-Meeting-Plattform, in der ein Assistent namens Pi den Call mithört, früheren Kontext behält, in Ihren verbundenen Apps arbeitet und Seiten, Decks und Videos direkt im Gespräch baut.