Onlook - Open-Source-Tool zur Erstellung maßgeschneiderter Apps mit Webflow

• Web-basiertes Tool, mit dem sich Web-Apps ohne Programmierung anpassen und UIs visuell erstellen lassen
• Unterstützt React und TailwindCSS
  • React-Apps lassen sich lokal in Echtzeit bearbeiten und umschreiben
  • Fügt Seiten teilweise CSS ein, um DOM-Elemente auswählbar sowie per Drag-and-Drop verschiebbar zu machen, verfolgt Änderungen und wandelt sie zurück in React-Code um
• Interessante Aspekte
  • Integrierter React-Parser, der Styles analysiert, einfügt und in Code serialisiert
  • Enthält außerdem einen React-Präprozessor, der DOM-Elemente in den zugehörigen Code umwandelt
  • Parst/injiziert CSS und wandelt es in Tailwind um
  • Electron-App, die Message Passing mit einer Node-App durchführt

[GN⁺]

Hacker-News-Kommentare

• Wäre bereit, einen hohen Preis zu zahlen, wenn es sich mit Microsoft PCF und den Build-Tools integrieren ließe
• Ich weiß nicht, was mit „components“ gemeint ist, aber wenn man React-Komponenten in den Editor holen könnte und ein WYSIWYG-Designer die Props bearbeiten könnte, wäre das sehr nützlich
• Design-/Entwicklungsmodi passen nicht zur tatsächlichen Arbeitsweise von Teams
  • Entwickler übernehmen mehr Designarbeit, als man denkt
  • Designer kümmern sich um die komplexen Teile, Entwickler um einfache Designs
  • Navigation und Routing können komplex sein, daher übernehmen Entwickler oft das Screen-Layout
  • Designsysteme werden als Komponenten umgesetzt und wegen Usability-Problemen oder zusätzlichem Design angepasst
  • Designer möchten Komponenten wieder zu Abschnitten und Screens neu zusammensetzen
  • Designer möchten Props wie Bilder, Text und IDs setzen, und Entwicklungskomponenten sollen sich automatisch synchronisieren
• Scheint ein gutes Gleichgewicht zwischen Entwicklung und Design zu finden
• Es wäre gut, Open Source plus eine kostenpflichtige Hosting-Stufe anzubieten
• Dieses Projekt ist es wert, beobachtet zu werden
• Eine Funktion, die Code und Unterschiede zeigt und ein Neuschreiben erlaubt, wäre sehr nützlich
• Als AOLPress-Nutzer überrascht es mich, dass es 2024 nicht mehr WYSIWYG-Tools gibt, aber ich verstehe auch, warum Design schwierig ist
• Die meisten Tools versuchen, Entwickler und Designer zugleich anzusprechen, und machen am Ende beides nicht gut
• Auch die Qualität und Wartbarkeit des generierten Codes ist ein Problem
• Danke dafür, dass ihr das als Open Source bereitstellt
• Noch ein paar Fragen:
  • Gibt es einen Monetarisierungsplan, und wenn ja, welche Ideen gibt es dazu?
  • Was ist das große Bild für Studio: Wollt ihr euch nur auf das Bearbeiten von Styles konzentrieren oder plant ihr, alles für den Website-Bau bereitzustellen?
• Ich möchte einen visuellen Editor wie Webflow, aber ohne den BS und ohne aggressive Preispolitik
• Es wird ein Tool gebraucht, das einfaches HTML, CSS und JS erzeugt und mit dem jeder im Unternehmen Seiten ändern oder neu erstellen kann
• Ich bin neugierig, womit die Animationen erstellt wurden
• Der Ansatz, mit einem React-Parser Styles einzufügen und wieder in Code zu serialisieren, ist interessant
• Ich frage mich, warum es statt mit React mit Svelte neu geschrieben wurde
• Ich denke, das UI-Baugruppenmodell von Webflow ist ein guter Mittelweg zwischen Einfachheit und Anpassbarkeit
• Webflow ist teuer, und ich mag es nicht, Projekte ihrer Kontrolle zu unterstellen
• Der CTA „Mit dem Gründer sprechen“ könnte verwirrend sein
  • Es wäre besser, ihn in eine Formulierung zu ändern, die dem Nutzer den Mehrwert vermittelt, etwa „Demo buchen“
• Webflow ist eine SaaS-App, aber diese App benötigt Hosting
  • Nichttechnische Nutzer wissen möglicherweise nicht, wie man Hosting einrichtet
  • Entwickler müssen Hosting- und Wartungszeit berücksichtigen
  • Es wäre gut, sie als Open Source anzubieten, aber auch eine gehostete Version bereitzustellen