Onlook - outil open source inspiré de Webflow pour créer des applications sur mesure

• Outil web permettant de modifier des applications web et de construire visuellement une UI sans avoir besoin de coder
• Prend en charge React et TailwindCSS
  • Permet d’éditer et de réécrire en temps réel des applications React en local
  • Injecte une partie du CSS dans la page pour rendre les éléments du DOM sélectionnables et manipulables en glisser-déposer, puis suit les changements pour les reconvertir en code React
• Points intéressants
  • Intègre un parseur React capable d’analyser les styles, de les injecter et de les sérialiser en code
  • Comprend aussi un préprocesseur React qui convertit les éléments du DOM en code correspondant
  • Parse/injecte le CSS et le convertit en Tailwind
  • Fonctionne comme une application Electron qui échange des messages avec une application Node

[GN⁺]

Avis Hacker News

• Je serais prêt à payer cher si cela s’intégrait avec Microsoft PCF et les outils de build
• Je ne sais pas ce que signifie « components », mais s’il est possible d’importer des composants React dans l’éditeur et de laisser un designer WYSIWYG modifier les props, ce serait très utile
• Les modes design/développement ne correspondent pas à la façon dont les équipes travaillent réellement
  • Les développeurs font plus de travail de design qu’on ne le pense
  • Les designers s’occupent des parties complexes, et les développeurs des designs simples
  • La navigation et le routage peuvent être complexes, donc les développeurs prennent souvent en charge la mise en page des écrans
  • Les design systems sont implémentés sous forme de composants et sont modifiés pour des problèmes d’utilisabilité ou des besoins de design supplémentaires
  • Les designers veulent recomposer les composants en sections puis en écrans
  • Les designers veulent définir des props comme les images, le texte et les ID, et que les composants de développement se synchronisent automatiquement
• Cela semble bien équilibrer développement et design
• Ce serait bien de proposer de l’open source avec une offre d’hébergement payante
• Ce projet mérite qu’on s’y intéresse
• Une fonctionnalité montrant le code et les différences, avec possibilité de réécriture, semble très utile
• En tant qu’utilisateur d’AOLPress, je suis surpris qu’il n’y ait pas plus d’outils WYSIWYG en 2024, mais je comprends aussi pourquoi le design est difficile
• La plupart des outils essaient de cibler à la fois les développeurs et les designers, et ne font bien ni l’un ni l’autre
• La qualité et la maintenabilité du code généré sont aussi un problème
• Merci de l’avoir rendu open source
• Quelques questions supplémentaires :
  • Y a-t-il un plan de monétisation, et si oui, quelles idées avez-vous
  • Quelle est la vision d’ensemble de Studio : se concentrer uniquement sur l’édition de styles, ou fournir tout ce qu’il faut pour créer un site web
• Je veux un éditeur visuel comme Webflow, mais sans le bullshit ni la politique tarifaire agressive
• Il faut un outil qui génère du HTML, CSS et JS simples, afin que n’importe qui dans l’entreprise puisse modifier ou créer de nouvelles pages
• Je me demande avec quoi les animations ont été faites
• L’approche consistant à utiliser un parseur React pour injecter des styles puis les re-sérialiser en code est intéressante
• Je me demande pourquoi cela a été réécrit en Svelte plutôt qu’en React
• Je pense que le modèle d’assemblage d’interface de Webflow est un bon point d’équilibre entre simplicité et personnalisation
• Webflow est cher, et je n’aime pas laisser les projets sous leur contrôle
• Le CTA « Parler au fondateur » peut prêter à confusion
  • Il vaudrait mieux le remplacer par une formule qui transmet de la valeur à l’utilisateur, comme « Réserver une démo »
• Webflow est une application SaaS, mais cette application nécessite un hébergement
  • Les utilisateurs non techniques peuvent ne pas savoir comment l’héberger
  • Les développeurs doivent tenir compte du temps d’hébergement et de maintenance
  • Ce serait bien de la proposer en open source, tout en offrant aussi une version hébergée