10 ms·

Show HN: Open-sourced Webflow for your own app

336 points by hoakiet98 2y ago

Hi HN, I’m Kiet, one of the creators of Onlook studio. I made this app that allows you to visually edit your locally running React app and write the code back to it in real-time. The purpose is to allow you to develop UI while fully owning your code the whole time. There are other visual builders out there but they either require you to upload your code to the cloud or some lengthy setup process. Onlook runs locally, deterministically, and only requires adding a plugin for the compile step (2 lines of config change). Technical details: This is technically a web browser that can point to your localhost, which injects some CSS into the page that allows you to select, drag, and drop DOM elements, then track and translate those changes back into React code. Theoretically, you could do this with any compiled framework but I wanted a reasonable scope for the launch (the first version was actually in Svelte). Some interesting challenges: 1. There is a React parser that is used to parse, insert the style, and serialize it back to code 2. There is a React pre-processor that traces the DOM elements to the corresponding code 3. There's also CSS parsing, injection, and converting to Tailwind 4. This is also an Electron app so there’s a browser within a browser within a node app which makes message passing… interesting What’s next? We’ve already built a proof-of-concept for inspecting and selecting layers, dragging to reorder, and inserting new DOM elements that I’m working on porting over from our private codebase. We’re also exploring opening more tabs in new frames in order to A/B test the changes before committing to code. There’s a long tail of exciting features we can do but I want to put this out there first and see what others would need. Let me know what you think/feedback. It's been a blast working on this so far and I think it’s just neat :)

autorun 2y ago
also reminds me about https://puckeditor.com https://puckeditor.com
ramesh31 2y ago
The main problem with these kind of tools is that they sit in a "dead zone" of being too in depth for non-technicals, yet too limiting and inefficient for engineers to bother with, as they end up injecting a huge bundle on the page just to render a form. How are you solving for that?
- toddmorey 2y ago
  This... isn't that. Changes made in the visual editor are translated into code and submitted to your project as a GH pull request for review. So from a project / software perspective, it looks and works like a FE engineer committed a code change.
  - hoakiet98 2y ago
    > it looks and works like a FE engineer committed a code change. This is exactly the goal :) To ramesh31 point, we're trying to be cognizant about not putting bloat into the code as we support things like inserting new components since that is where these types of tools typically converge.
- hoakiet98 2y ago
  This is very astute. We went too far in the non-technical route the first time. It was unrealistic to expect a non-technical person to clone or run code locally so it was hard to get to the value point for them. Hence, we're focusing on this being more efficient for the engineer. We're limiting to just injecting clean styling for now which is where I personally spend too much time with UIs. The initial goal is to shorten the loop between code, save, check the browser, adjust code, repeat... and just give engineers the ability to edit the page directly like you would a Figma prototype.
- deleted 2y ago
  [deleted]
- DrewADesign 2y ago
  While that might be true at the moment, this is a (well designed) electron instance (edit: exists? I only saw install instructions for NPM so maybe it just needs built executables? it says it uses electron) away from being a modern replacement for WYSIWYG editors like Dreamweaver. I could see an easy integration to push your page up to a CDN or GH Pages instance. Even without, there are tons of places for moderately technical people to host static websites, and “upload the code and pictures to a server in this folder” is within many more people’s technical grasp now than it was 20 years ago. Most people don’t need all of the scaffolding most modern dynamic websites have. Online SAAS WYSIWYG web authoring tools— wix, squarespace, Wordpress, et al— have been the only practical option for people without front-end dev skills; beyond that, you’re in SSG land which requires a big jump in knowledge for very little gain in utility until you really start getting some dev knowledge, and most people don’t want or need that knowledge. Being able to stand up a site and tweak the code here and there to do something a little different is a great spot to sit in. Hell it’s what got me started on web stuff with my geocities site nearly 30 years ago. I think this is a great example of why we need more product people involved with FOSS. Having worked in dev for quite some time before I got into design, I’ve experienced the blind spots inherent to having a purely technical focus. From the dev perspective, user needs often seem straightforward or even intuitive, but that’s heavily skewed by a completely different approach to using and reasoning about software than end users have. Developers are often pessimistic about users that seemingly always fail to grasp something they consider trivial, but developers rarely have to confront the actual complexity of other people’s jobs. Lots of people are smart and can solve problems, even if they don't have a formidable mental model of software development. Tweaking basic HTML/CSS generated by something else is well within their problem-solving capability and doesn’t require much technical know-how.
minajevs 2y ago
A bit off-topic, but this landing page "steals" my cursor, presumably for that special hero effect, which makes it dizzingly laggy and unresponsive.
- deleted 2y ago
  [deleted]
- biosboiii 2y ago
  Same 4 me, every web dev now owns a 3k MacBook and it shows
- hoakiet98 2y ago
  This is a common complaint, I'll be sure to take this off
- nalinidash 2y ago
  Though stealing the cursor is okay, having 2 cursors in the page without my own cursor was confusing.Also the lag is very apparent.
