July 8th, 2024

Show HN: Open-sourced Webflow for your own app

The "Onlook" project on GitHub is a browser-powered visual editor for React + TailwindCSS apps. It includes installation, usage, roadmap, contributing guidelines, contact info, acknowledgments, and licensing. Inquire for more details.

Read original articleLink Icon
Show HN: Open-sourced Webflow for your own app

The GitHub URL provided contains information about the "Onlook" project, which is a browser-powered visual editor designed to support any React + TailwindCSS application. The project covers details on installation, usage, roadmap, contributing guidelines, contact information, acknowledgments, and licensing. For further assistance or specific details regarding the project, feel free to inquire.

Link Icon 27 comments
By @ENGNR - 5 months
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.

By @rsp1984 - 5 months
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.

By @freedomben - 5 months
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?

By @wiradikusuma - 5 months
If you use Bootstrap and are more towards "static" websites, I recommend Bootstrap Studio (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/ 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.

By @karaterobot - 5 months
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!
By @fswd - 5 months
> 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 "dynamic tailwind"

By @_fat_santa - 5 months
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.

By @danielvaughn - 5 months
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.

By @edweis - 5 months
Similar and also very neat: https://luna-park.app/
By @patrickaljord - 5 months
Looks great. Any plan to make it work in a browser instead of having to install an Electron app?
By @ramesh31 - 5 months
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?
By @aneeqdhk - 5 months
Pretty cool! I recently came across WeWeb (weweb.io) which also allows for exporting code, and is quite feature rich in its visual editor
By @bbourn - 5 months
This is amazing, thank you for building!!!
By @kkyr - 5 months
Love your landing page! What did you build the animation at the top of your page with?
By @coryvirok - 5 months
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.

By @blacktechnology - 5 months
This is THE tool I'm looking for years!
By @nm769 - 5 months
super cool! very very similar to Utopia: https://utopia.app/ maybe you can work together on this :)

https://news.ycombinator.com/item?id=27516212

By @sexy_seedbox - 5 months
I would pay top dollars for this if you can integrate it with Microsoft PCF along with their build tools.
By @denkmoon - 5 months
Damn this looks like even I could make decent web applications in it. Pretty cool.
By @autorun - 4 months
also reminds me about https://puckeditor.com
By @da4id - 5 months
How's it different from something like reka.js or builder.io?
By @popalchemist - 5 months
Any plans to add Vue support?
By @minajevs - 5 months
A bit off-topic, but this landing page "steals" my cursor, presumably for that special hero effect, which makes it dizzingly laggy and unresponsive.
By @pavlov - 5 months
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.