Onlook - ferramenta de criação de apps personalizados com o Webflow de código aberto

• Ferramenta baseada na web que permite modificar apps web e construir interfaces visualmente sem precisar programar
• Suporta React e TailwindCSS
  • Permite editar e reescrever apps React localmente em tempo real
  • Injeta parte do CSS na página para permitir selecionar elementos do DOM e usar arrastar e soltar, rastreando as mudanças e convertendo-as de volta para código React
• Partes interessantes
  • Inclui um parser React embutido que analisa estilos, injeta e serializa para código
  • Também inclui um pré-processador React que converte elementos DOM para o código correspondente
  • Faz parsing/injeção de CSS e converte para Tailwind
  • Como app Electron, realiza troca de mensagens com um app Node

[GN⁺]

Opiniões no Hacker News

• Eu pagaria um preço alto se isso se integrasse ao Microsoft PCF e às ferramentas de build
• Não sei exatamente o que significa components, mas seria muito útil se fosse possível importar componentes React para o editor e permitir que um designer WYSIWYG alterasse as props
• O modo de design/desenvolvimento não corresponde à forma como as equipes realmente trabalham
  • Desenvolvedores fazem mais trabalho de design do que se imagina
  • Designers cuidam das partes complexas, e desenvolvedores ficam com os designs simples
  • Navegação e roteamento podem ser complexos, então os desenvolvedores frequentemente acabam responsáveis pelo layout das telas
  • Sistemas de design são implementados como componentes e depois modificados por questões de usabilidade ou por design adicional
  • Designers querem recompor os componentes novamente em seções e telas
  • Designers querem definir props como imagens, texto e ID, e que os componentes de desenvolvimento sejam sincronizados automaticamente
• Parece estar equilibrando bem desenvolvimento e design
• Seria bom oferecer open source com uma camada de hospedagem paga
• Este projeto vale a pena acompanhar
• Um recurso que mostre o código e o diff, e permita reescrever, parece muito útil
• Como usuário do AOLPress, me surpreende que em 2024 não existam mais ferramentas WYSIWYG, mas também entendo por que design é difícil
• A maioria das ferramentas tenta mirar em desenvolvedores e designers ao mesmo tempo e acaba não fazendo bem nenhum dos dois
• A qualidade do código gerado e a facilidade de manutenção também são um problema
• Obrigado por tornar isso open source
• Mais algumas perguntas:
  • Existe algum plano de monetização? Se sim, que ideias existem?
  • Qual é a visão geral do Studio? O foco será apenas na edição de estilos ou o plano é fornecer tudo o que for necessário para construir sites?
• Quero um editor visual como o Webflow, mas sem baboseira e sem uma política de preços agressiva
• Preciso de uma ferramenta que gere HTML, CSS e JS simples, para que qualquer pessoa da empresa possa alterar páginas ou criar novas
• Fiquei curioso sobre o que foi usado para criar as animações
• A abordagem de usar um parser de React para inserir estilos e depois serializar de volta para código é interessante
• Fiquei curioso sobre o motivo de terem reescrito isso em Svelte em vez de React
• Acho que o modelo de montagem de UI do Webflow é um bom ponto de equilíbrio entre simplicidade e customização
• O Webflow é caro, e não gosto da ideia de deixar o projeto sob o controle deles
• O CTA “Conversar com o fundador” pode ser confuso
  • Seria melhor trocar por algo que transmita valor ao usuário, como “Agendar demo”
• O Webflow é um app SaaS, mas este app precisa de hospedagem
  • Usuários não técnicos podem não saber como hospedar isso
  • Desenvolvedores precisam considerar o tempo de hospedagem e manutenção
  • Seria bom oferecer como open source, mas também disponibilizar uma versão hospedada