patrickaljord 2y ago
Looks great. Any plan to make it work in a browser instead of having to install an Electron app?
- hoakiet98 2y ago
  No plans for now, this seems to be the best form to support the features we need. It was initially a Chrome extension [1] but there were limitations with local file access and UX from jumping around to multiple pages. Very early on I developed this as a web app but it was also difficult to inject styles into iframe, especially for ones that we didn't own directly. Electron ships Chromium by default so it was easy to leverage into an editable browser plus allowing us to do an infinite canvas style editor. If you know of ways around these limitations please let me know. I'm always trying to figure out a way to turn this into a web app instead. [1] https://chromewebstore.google.com/detail/onlook/icbcddooibfghgmdiafjdjelfiejkpnd https://chromewebstore.google.com/detail/onlook/icbcddooibfg...
  - meiraleal 2y ago
    I'm curious about the chrome extension issues as I'm wondering about creating a project using it, with all the problems it brings with marketing. What does `UX from jumping around to multiple pages` mean?
    - hoakiet98 2y ago
      You can try it out below. It's not so evident from the demo but there's an inherent flaky feel to using a Chrome extension as a builder. You never feel sure your states are saved correctly and where you can go to review changes. There's also the platform risk with Chrome Web Store being poorly supported. I've had important updates take up to a week to come out for no transparent reason. It might just be a UX we have not cracked but it was easy to onboard, hard to stick. It is also unceremoniously open-sourced so if you want to take up the code I'm happy to support that. https://youtu.be/pUzCOpIE1zQ?feature=shared https://youtu.be/pUzCOpIE1zQ?feature=shared https://chromewebstore.google.com/detail/onlook/icbcddooibfghgmdiafjdjelfiejkpnd https://chromewebstore.google.com/detail/onlook/icbcddooibfg... https://github.com/onlook-dev/monorepo https://github.com/onlook-dev/monorepo
pavlov 2y ago
Watch out for trademarks. Your slogan “The power of WebFlow for your React app” is going to attract attention from Webflow’s legal department if your project is successful.
- deleted 2y ago
  [deleted]
- hoakiet98 2y ago
  Agreed. I was worried that it's derivative while trying to communicate what we do succinctly. I know Supabase does the same thing with Firebase but our wording might be more problematic.
  - DrewADesign 2y ago
    Honestly I would change that wording immediately. Even being pretty savvy with this stuff, I thought this was an open-sourced webflow when I skimmed it and I assure you, if they even vaguely consider this a future threat to any of their business at all, their counsel will use it as a legal cudgel to bludgeon you.
    - lukan 2y ago
      I agree "the power of webflow" implies a connection. "inspired by webflow" would be probably better, but even there I am not sure if it is safe enough.
      - DrewADesign 2y ago
        Absolutely. If I came out with a project that said "Get the power of Oracle with a simple javascript API" people would think I had a new Oracle API for javascript, not that I had a JS-friendly database I thought was as good as Oracle. But before I even mentioned webflow at all, I'd first want to make sure they didn't have any related patents I'd be bumping up against without being able to clearly show prior art. Only after that might I consider saying "webflow-style workflow" or something along those lines. It's sad, but you have to assume their lawyers will use every legal tool at their disposal to protect their client's bottom line whether its reasonable or not.
rsp1984 2y ago
This looks pretty awesome but, speaking only for myself here, the thing I actually want is just Webflow but without the BS and predatory pricing. A visual editor that produces plain old HTML, CSS, JS and that anyone in our company can use to make changes to pages or create new ones. That's it. I don't think it exists (if so, pointers would be very welcome!), so here's my comment to incentivize someone to build it.
- freedomben 2y ago
  I agree. What I personally would love is a WYSIWYG front end to a static site generator that uses eex or erb. If the tool is sufficiently open source and works well with some hand tweaking of generated HTML, then eex/erb isn't strictly necessary. I'm optimistic about this though, because my suspicion is that since this tool just exports React, you could relatively easily achieve this using Next.js SSG building. As long as you aren't doing any build time or runtime dynamic data loading, by adding one more step you can use this for that, with the bonus that if complexity goes up to the point where you would want to componentize, your tool is ready for that.
  - rchaud 2y ago
    Pinegrow Web Editor and Bootstrap Studio could fit the bill. No subscription, no cloud, one-time purchase. Exported HTML is fully readable and editable outside the app.
  - hoakiet98 2y ago
    > because my suspicion is that since this tool just exports React, you could relatively easily achieve this using Next.js SSG building At the core, we generate pure HTML and CSS, then serialize those into React and Tailwind. It would be one less step to expose the HTML and CSS instead. I wanted a narrow scope to this so that's the focus but I imagine there's a plugin setup we can do to swap in what framework (or non-framework) you would need.
- localfirst 2y ago
  but this is a tough problem with constant maintenance involved and you want it solved for free and handed to you on a silver platter have you considered paying developers or supporting open source software? I doubt it.
