hoakiet98

Thanks au-arms! Webflow is definitely the best option out there. But for devs, we're hoping to address the lock-in and get back some of the flexibility of owning the code

thank you for checking it out :)

Feel free to share your tool if it's open source. I'd love to see how you approach this problem. Happy to share more technical details if it helps your product.

Chrome inspector does so much more like clip support and media queries that I didn't even know about. It also writes directly to inline styles so propagating those changes as code is definitely possible. I was thinking if there's a way we can leverage the great work the Chrome devtool have already put in.

> I assume then that the editor would only be used for editing css, not html

It does edit html. Inserting html elements in this case.

> I'm also curious how they determine where in source the code needs to change

Right now we're editing inline-tailwind because it's the easiest option. It only edits the existing tailwind styles so there could be some interaction with existing styles that have higher-priotity.

The plan later is to have users configure how they want their styles written. We have full code access to be able to edit css stylesheets or inject our own.

Thanks for checking it out robzhu. Let me know of any feedback/issues :)

We work best for React (js/ts) and TailwindCSS. In-code UI libs like ShadCN also customizes better. Thanks for checking it out :)

> I've just started working on a new portfolio site and was wondering if I could skip the Figma/whatever wireframe phase and just use a local WYSIWYG tool for a static page.

Someone above suggested https://bootstrapstudio.io/ which seems to fit the static page use case very well.

> it was usually ruined by a project manager or a developer trying to make something 'look designed' by mimicking some simple, elegant design they saw that was totally inappropriate for the application.

This hits home for me as someone who ruins design to ship faster. I think dev being the gatekeeper for UI can turn out badly when we start cutting corners or inserting our own opinions into the implementation.

I hope giving designers the ability to contribute on the UI side can alleviate this issue.

This looks nice.

Sorry for off-loading the research to you but how does it compare to SingleFile (Chrome extension based)? I can't tell what the output would be.

https://github.com/gildas-lormeau/SingleFile

> 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!

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

> Then for paid/hosted version, on top of it being hosted, you get full integration with github so PRs and diffs and things can be sent directly from the tool (which is great for designers)

That's my impression too. Designers I know do not want to deal with the command line or git directly. I can't think of any products where that abstraction is done well (unless it's so good that I didn't notice).

Thank you for the very in-depth take. We're figuring out monetization so this is very actionable + relevant.

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://chromewebstore.google.com/detail/onlook/icbcddooibfg...

https://github.com/onlook-dev/monorepo

Look awesome! Everyone has such nice sites, we need to catch up.

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.

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

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

> 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?

Very cool!

> 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

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.

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.

Good catch, thank you. Changed it to schedule a demo.

> 1. Are you planning to monetize? If so, what are some of your ideas?

Yes, though my plan is not concrete, yet. I plan to offer a hosted version for teams with fewer technical members to be able to contribute the same way a front-end engineer would without self-hosting.

This involves potentially hosting their app along-side the editor and creating friendlier abstractions on top of the git process such as creating branches, PR's, etc.

Secondarily, I want to explore collaboration as a feature. The overall theme is to bring less-technical folks into the front-end.

> 2. What is the grand scope for Studio?

Short-term, I want styling to be very good. Then text content for copy-writing. Then structural changes such as reordering, inserting, and removing DOM elements.

I want to keep it in the UI as much as possible since the surface area for logic is very large. I don't know if we can really be Webflow while letting users maintain full control of their code so if we have to compromise, I would lean more into giving control to the user instead of doing powerful features.

Please let me know your thoughts on this plan, it is still in development :)

> I only saw install instructions for NPM so maybe it just needs built executables

Sorry for the confusion, this is an Electron app. I just didn't ship an executable with it at the moment.

> I could see an easy integration to push your page up to a CDN or GH Pages instance.

That is certainly in the cards. Though, in my opinion, it becomes more useful to edit complex web application since there are many tools supporting static sites but not many for production web apps.

> 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

I am guilty of this. My long-long term hope is to be able to collaborate better with my product folks where they are able to enact their own intuition in the product instead of having to go through me for every change needed.

While this is easy for a marketing page, it's much more difficult to do in a complex application context.

> 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.

How cool! There's a lot to learn from here. Thank you for sharing.

Point taken, we'd do better without the headache for now until further legal counseling. Changing the tagline now. Thank you all for the suggestion!

> that just serves locally and you hit it with your browser

This is an interesting take. My interpretation: You can host this on a server, then expose a port remotely which will have all the access of the electron app, making it a pseudo SAAS?

I will need to test this out but this has some cool implications. The other worry is multiple client support but you can just provision a personal instance.

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.

Thank you for checking it out!