Onlook
Onlook ist ein Open-Source-, lokal-first visueller Editor, der es Ihnen ermöglicht, React-Anwendungen in Echtzeit zu bearbeiten und Änderungen zurück in den Code zu schreiben, ähnlich wie Figma, aber direkt in Ihr Code-Repository integriert.
https://onlook.dev/?ref=aipure&utm_source=aipure
Produktinformationen
Aktualisiert:Jun 16, 2025
Onlook Monatliche Traffic-Trends
Onlook erhielt im letzten Monat 727.0 Besuche, was ein Signifikantes Wachstum von Infinity% zeigt. Basierend auf unserer Analyse entspricht dieser Trend der typischen Marktdynamik im Bereich der KI-Tools.
Verlaufsdaten anzeigenWas ist Onlook
Onlook ist ein Entwickler-Tool, das entwickelt wurde, um die Lücke zwischen Design und Entwicklung in React-Anwendungen zu schließen. Es bietet eine Figma-ähnliche Schnittstelle, die es Ihnen ermöglicht, Ihre React-Apps visuell zu bearbeiten, während der entsprechende Code automatisch generiert und aktualisiert wird. Speziell für React-Anwendungen unter Verwendung von Tailwind CSS (mit Plänen zur Unterstützung anderer Frameworks und Stile) entwickelt, funktioniert Onlook als Desktop-Anwendung, die lokal auf Ihrem Computer ausgeführt wird, wodurch sichergestellt wird, dass Ihr Code sicher und privat bleibt.
Hauptfunktionen von Onlook
Onlook ist ein Open-Source-Visual-Editor für React-Anwendungen, der Designern und Entwicklern ermöglicht, Live-Änderungen direkt im Browser-DOM vorzunehmen und Änderungen in Echtzeit wieder in den Code zu schreiben. Es integriert sich mit React + TailwindCSS-Projekten und ermöglicht es den Benutzern, Layouts, Stile, Komponenten und Texte visuell zu bearbeiten, ohne Code zu schreiben, während die Versionskontrolle aufrechterhalten wird und der gesamte Code lokal bleibt.
Visuelles Live-Editing: Bearbeiten Sie React-Komponenten, Layouts und Stile direkt im Browser mit einer Figma-ähnlichen Benutzeroberfläche und sehen Sie Änderungen in Echtzeit
Code-Generierung: Generiert und schreibt automatisch zuverlässigen React-Code basierend auf visuellen Änderungen und platziert ihn genau dort, wo er in Ihrem Codebase benötigt wird
Integration von Designsystemen: Verwendet vorhandene Komponenten und Variablen aus Ihrem Codebase, was eine nahtlose Integration mit Ihrem aktuellen Setup ermöglicht
Local-First-Architektur: Alle Codes bleiben auf Ihrem Gerät und verlassen niemals Ihre Maschine, was Sicherheit und Datenschutz während der Arbeit mit Ihrem bestehenden Build-Prozess gewährleistet
Anwendungsfälle von Onlook
Schnelles UI-Prototyping: Designer können neue Schnittstellendesigns schnell prototypisieren und direkt in der Live-React-Umgebung testen
Zusammenarbeit zwischen Design und Entwicklung: Teams können die Lücke zwischen Design und Entwicklung schließen, indem sie in derselben Umgebung mit visuellen Werkzeugen und Codeausgaben arbeiten
Wartung von Designsystemen: Teams können Designsysteme einfach aktualisieren und pflegen, indem sie Änderungen visuell vornehmen und gleichzeitig den entsprechenden Code automatisch generieren
Vorteile
Open-Source und aktiv von der Community unterstützt
Keine Code-Migration erforderlich - funktioniert mit bestehenden React-Projekten
Der Local-First-Ansatz gewährleistet Sicherheit und Datenschutz
Vertraute Figma-ähnliche Benutzeroberfläche für Designer
Nachteile
Unterstützt derzeit nur React mit TailwindCSS
Befindet sich noch in der Alpha-Release-Phase
Erfordert die Einrichtung einer lokalen Entwicklungsumgebung
Wie verwendet man Onlook
Herunterladen und Installieren: Laden Sie die Onlook Desktop-App für Apple Silicon oder Windows von onlook.dev/download herunter
Richten Sie Ihr React-Projekt ein: Führen Sie 'npx onlook' im Stammordner Ihres React-Projekts aus, um Onlook mit Ihrem Projekt zu verknüpfen
Starten Sie Ihr Projekt: Öffnen Sie Ihr React-Projekt lokal (typischerweise unter http://localhost:3000)
Öffnen Sie Onlook Studio: Öffnen Sie die Onlook-Desktop-App und zeigen Sie auf die lokale URL Ihres laufenden Projekts
Beginnen Sie mit der Bearbeitung: Verwenden Sie den visuellen Editor, um Layouts, Farben, Texte, Stile und mehr direkt in Ihrer Live-React-App zu ändern
Änderungen vornehmen: Verwenden Sie die Figma-ähnliche Schnittstelle, um die Designelemente Ihrer App zu bearbeiten, einschließlich Typografie, Ränder, Abstände, Margen und mehr
Überprüfen Sie die Codeänderungen: Onlook wird Ihre visuellen Änderungen automatisch in React-Code übersetzen
Änderungen veröffentlichen: Verwenden Sie die Option 'Code veröffentlichen', um Ihre Änderungen über GitHub in Ihr Code-Repository zu übernehmen
Onlook FAQs
Onlook ist eine Open-Source-Anwendung für den Desktop, die lokal-first ist und es Ihnen ermöglicht, React-Apps visuell zu bearbeiten und Änderungen in Echtzeit zurück in den Code zu schreiben, ähnlich wie Figma, aber für React-Anwendungen.
Offizielle Beiträge
Wird geladen...Onlook Video
Beliebte Artikel
SweetAI Chat vs. HeraHaven: Finde deine Spicy AI Chatting App im Jahr 2025
Jul 10, 2025
SweetAI Chat vs. Secret Desires: Welcher KI-Partner-Builder ist der Richtige für Sie?
Jul 10, 2025
Wie man virale KI-Tiervideos im Jahr 2025 erstellt: Eine Schritt-für-Schritt-Anleitung
Jul 3, 2025
Top SweetAI Chat Alternativen im Jahr 2025: Beste AI Freundin & NSFW Chat Plattformen im Vergleich
Jun 30, 2025
Analyse der Onlook Website
Onlook Traffic & Rankings
727
Monatliche Besuche
-
Globaler Rang
-
Kategorie-Rang
Traffic-Trends: Sep 2024-Jun 2025
Onlook Nutzereinblicke
-
Durchschn. Besuchsdauer
1
Seiten pro Besuch
100%
Nutzer-Absprungrate
Top-Regionen von Onlook
Others: 100%
Neueste KI-Tools ähnlich wie Onlook
Gait
Gait ist ein Collaboration-Tool, das KI-unterstützte Codegenerierung mit Versionskontrolle integriert und es Teams ermöglicht, KI-generierten Codekontext effizient zu verfolgen, zu verstehen und zu teilen.
invoices.dev
invoices.dev ist eine automatisierte Rechnungsplattform, die Rechnungen direkt aus den Git-Commits der Entwickler generiert und Integrationsmöglichkeiten für GitHub, Slack, Linear und Google-Dienste bietet.
EasyRFP
EasyRFP ist ein KI-gestütztes Edge-Computing-Toolkit, das RFP (Request for Proposal)-Antworten optimiert und eine Echtzeit-Feldphänotypisierung durch Deep-Learning-Technologie ermöglicht.
Cart.ai
Cart.ai ist eine KI-gestützte Dienstleistungsplattform, die umfassende Lösungen zur Automatisierung von Geschäftsprozessen bietet, einschließlich Programmierung, Kundenbeziehungsmanagement, Videobearbeitung, E-Commerce-Setup und benutzerdefinierter KI-Entwicklung mit 24/7 Unterstützung.
Beliebte KI-Tools wie Onlook
GitHub Copilot Chat
GitHub Copilot Chat ist ein KI-gestützter Codierungsassistent, der Interaktionen in natürlicher Sprache, Echtzeit-Codevorschläge und kontextuelle Unterstützung direkt innerhalb unterstützter IDEs und GitHub.com bietet.
CopilotForXcode
CopilotForXcode ist eine Xcode-Quell-Editor-Erweiterung, die GitHub Copilot, Codeium und ChatGPT integriert, um KI-gestützte Codevorschläge, Chat-Unterstützung und Prompt-to-Code-Funktionalität innerhalb von Xcode bereitzustellen.
BrowserAI
BrowserAI ist eine Open-Source-Bibliothek, die die Ausführung lokaler Large Language Models (LLMs) direkt in Webbrowsern mit WebGPU-Beschleunigung ermöglicht und datenschutzorientierte KI-Funktionen bietet, ohne dass eine Serverinfrastruktur erforderlich ist.
OpenAI Codex CLI
OpenAI Codex CLI ist ein schlanker Open-Source-Coding-Agent, der in Ihrem Terminal ausgeführt wird und es Entwicklern ermöglicht, natürliche Sprache in Codeausführung zu übersetzen und gleichzeitig ChatGPT-ähnliche Argumentation mit der Möglichkeit, Code auszuführen, Dateien zu bearbeiten und unter Versionskontrolle zu iterieren, bereitzustellen.