_fat_santa 2y ago
I think one challenge that you will face is that Webflow is a SaaS app while your app I have to host somewhere. If I'm a non-technical user then I have no idea how to host this thing myself and will just go to a competitor. On the other hand if I'm a developer then I have to weigh the time it would take to host and maintain the app versus just building a regular react app from scratch. My suggestion is keep offering it as OSS, but offer a hosted version as well.
- lukan 2y ago
  "My suggestion is keep offering it as OSS, but offer a hosted version as well." I would think, that is the obvious monetization plan?
  - hoakiet98 2y ago
    Yes, that is the most obvious plan. I want to find a community-friendly way to do this. I know Supabase has a similar and successful monetization plan but I know some take issue with the way they offer their hosting.
    - meiraleal 2y ago
      There is nothing to take issue, open source projects are allowed to monetize the same way as closed source projects. Your first thought needs to be how to create a sustainable project otherwise you won't have a community.
      - hoakiet98 2y ago
        > Your first thought needs to be how to create a sustainable project otherwise you won't have a community. I agree. Do you have any tips here besides being good with answering questions, documentation, and otherwise continuing to work on the project?
        meiraleal 2y ago
freedomben 2y ago
Thanks, this looks pretty neat! Definitely a project to keep an eye on :-) I love the approach of having it show you the code (and diff) and control on writing it back. This seems like it may be very useful! As an AOLPress user back in the day, it's both really surprising that in 2024 we don't have more WYSIWIYG tools, but also understandable because of how hard it is to design one. Most tools end up trying to find a sweet spot between targeting a developer and targeting a designer, and as a result end up doing neither well. There's also the problem of what kind of code it generates, and how to generate good/maintainable code that doesn't tie you to the WYSIWYG tool for the rest of its life. I haven't had a chance to try this yet (though I plan to) so I'm not certain where it falls on each of these, but from the video I get the impression that you are well aware of these challenges. Thanks for sharing, and thanks for making open source! Edit: Adding a couple of question: 1. Are you planning to monetize? If so, what are some of your ideas? 2. What is the grand scope for Studio? It sounds like the immediate focus is on editing styles. Are you planning to keep the scope limited to that, or would this eventually become an everything-you-need-for-building-a-website type of tool?
- hoakiet98 2y ago
  > Most tools end up trying to find a sweet spot between targeting a developer and targeting a designer, and as a result end up doing neither well. Emphasizing this because this happened to us. The initial version was trying to cater to designers and it was very hard for them to get value out of the to-code part because they need to convince the engineer to set up the codebase. Then when we add more support for engineers, it alienates the designer. > generate good/maintainable code that doesn't tie you to the WYSIWYG tool for the rest of its life Personally, this keeps me off most WYSIWYG. We don't have a great answer to this yet besides having a very narrow scope that works for our internal setup without polluting the code.
  - aabbcc1241 2y ago
    I made a WYSIWYG tool to edit HTML file without polluting the code. It works well for landing pages but it doesn't work well with js-generated webapp. https://github.com/beenotung/auto-cms https://github.com/beenotung/auto-cms
bbourn 2y ago
This is amazing, thank you for building!!!
- hoakiet98 2y ago
  Thank you for checking it out!
edweis 2y ago
Similar and also very neat: https://luna-park.app/ https://luna-park.app/
- hoakiet98 2y ago
  How cool! There's a lot to learn from here. Thank you for sharing.
- meiraleal 2y ago
  Is it open source?
danielvaughn 2y ago
Looks interesting. One word of advice - the CTA "talk to a founder" makes me stop and think. I wondered to myself "why would I want to talk to a founder?" You don't want the user doing that, it should be obvious. I'm pretty sure that button is for a demo, so you want to phrase it in terms of the value to the user, i.e. "schedule a demo" or some variant thereof.
- hoakiet98 2y ago
  Good catch, thank you. Changed it to schedule a demo.
- noorvir 2y ago
  I would say the opposite. I much prefer the “Talk to founder” option. I regularly use this to ask the founder to clear up concerns I have before trying a new product. It also has a much more personal touch to it. I think this is especially important for an early stage compony. “Schedule demo” sounds too enterprise-y and makes me feel like it isn’t self serve.
fswd 2y ago
> Some interesting challenges: 1. There is a React parser that is used to parse, insert the style, and serialize it back to code 2. here's another approach I used with dynamic react https://github.com/mhsdesign/jit-browser-tailwindcss https://github.com/mhsdesign/jit-browser-tailwindcss "dynamic tailwind"
da4id 2y ago
How's it different from something like reka.js or builder.io?
- hoakiet98 2y ago
  To my understanding, Reka is more of a core no-code builder library while we're an implementation of it. Now I'm considering if we should use Reka to build out the rest of the editor. With Builder.io, you have to set up a component to inject their UI into your app. It's more difficult to set up and maintain the components. We're opting to give full control of the code. You can develop with Onlook locally without internet for example.
karaterobot 2y ago
This looks cool. I always thought that Webflow's model for how to snap together a UI was a good intersection of pick-up-and-play simplicity and just enough customizability under the hood. But they're a bit expensive, and I hated having my projects under their control. I hope this project continues to grow by leaps and bounds!
- anakaine 2y ago
  They’re more than just a little bit expensive when it comes to small builds and trying things out. It’s impractical to pick up as a part time hack.
