Skip to content
Search

Onlook

lastmod 2024-07-11created 2024-07-111 edits

A custom app builder using open-source Webflow

Features

  • A web-based tool for editing web apps and building UIs visually without coding
  • Supports React and TailwindCSS
    • Edit and rewrite local React apps in real time
    • Injects some CSS into the page to make DOM elements selectable and drag-and-droppable, tracks changes, and converts them back into React code
  • Interesting parts
    • Built-in React parser that analyzes, injects, and serializes styles back into code
    • Also includes a React preprocessor that maps DOM elements to the corresponding code
    • Parses/injects CSS and converts it to Tailwind
    • Message passing with the Node app via an Electron app

Hacker News comments

  • Show HN: Open-sourced Webflow for your own app | Hacker News
  • Would be willing to pay a high price if it integrated with Microsoft PCF and build tools
  • Not sure what 'components' means, but being able to bring React components into the editor and have a WYSIWYG designer edit their props would be very useful
  • The design/dev mode doesn't match how teams actually work
    • Developers do more design work than you'd think
    • Designers handle the complex parts, developers handle simple designs
    • Navigation and routing can be complex, so developers often handle screen layouts
    • Design systems are implemented as components and get modified due to usability issues or additional design
    • Designers want to recompose components back into sections and screens
    • Designers want to set props such as images, text, and IDs, and have the dev components sync automatically
  • Seems to strike a good balance between development and design
  • Offering open source plus a paid hosting tier would be good
  • This project is worth watching
  • The ability to show the code and diff and rewrite it seems very useful
  • As an AOLPress user, surprised there aren't more WYSIWYG tools in 2024, but also understand why design is hard
  • Most tools try to target both developers and designers and end up doing neither well
  • The quality and maintainability of the generated code is also an issue
  • Thanks for making it open source
  • A few added questions:
    • Are there monetization plans, and if so, what ideas
    • What is the big picture for Studio: focus only on style editing, or plan to provide everything needed to build a website
  • Want a visual editor like Webflow, but without the BS and aggressive pricing
  • Need a tool that generates plain HTML, CSS, and JS so anyone in the company can change pages or create new ones
  • Curious what the animations were made with
  • The approach of using a React parser to inject styles and serialize them back into code is interesting
  • Curious why it was rewritten in Svelte instead of React
  • Thinks Webflow's UI assembly model is a good intersection of simplicity and customization
  • Webflow is expensive, and dislikes having projects under their control
  • The "Talk to the founders" CTA could be confusing
    • Better to change it to wording that conveys value to users, such as "Book a demo"
  • Webflow is a SaaS app, but this app needs hosting
    • Non-technical users may not know how to host it
    • Developers have to account for hosting and maintenance time
    • Better to offer it as open source but also provide a hosted version

See also

Favorite site

author Zer0 sitemap