- Ein Open-Source-Visual-Vibe-Coding-Editor, mit dem sich Websites, Prototypen und Designs im Web zusammen mit Live-Code erstellen lassen
- Basiert auf Next.js + TailwindCSS, mit Live-Vorschau im Browser und direkter Bearbeitung des DOM
- Ziel ist eine Open-Source-Alternative zu kommerziellen Diensten wie Bolt, Lovable, V0, Replit Agent, Figma Make und Webflow
Hauptfunktionen
- Sofortige Generierung von Next.js-Apps aus Text/Bildern – Figma-Import, Templates usw. sind geplant
- Erstellung von Seiten mit einer Figma-ähnlichen UI, Verwaltung von Assets und Tokens sowie Live-Vorschau
- Live-Code-Editor, Speichern und Wiederherstellen von Checkpoints, Ausführen von Befehlen per CLI, Marketplace-Integration
- Unterstützung visueller Bearbeitung wie Drag-and-Drop, Bearbeiten von Tailwind-Stilen und Layout-Experimenten
- Live-Bearbeitung / Kommentare / Freigabelinks / Custom Domains sind geplant
- Web-basiert, kann aber auch mit der Desktop-App (Onlook Desktop) verbunden werden
Architektur und Funktionsweise
- Beim Erstellen einer App wird der Code in einen Web-Container geladen und dort ausgeführt
- Ein Vorschaulink wird per iFrame im Editor angezeigt, inklusive Zuordnung zwischen Code und UI
- Ein AI-Chatbot unterstützt beim Zugriff auf und Bearbeiten von Code und kann den Code direkt verstehen und ändern
- Erweiterbar auf verschiedene Frameworks mit deklarativem DOM wie JSX/TSX/HTML
Verwendeter Tech-Stack
- Frontend: Next.js, TailwindCSS, tRPC
- Datenbank/Storage: Supabase, Drizzle
- AI: AI SDK, Anthropic, Morph Fast Apply, Relace
- Sandbox/Hosting: CodeSandboxSDK, Freestyle
- Runtime/Bundler: Bun, Docker
Weitere Informationen
- Apache-2.0-Lizenz
- Die Web-App wird bald veröffentlicht, die Desktop-App wird ebenfalls separat bereitgestellt
- Vollständige Dokumentation und Informationen zur Mitwirkung an der Entwicklung finden sich in der offiziellen Dokumentation
2 Kommentare
Onlook - Open-Source-Webflow für die Erstellung maßgeschneiderter Apps
Das wurde vor etwa einem Jahr schon einmal unter so einem Titel gepostet, aber die Benennung ist eben wichtig. OOO for XXX ist leichter zu verstehen.