- hoakiet98 2y ago
  > I hated having my projects under their control. This is my biggest objection as well. Along with not having my code locally. > I hope this project continues to grow by leaps and bounds! Thank you for the kind words!
ENGNR 2y ago
I think you're onto something. I'm not sure what you mean by 'components' on the roadmap, but if it's the ability to bring react components back into the editor, and have the designer WYSIWYG modify the props - that's the exact thing we've been saying "suuurely this must exist" for a long time (rant mode enabled). The key pain for us that I think you're touching on is that "design/dev mode" isn't how teams actually work. Devs do far more design than we think. My experience is that designers do the pretty or complex pieces, while dev does the long tail "boring" designs. Often devs do the screen layouts since nav and routing can get a bit complex. Secondly, designers don't just hand off a design and that's it. The design system gets implemented as components, which have tweaks due to usability/issue reports/further design, and then the designers really want to be taking those components and recomposing them back into sections and screens. Ideally designers would be just setting props like images, text and ids faaaar up the abstraction layers, with dev components being automatically synced back in as they're built and updated. So definitely think your setup is potentially hitting a sweet spot between dev/design. Just to validate it as as product - plus one for open source with a paid hosted tier for convenience. Devs get to tinker, and designers don't have to think about how to run it.
- hoakiet98 2y ago
  > but if it's the ability to bring react components back into the editor, and have the designer WYSIWYG modify the props Haha yeah this is the plan. I really like Storybook for this reason but I loath the setup you need to do to expose every single prop. It seems straightforward for me to parse the React node and expose the inputs such that you get a Storybook experience that is also editable. I'm sure there are unknowns that will show at implementation time. > Devs do far more design than we think. I also think devs do more design than we should. I've never been handed a design where I don't run into edge cases at implementation time. At this point, I have to go back to the designer to clarify. The hope is that if designers are more involved in building front-end, they will hit these edge cases before handing them off. > a paid hosted tier for convenience This is a great idea, the goal is to get a point where designers just don't have to think about it
- tmcdos 2y ago
  This is exactly what Delphi does for desktop Windows applications - arranging components on a "form", tweaking their properties (props) through the ObjectInspector, assigning event listeners and quickly navigating to their handler functions in the code. It is such a breeze compared to Web development ...
coryvirok 2y ago
Why did you decide to rewrite this in react vs svelte? As someone who loves svelte and whose been writing a fairly large svelte app but has been jealous of the react ecosystem, I'd love to hear your rationale.
- hoakiet98 2y ago
  It pained me to do this. Everyone I talked to used React instead of Svelte. At some point, we realized we were spending half the time supporting Svelte just for ourselves for <10% of the return. I still love Svelte and will continue using it for side projects but right now I think the tech needs to get out of the way of the better user experience.
  - coryvirok 2y ago
    Ya, that seems about right for my project as well. Although mine won't be OSS so I'm more concerned with finding good ppl with Svelte skills vs React skills. I may need to bite the bullet once I'm closer to hiring. Thanks.
    - hoakiet98 2y ago
      No problem. This is very poorly documented but this entire repo is built in Svelte. I'm porting over functionalities from it so this is a much more mature editor. If there's a specific implementation you want to learn about, let me know :) I'm always happy to talk about Svelte! Though, I'm starting to enjoy the flexibility of jsx now that I'm back to using React. https://github.com/onlook-dev/monorepo https://github.com/onlook-dev/monorepo
popalchemist 2y ago
Any plans to add Vue support?
- hoakiet98 2y ago
  Not at the moment. I just want to keep scope to React for now. I imagine we will abstract the React part away into a plugin in the future.
