Onlook - herramienta de creación de apps personalizadas con Webflow de código abierto

• Herramienta web que permite modificar apps web y construir la UI visualmente sin necesidad de programar
• Soporta React y TailwindCSS
  • Permite editar y reescribir apps de React en tiempo real de forma local
  • Inserta parte del CSS en la página para permitir seleccionar elementos del DOM y habilitar arrastrar y soltar, y luego rastrea los cambios para volver a convertirlos en código React
• Partes interesantes
  • Incluye un parser de React integrado que analiza estilos, los inserta y los serializa como código
  • También incluye un preprocesador de React que convierte elementos del DOM en su código correspondiente
  • Parsea/inserta CSS y lo convierte a Tailwind
  • Como app de Electron, realiza paso de mensajes con una app de Node

[GN⁺]

Opiniones de Hacker News

• Estaría dispuesto a pagar un precio alto si se integrara con Microsoft PCF y herramientas de build
• No sé qué significa 'components', pero sería muy útil si se pudieran importar componentes de React al editor y que un diseñador WYSIWYG pudiera modificar sus props
• El modo de diseño/desarrollo no encaja con la forma real de trabajar de los equipos
  • Los desarrolladores hacen más trabajo de diseño de lo que uno pensaría
  • Los diseñadores se encargan de las partes complejas, y los desarrolladores de los diseños simples
  • La navegación y el routing pueden ser complejos, así que los desarrolladores a menudo se encargan del layout de las pantallas
  • Los sistemas de diseño se implementan como componentes y se modifican por problemas de usabilidad o diseño adicional
  • Los diseñadores quieren volver a componer los componentes en secciones y pantallas
  • Los diseñadores quieren configurar props como imágenes, texto e ID, y que los componentes de desarrollo se sincronicen automáticamente
• Parece que logra un buen equilibrio entre desarrollo y diseño
• Sería bueno ofrecer open source y un nivel de hosting de pago
• Este proyecto vale la pena seguirlo
• Una función que muestre el código y las diferencias, y permita reescribirlo, parece muy útil
• Como usuario de AOLPress, me sorprende que en 2024 no haya más herramientas WYSIWYG, aunque entiendo por qué el diseño es difícil
• La mayoría de las herramientas intentan apuntar a desarrolladores y diseñadores, pero no hacen bien ninguna de las dos cosas
• La calidad y mantenibilidad del código generado también son un problema
• Gracias por hacerlo open source
• Algunas preguntas adicionales:
  • Si hay un plan de monetización y, de ser así, qué ideas tienen
  • Cuál es la visión general de Studio, si solo se enfocará en la edición de estilos o si planean ofrecer todo lo necesario para crear sitios web
• Quiero un editor visual como Webflow, pero sin el BS ni su política agresiva de precios
• Se necesita una herramienta que genere HTML, CSS y JS simples, y que cualquiera en la empresa pueda modificar o crear páginas nuevas
• Tengo curiosidad por saber con qué hicieron las animaciones
• Es interesante el enfoque de usar un parser de React para insertar estilos y luego serializarlos de vuelta a código
• Tengo curiosidad por saber por qué lo reescribieron en Svelte en lugar de React
• Creo que el modelo de ensamblaje de UI de Webflow es una buena intersección entre simplicidad y personalización
• Webflow es caro y no me gusta dejar los proyectos bajo su control
• El CTA "Habla con el fundador" podría ser confuso
  • Sería mejor cambiarlo por un texto que comunique valor al usuario, como "Agenda una demo"
• Webflow es una app SaaS, pero esta app necesita hosting
  • Los usuarios no técnicos podrían no saber cómo hacer el hosting
  • Los desarrolladores tienen que considerar el tiempo de hosting y mantenimiento
  • Sería bueno ofrecerlo como open source, pero también una versión hospedada