kkyr 2y ago
Love your landing page! What did you build the animation at the top of your page with?
- D_R_Farrell 2y ago
  Heyo appreciate the kind words! I'm Daniel, Kiet's cofounder. The animation was a free component built by Nandi (https://twitter.com/learnframer https://twitter.com/learnframer) at LearnFramer. I can only pretend to be as creative as him – definitely check out his stuff. https://x.com/D_R_Farrell/status/1795940373883220429 https://x.com/D_R_Farrell/status/1795940373883220429
sexy_seedbox 2y ago
I would pay top dollars for this if you can integrate it with Microsoft PCF along with their build tools.
denkmoon 2y ago
Damn this looks like even I could make decent web applications in it. Pretty cool.
wiradikusuma 2y ago
If you use Bootstrap and are more towards "static" websites, I recommend Bootstrap Studio (https://bootstrapstudio.io/ https://bootstrapstudio.io/). I used it on and off. Last time, I used it to make one-off HTML, then edit the rest by hand (meaning, I can't return to the app again to make changes). But recently, I used it to develop https://momenial.com/ https://momenial.com/ with 100% editing in the app. Meaning I can use the app to make changes. I _do_ still need to make minor edits (that I think I can automate using a script). It's not perfect (e.g. it can't import existing design, gosh I wish!), but it gets the job done for design-illiterate people like me.
- hoakiet98 2y ago
  That's very good results and nice UI. I hope we catch up to this level of quality one day. Thanks for sharing!
aneeqdhk 2y ago
Pretty cool! I recently came across WeWeb (weweb.io) which also allows for exporting code, and is quite feature rich in its visual editor
- hoakiet98 2y ago
  Look awesome! Everyone has such nice sites, we need to catch up.
blacktechnology 2y ago
This is THE tool I'm looking for years!
_f9cu 2y ago
[dead]
nm769 2y ago
super cool! very very similar to Utopia: https://utopia.app/ https://utopia.app/ maybe you can work together on this :) https://news.ycombinator.com/item?id=27516212 https://news.ycombinator.com/item?id=27516212
- hoakiet98 2y ago
  Utopia is super cool. Thanks for sharing :) I believe someone from the team reached out
zishansami102 2y ago
[dead]
antonio6996 2y ago
[flagged]

336 points by hoakiet98 2y ago

autorun 2y ago

also reminds me about https://puckeditor.com https://puckeditor.com

ramesh31 2y ago

The main problem with these kind of tools is that they sit in a "dead zone" of being too in depth for non-technicals, yet too limiting and inefficient for engineers to bother with, as they end up injecting a huge bundle on the page just to render a form. How are you solving for that?

toddmorey 2y ago
This... isn't that. Changes made in the visual editor are translated into code and submitted to your project as a GH pull request for review. So from a project / software perspective, it looks and works like a FE engineer committed a code change.
- hoakiet98 2y ago
  > it looks and works like a FE engineer committed a code change. This is exactly the goal :) To ramesh31 point, we're trying to be cognizant about not putting bloat into the code as we support things like inserting new components since that is where these types of tools typically converge.
hoakiet98 2y ago
This is very astute. We went too far in the non-technical route the first time. It was unrealistic to expect a non-technical person to clone or run code locally so it was hard to get to the value point for them. Hence, we're focusing on this being more efficient for the engineer. We're limiting to just injecting clean styling for now which is where I personally spend too much time with UIs. The initial goal is to shorten the loop between code, save, check the browser, adjust code, repeat... and just give engineers the ability to edit the page directly like you would a Figma prototype.
deleted 2y ago
[deleted]
DrewADesign 2y ago
While that might be true at the moment, this is a (well designed) electron instance (edit: exists? I only saw install instructions for NPM so maybe it just needs built executables? it says it uses electron) away from being a modern replacement for WYSIWYG editors like Dreamweaver. I could see an easy integration to push your page up to a CDN or GH Pages instance. Even without, there are tons of places for moderately technical people to host static websites, and “upload the code and pictures to a server in this folder” is within many more people’s technical grasp now than it was 20 years ago. Most people don’t need all of the scaffolding most modern dynamic websites have. Online SAAS WYSIWYG web authoring tools— wix, squarespace, Wordpress, et al— have been the only practical option for people without front-end dev skills; beyond that, you’re in SSG land which requires a big jump in knowledge for very little gain in utility until you really start getting some dev knowledge, and most people don’t want or need that knowledge. Being able to stand up a site and tweak the code here and there to do something a little different is a great spot to sit in. Hell it’s what got me started on web stuff with my geocities site nearly 30 years ago. I think this is a great example of why we need more product people involved with FOSS. Having worked in dev for quite some time before I got into design, I’ve experienced the blind spots inherent to having a purely technical focus. From the dev perspective, user needs often seem straightforward or even intuitive, but that’s heavily skewed by a completely different approach to using and reasoning about software than end users have. Developers are often pessimistic about users that seemingly always fail to grasp something they consider trivial, but developers rarely have to confront the actual complexity of other people’s jobs. Lots of people are smart and can solve problems, even if they don't have a formidable mental model of software development. Tweaking basic HTML/CSS generated by something else is well within their problem-solving capability and doesn’t require much technical know-how.

minajevs 2y ago

A bit off-topic, but this landing page "steals" my cursor, presumably for that special hero effect, which makes it dizzingly laggy and unresponsive.

deleted 2y ago
[deleted]
biosboiii 2y ago
Same 4 me, every web dev now owns a 3k MacBook and it shows
hoakiet98 2y ago
This is a common complaint, I'll be sure to take this off
nalinidash 2y ago
Though stealing the cursor is okay, having 2 cursors in the page without my own cursor was confusing.Also the lag is very apparent.

patrickaljord 2y ago

Looks great. Any plan to make it work in a browser instead of having to install an Electron app?

hoakiet98 2y ago
No plans for now, this seems to be the best form to support the features we need. It was initially a Chrome extension [1] but there were limitations with local file access and UX from jumping around to multiple pages. Very early on I developed this as a web app but it was also difficult to inject styles into iframe, especially for ones that we didn't own directly. Electron ships Chromium by default so it was easy to leverage into an editable browser plus allowing us to do an infinite canvas style editor. If you know of ways around these limitations please let me know. I'm always trying to figure out a way to turn this into a web app instead. [1] https://chromewebstore.google.com/detail/onlook/icbcddooibfghgmdiafjdjelfiejkpnd https://chromewebstore.google.com/detail/onlook/icbcddooibfg...
- meiraleal 2y ago
  I'm curious about the chrome extension issues as I'm wondering about creating a project using it, with all the problems it brings with marketing. What does `UX from jumping around to multiple pages` mean?
  - hoakiet98 2y ago
    You can try it out below. It's not so evident from the demo but there's an inherent flaky feel to using a Chrome extension as a builder. You never feel sure your states are saved correctly and where you can go to review changes. There's also the platform risk with Chrome Web Store being poorly supported. I've had important updates take up to a week to come out for no transparent reason. It might just be a UX we have not cracked but it was easy to onboard, hard to stick. It is also unceremoniously open-sourced so if you want to take up the code I'm happy to support that. https://youtu.be/pUzCOpIE1zQ?feature=shared https://youtu.be/pUzCOpIE1zQ?feature=shared https://chromewebstore.google.com/detail/onlook/icbcddooibfghgmdiafjdjelfiejkpnd https://chromewebstore.google.com/detail/onlook/icbcddooibfg... https://github.com/onlook-dev/monorepo https://github.com/onlook-dev/monorepo

pavlov 2y ago

Watch out for trademarks. Your slogan “The power of WebFlow for your React app” is going to attract attention from Webflow’s legal department if your project is successful.

deleted 2y ago
[deleted]
hoakiet98 2y ago
Agreed. I was worried that it's derivative while trying to communicate what we do succinctly. I know Supabase does the same thing with Firebase but our wording might be more problematic.
- DrewADesign 2y ago
  Honestly I would change that wording immediately. Even being pretty savvy with this stuff, I thought this was an open-sourced webflow when I skimmed it and I assure you, if they even vaguely consider this a future threat to any of their business at all, their counsel will use it as a legal cudgel to bludgeon you.
  - lukan 2y ago
    I agree "the power of webflow" implies a connection. "inspired by webflow" would be probably better, but even there I am not sure if it is safe enough.
    - DrewADesign 2y ago
      Absolutely. If I came out with a project that said "Get the power of Oracle with a simple javascript API" people would think I had a new Oracle API for javascript, not that I had a JS-friendly database I thought was as good as Oracle. But before I even mentioned webflow at all, I'd first want to make sure they didn't have any related patents I'd be bumping up against without being able to clearly show prior art. Only after that might I consider saying "webflow-style workflow" or something along those lines. It's sad, but you have to assume their lawyers will use every legal tool at their disposal to protect their client's bottom line whether its reasonable or not.

rsp1984 2y ago

This looks pretty awesome but, speaking only for myself here, the thing I actually want is just Webflow but without the BS and predatory pricing. A visual editor that produces plain old HTML, CSS, JS and that anyone in our company can use to make changes to pages or create new ones. That's it. I don't think it exists (if so, pointers would be very welcome!), so here's my comment to incentivize someone to build it.

freedomben 2y ago
I agree. What I personally would love is a WYSIWYG front end to a static site generator that uses eex or erb. If the tool is sufficiently open source and works well with some hand tweaking of generated HTML, then eex/erb isn't strictly necessary. I'm optimistic about this though, because my suspicion is that since this tool just exports React, you could relatively easily achieve this using Next.js SSG building. As long as you aren't doing any build time or runtime dynamic data loading, by adding one more step you can use this for that, with the bonus that if complexity goes up to the point where you would want to componentize, your tool is ready for that.
- rchaud 2y ago
  Pinegrow Web Editor and Bootstrap Studio could fit the bill. No subscription, no cloud, one-time purchase. Exported HTML is fully readable and editable outside the app.
- hoakiet98 2y ago
  > because my suspicion is that since this tool just exports React, you could relatively easily achieve this using Next.js SSG building At the core, we generate pure HTML and CSS, then serialize those into React and Tailwind. It would be one less step to expose the HTML and CSS instead. I wanted a narrow scope to this so that's the focus but I imagine there's a plugin setup we can do to swap in what framework (or non-framework) you would need.
localfirst 2y ago
but this is a tough problem with constant maintenance involved and you want it solved for free and handed to you on a silver platter have you considered paying developers or supporting open source software? I doubt it.

_fat_santa 2y ago

I think one challenge that you will face is that Webflow is a SaaS app while your app I have to host somewhere. If I'm a non-technical user then I have no idea how to host this thing myself and will just go to a competitor. On the other hand if I'm a developer then I have to weigh the time it would take to host and maintain the app versus just building a regular react app from scratch. My suggestion is keep offering it as OSS, but offer a hosted version as well.

lukan 2y ago
"My suggestion is keep offering it as OSS, but offer a hosted version as well." I would think, that is the obvious monetization plan?
- hoakiet98 2y ago
  Yes, that is the most obvious plan. I want to find a community-friendly way to do this. I know Supabase has a similar and successful monetization plan but I know some take issue with the way they offer their hosting.
  - meiraleal 2y ago
    There is nothing to take issue, open source projects are allowed to monetize the same way as closed source projects. Your first thought needs to be how to create a sustainable project otherwise you won't have a community.
    - hoakiet98 2y ago
      > Your first thought needs to be how to create a sustainable project otherwise you won't have a community. I agree. Do you have any tips here besides being good with answering questions, documentation, and otherwise continuing to work on the project?
      - meiraleal 2y ago

freedomben 2y ago

Thanks, this looks pretty neat! Definitely a project to keep an eye on :-) I love the approach of having it show you the code (and diff) and control on writing it back. This seems like it may be very useful! As an AOLPress user back in the day, it's both really surprising that in 2024 we don't have more WYSIWIYG tools, but also understandable because of how hard it is to design one. Most tools end up trying to find a sweet spot between targeting a developer and targeting a designer, and as a result end up doing neither well. There's also the problem of what kind of code it generates, and how to generate good/maintainable code that doesn't tie you to the WYSIWYG tool for the rest of its life. I haven't had a chance to try this yet (though I plan to) so I'm not certain where it falls on each of these, but from the video I get the impression that you are well aware of these challenges. Thanks for sharing, and thanks for making open source! Edit: Adding a couple of question: 1. Are you planning to monetize? If so, what are some of your ideas? 2. What is the grand scope for Studio? It sounds like the immediate focus is on editing styles. Are you planning to keep the scope limited to that, or would this eventually become an everything-you-need-for-building-a-website type of tool?

hoakiet98 2y ago
> Most tools end up trying to find a sweet spot between targeting a developer and targeting a designer, and as a result end up doing neither well. Emphasizing this because this happened to us. The initial version was trying to cater to designers and it was very hard for them to get value out of the to-code part because they need to convince the engineer to set up the codebase. Then when we add more support for engineers, it alienates the designer. > generate good/maintainable code that doesn't tie you to the WYSIWYG tool for the rest of its life Personally, this keeps me off most WYSIWYG. We don't have a great answer to this yet besides having a very narrow scope that works for our internal setup without polluting the code.
- aabbcc1241 2y ago
  I made a WYSIWYG tool to edit HTML file without polluting the code. It works well for landing pages but it doesn't work well with js-generated webapp. https://github.com/beenotung/auto-cms https://github.com/beenotung/auto-cms

bbourn 2y ago

This is amazing, thank you for building!!!

hoakiet98 2y ago
Thank you for checking it out!

edweis 2y ago

Similar and also very neat: https://luna-park.app/ https://luna-park.app/

hoakiet98 2y ago
How cool! There's a lot to learn from here. Thank you for sharing.
meiraleal 2y ago
Is it open source?

danielvaughn 2y ago

Looks interesting. One word of advice - the CTA "talk to a founder" makes me stop and think. I wondered to myself "why would I want to talk to a founder?" You don't want the user doing that, it should be obvious. I'm pretty sure that button is for a demo, so you want to phrase it in terms of the value to the user, i.e. "schedule a demo" or some variant thereof.

hoakiet98 2y ago
Good catch, thank you. Changed it to schedule a demo.
noorvir 2y ago
I would say the opposite. I much prefer the “Talk to founder” option. I regularly use this to ask the founder to clear up concerns I have before trying a new product. It also has a much more personal touch to it. I think this is especially important for an early stage compony. “Schedule demo” sounds too enterprise-y and makes me feel like it isn’t self serve.

fswd 2y ago

> Some interesting challenges: 1. There is a React parser that is used to parse, insert the style, and serialize it back to code 2. here's another approach I used with dynamic react https://github.com/mhsdesign/jit-browser-tailwindcss https://github.com/mhsdesign/jit-browser-tailwindcss "dynamic tailwind"

da4id 2y ago

How's it different from something like reka.js or builder.io?

hoakiet98 2y ago
To my understanding, Reka is more of a core no-code builder library while we're an implementation of it. Now I'm considering if we should use Reka to build out the rest of the editor. With Builder.io, you have to set up a component to inject their UI into your app. It's more difficult to set up and maintain the components. We're opting to give full control of the code. You can develop with Onlook locally without internet for example.

karaterobot 2y ago

This looks cool. I always thought that Webflow's model for how to snap together a UI was a good intersection of pick-up-and-play simplicity and just enough customizability under the hood. But they're a bit expensive, and I hated having my projects under their control. I hope this project continues to grow by leaps and bounds!

anakaine 2y ago
They’re more than just a little bit expensive when it comes to small builds and trying things out. It’s impractical to pick up as a part time hack.
hoakiet98 2y ago
> I hated having my projects under their control. This is my biggest objection as well. Along with not having my code locally. > I hope this project continues to grow by leaps and bounds! Thank you for the kind words!

ENGNR 2y ago

I think you're onto something. I'm not sure what you mean by 'components' on the roadmap, but if it's the ability to bring react components back into the editor, and have the designer WYSIWYG modify the props - that's the exact thing we've been saying "suuurely this must exist" for a long time (rant mode enabled). The key pain for us that I think you're touching on is that "design/dev mode" isn't how teams actually work. Devs do far more design than we think. My experience is that designers do the pretty or complex pieces, while dev does the long tail "boring" designs. Often devs do the screen layouts since nav and routing can get a bit complex. Secondly, designers don't just hand off a design and that's it. The design system gets implemented as components, which have tweaks due to usability/issue reports/further design, and then the designers really want to be taking those components and recomposing them back into sections and screens. Ideally designers would be just setting props like images, text and ids faaaar up the abstraction layers, with dev components being automatically synced back in as they're built and updated. So definitely think your setup is potentially hitting a sweet spot between dev/design. Just to validate it as as product - plus one for open source with a paid hosted tier for convenience. Devs get to tinker, and designers don't have to think about how to run it.

hoakiet98 2y ago
> but if it's the ability to bring react components back into the editor, and have the designer WYSIWYG modify the props Haha yeah this is the plan. I really like Storybook for this reason but I loath the setup you need to do to expose every single prop. It seems straightforward for me to parse the React node and expose the inputs such that you get a Storybook experience that is also editable. I'm sure there are unknowns that will show at implementation time. > Devs do far more design than we think. I also think devs do more design than we should. I've never been handed a design where I don't run into edge cases at implementation time. At this point, I have to go back to the designer to clarify. The hope is that if designers are more involved in building front-end, they will hit these edge cases before handing them off. > a paid hosted tier for convenience This is a great idea, the goal is to get a point where designers just don't have to think about it
tmcdos 2y ago
This is exactly what Delphi does for desktop Windows applications - arranging components on a "form", tweaking their properties (props) through the ObjectInspector, assigning event listeners and quickly navigating to their handler functions in the code. It is such a breeze compared to Web development ...

coryvirok 2y ago

Why did you decide to rewrite this in react vs svelte? As someone who loves svelte and whose been writing a fairly large svelte app but has been jealous of the react ecosystem, I'd love to hear your rationale.

hoakiet98 2y ago
It pained me to do this. Everyone I talked to used React instead of Svelte. At some point, we realized we were spending half the time supporting Svelte just for ourselves for <10% of the return. I still love Svelte and will continue using it for side projects but right now I think the tech needs to get out of the way of the better user experience.
- coryvirok 2y ago
  Ya, that seems about right for my project as well. Although mine won't be OSS so I'm more concerned with finding good ppl with Svelte skills vs React skills. I may need to bite the bullet once I'm closer to hiring. Thanks.
  - hoakiet98 2y ago
    No problem. This is very poorly documented but this entire repo is built in Svelte. I'm porting over functionalities from it so this is a much more mature editor. If there's a specific implementation you want to learn about, let me know :) I'm always happy to talk about Svelte! Though, I'm starting to enjoy the flexibility of jsx now that I'm back to using React. https://github.com/onlook-dev/monorepo https://github.com/onlook-dev/monorepo

popalchemist 2y ago

Any plans to add Vue support?

hoakiet98 2y ago
Not at the moment. I just want to keep scope to React for now. I imagine we will abstract the React part away into a plugin in the future.

kkyr 2y ago

Love your landing page! What did you build the animation at the top of your page with?

D_R_Farrell 2y ago
Heyo appreciate the kind words! I'm Daniel, Kiet's cofounder. The animation was a free component built by Nandi (https://twitter.com/learnframer https://twitter.com/learnframer) at LearnFramer. I can only pretend to be as creative as him – definitely check out his stuff. https://x.com/D_R_Farrell/status/1795940373883220429 https://x.com/D_R_Farrell/status/1795940373883220429

sexy_seedbox 2y ago

I would pay top dollars for this if you can integrate it with Microsoft PCF along with their build tools.

denkmoon 2y ago

Damn this looks like even I could make decent web applications in it. Pretty cool.

wiradikusuma 2y ago

If you use Bootstrap and are more towards "static" websites, I recommend Bootstrap Studio (https://bootstrapstudio.io/ https://bootstrapstudio.io/). I used it on and off. Last time, I used it to make one-off HTML, then edit the rest by hand (meaning, I can't return to the app again to make changes). But recently, I used it to develop https://momenial.com/ https://momenial.com/ with 100% editing in the app. Meaning I can use the app to make changes. I _do_ still need to make minor edits (that I think I can automate using a script). It's not perfect (e.g. it can't import existing design, gosh I wish!), but it gets the job done for design-illiterate people like me.

hoakiet98 2y ago
That's very good results and nice UI. I hope we catch up to this level of quality one day. Thanks for sharing!

aneeqdhk 2y ago

Pretty cool! I recently came across WeWeb (weweb.io) which also allows for exporting code, and is quite feature rich in its visual editor

hoakiet98 2y ago
Look awesome! Everyone has such nice sites, we need to catch up.

blacktechnology 2y ago

This is THE tool I'm looking for years!

_f9cu 2y ago

[dead]

nm769 2y ago

super cool! very very similar to Utopia: https://utopia.app/ https://utopia.app/ maybe you can work together on this :) https://news.ycombinator.com/item?id=27516212 https://news.ycombinator.com/item?id=27516212

hoakiet98 2y ago
Utopia is super cool. Thanks for sharing :) I believe someone from the team reached out

zishansami102 2y ago

[dead]

antonio6996 2y ago

[flagged]