WebStudio: Open visual development for the open web(webstudio.is)
webstudio.is
WebStudio: Open visual development for the open web
https://webstudio.is/
15 comments
There is a serious knowledge gap between what you just wrote and the actual reality out there. I don't want to convince you of anything, just share the knowledge of what's actually happening. Why tools like Webflow have $4bln valuation and why there are millions of webflow developers.
1. You are looking at it in black/white. Coder vs nocoder. That's not how it is in reality. There is a seriously big amount of people who understand enough of coding to use webflow comfortably but not enough to write code by hand and/or wanting to do so.
2. Designers are used to visual tools. They find their way when tool allows to experiment without first studying how to code and then gradually learn css/html basics if they need to.
3. Building layouts, styling, html structure etc is actually faster with webflow once you understand how it works and learn all the shortcuts.
If you actually care to learn about it, go talk to some pro webflow devs. Some of them will tell you they actualy know how to code, but its less efficient for a lot of use cases.
4. Handoff. A huge problem with building websites is wasted time between a designer and a developer. There is just too many things to consider and a static design in figma is never complete. Webstudio and Webflow aims at solving or at least reducing the handoff by either building directly in Webstudio/Webflow or by keeping figma design low-fidelity just for initial communication with the customer and then moving on to building.
5. This industry has come a long way and these days several tools are also integrating with git-based developer workflows. The goal is to let designers and visual developers to build visual components and design systems in the builder ui and provide those components to developers for further integration.
6. There is a clearly steep learning curve with Webflow. Lots of things are not easy to get. Its not a tool to build a website in 5 minutes, its a tool to learn html/css visually and become pro visual developer. Once you are there, the typical landing sites and marketing pages, even large one are built significantly faster and more presize from design perspective than with coding. I am saying this as an engineer who started building for the web in 2004.
This is not meant to start an argument. Just pointing out a lot of stuff that is understandably not clear to many.
1. You are looking at it in black/white. Coder vs nocoder. That's not how it is in reality. There is a seriously big amount of people who understand enough of coding to use webflow comfortably but not enough to write code by hand and/or wanting to do so.
2. Designers are used to visual tools. They find their way when tool allows to experiment without first studying how to code and then gradually learn css/html basics if they need to.
3. Building layouts, styling, html structure etc is actually faster with webflow once you understand how it works and learn all the shortcuts.
If you actually care to learn about it, go talk to some pro webflow devs. Some of them will tell you they actualy know how to code, but its less efficient for a lot of use cases.
4. Handoff. A huge problem with building websites is wasted time between a designer and a developer. There is just too many things to consider and a static design in figma is never complete. Webstudio and Webflow aims at solving or at least reducing the handoff by either building directly in Webstudio/Webflow or by keeping figma design low-fidelity just for initial communication with the customer and then moving on to building.
5. This industry has come a long way and these days several tools are also integrating with git-based developer workflows. The goal is to let designers and visual developers to build visual components and design systems in the builder ui and provide those components to developers for further integration.
6. There is a clearly steep learning curve with Webflow. Lots of things are not easy to get. Its not a tool to build a website in 5 minutes, its a tool to learn html/css visually and become pro visual developer. Once you are there, the typical landing sites and marketing pages, even large one are built significantly faster and more presize from design perspective than with coding. I am saying this as an engineer who started building for the web in 2004.
This is not meant to start an argument. Just pointing out a lot of stuff that is understandably not clear to many.
Totally reasonable response, and thanks for taking the criticism well - I hope it didn't come off as too harsh. I mostly agree with everything you wrote, just one thing I'd say:
Designers may be used to visual tools, but IMO it's a hangup. It's like someone telling you that they find it easier to click File > Copy > File > Paste because they're not used to typing "ctrl c > ctrl v". I get the psychology of it, but it's objectively wrong - a keyboard shortcut will always be more efficient and everyone who learns them is better off for it. Code is like that but on steroids. If there's an efficiency gap then it's an issue with dev tooling (which IMO is 100% true in lots of cases), not inherently with code.
Designers may be used to visual tools, but IMO it's a hangup. It's like someone telling you that they find it easier to click File > Copy > File > Paste because they're not used to typing "ctrl c > ctrl v". I get the psychology of it, but it's objectively wrong - a keyboard shortcut will always be more efficient and everyone who learns them is better off for it. Code is like that but on steroids. If there's an efficiency gap then it's an issue with dev tooling (which IMO is 100% true in lots of cases), not inherently with code.
Here again you show lack of nuance.
Pro webflow developers use keyboard a lot. In fact with Webstudio we took the keyboard accessibility very seriously, still A LOT to improve.
Visual development is a mixture of mouse and keyboard. Some things are faster with the mouse, some with the keyboard.
The reason some people prefer mouse is not just that they are used to, even though it is true. Its because they know how to be efficient with it very well.
"code is like that but on steroids" - again it can be true in certain use cases, but there is a massive amount of use cases where this is not actually true.
Most of them are around layouts, styling and configuring components. Visual development is basically declarative programming - its configuring things.
We are actually thinking deeply about the gap between typing and visually manipulating stuff at Webstudio and the plan is to allow a lot of the same UX patterns that you have with text-based coding: copy/pasting things like styles, box shadows, gradients, instances of components etc.
Ability to paste gradients is already there, box shadows comes soon. Writing component code inline will most likely come at some point as well. Linked CSS editor - similar to chrome dev tools for css is also planned.
As you can see there are ways to close the gap and when needed write code.
The most frustrating thing with code is the build tools, compilers etc. These days nobody writes just simple html and css, things are complex. So the benefits of writing code are often completely destroyed by the amount of complexity to deploy the site.
Pro webflow developers use keyboard a lot. In fact with Webstudio we took the keyboard accessibility very seriously, still A LOT to improve.
Visual development is a mixture of mouse and keyboard. Some things are faster with the mouse, some with the keyboard.
The reason some people prefer mouse is not just that they are used to, even though it is true. Its because they know how to be efficient with it very well.
"code is like that but on steroids" - again it can be true in certain use cases, but there is a massive amount of use cases where this is not actually true.
Most of them are around layouts, styling and configuring components. Visual development is basically declarative programming - its configuring things.
We are actually thinking deeply about the gap between typing and visually manipulating stuff at Webstudio and the plan is to allow a lot of the same UX patterns that you have with text-based coding: copy/pasting things like styles, box shadows, gradients, instances of components etc.
Ability to paste gradients is already there, box shadows comes soon. Writing component code inline will most likely come at some point as well. Linked CSS editor - similar to chrome dev tools for css is also planned.
As you can see there are ways to close the gap and when needed write code.
The most frustrating thing with code is the build tools, compilers etc. These days nobody writes just simple html and css, things are complex. So the benefits of writing code are often completely destroyed by the amount of complexity to deploy the site.
Ha, I was back-and-forth on editing a response to my own comment with a caveat - there are indeed times when I've found UI editing to be more efficient. There are probably a lot of factors that go into it, but the main one I've noticed is when there are a lot of concrete values that are both numerous and difficult to know ahead of time.
An extreme example is a squiggly line in SVG. Click on a canvas and drag, super easy. Or try typing it out and discover your inner masochist.
So, I definitely see your perspective, thanks for sharing your thoughts!
An extreme example is a squiggly line in SVG. Click on a canvas and drag, super easy. Or try typing it out and discover your inner masochist.
So, I definitely see your perspective, thanks for sharing your thoughts!
I really enjoyed this back-and-forth -- so much that I agreed with all of the comments on both sides, as I read them! (Not an intellectually consistent position, I admit.)
Glad you enjoyed it - it's two people who are very passionate about the same topic. I didn't mention it beforehand but I've been working on my own solution to this problem - I've been going back and forth between drawing board and prototype for years and it's become an obsession for me. I love this problem.
Developing better HCI and UX is not a "hangup". Accessibility (in the broader sense) is incredibly lacking in technical spaces.
Also, your example is a poor one, because in your example, both a visual method and a quicker keyboard method exist. Very often, the visual method doesn't even exist. In your analogy, its more like there is no way to move text from one app to another except for ctrl-c / ctrl+v, so the guy trying to do this just gives up and can't do it because they only know how to use file - paste. It's not even about shaving off .5 seconds, its about not even accomplishing the thing they want to do.
Finally, no, there's no such thing as one method being "objectively" wrong. You're making the mistake to think that efficiency between navigating screens and work is all about being fast. It's not. There's a lot of people (actually the majority) who don't give a shit about being faster at keyboard shortcuts and shaving 2 seconds off whatever. If you're a copy-writer, you might copy-paste once or twice and then the rest literally never leave a word editor and email.
This attitude is one of the biggest problems in HCI and development today. The tinkerers and developers like ourselves who love doing this stuff are unable to understand how actual users and clients work with systems, and when told that our designs suck and are inaccessible we scoff and say "lol just learn linux".
Finally, I have no idea whether or not there's an audience for this, but I will actually say that I'm probably one of the audiences for it. HTML, CSS and even JS isn't actually all that complex. But guess what. The real annoying shit that I have no interest in dealing with is the insanity of web development these days which involve build/compile and webpacks and frameworks and blah blah blah.
If I had a platform that let me dip into CSS/HTML/JS but had security guardrails, deployment fully setup and had some basic capability to whip up a docs page, or a simple website that still looked good, I would absolutely use it in a heartbeat.
In fact, I'm currently using a dinky-ass no-code app builder (lmao, in ESRI's ArcGIS Enterprise no less) to make a simple CRUD app. Why am I using it? Because none of the shit is documented at my workplace for deployment, I'm not interested in learning to use kubernetes just for a simple-ass website, and I have zero interest in figuring out how to configure HTTPS and deal with JWT tokens and whatever. I'm a data analyst who works in jupyter notebooks, python and SQL.
"Should" I be making this god awful no-code app? Hell no. Do I want to? Hell no. But do I need it? Yes, very much so. Otherwise, the people I rely on to populate a referential / look-up table update their reference documents in word and the table only gets updated manually when someone bugs the DBAs to manually update it, so these tables are always out of date. I could go with a straight-face to our over-worked web devs and ask them to stop working on their enterprise-wide/big-client project, but they would either hate me forever (fair) or ignore me because they're doing way more important things. Or I could go to the policy people who update these tables who can stare at me with a blank face when I explain that even if they just make an Excel table instead of a Word table then it would improve so many things, but to them its "whats the difference? im putting text in one table or another."
Instead, we have this dumb thing that's a drag-n-drop Bootstrap page maker, and with it comes built in auth, login and even exposes a simple REST API.
If I narrowly focused down on whether or not making this app with a drag-n-drop tool vs just writing an SSG, ofcourse the latter would be easier and faster. But, just writing the code for an SSG is not the hard part here. It's everything else that web devs live and breath so they forget how stupid of a workflow it actually is to make a React-Nuxt-Next-Babel-Webpack-Vite-tailwindCSS-whatever monstrosity, when 90% of people's needs could be served with the equivalent of a web-deployed version of Excel with some neat animations.
It's the same reason why UX designers and shit like figma exist. We let developers be in charge of designing an app, and they built unironic versions of userinyerface[1] and when told their shit sucks, they shrug and say whatever, "it'd be faster if they wrote X in markdown anyways."
[1] https://userinyerface.com/
Also, your example is a poor one, because in your example, both a visual method and a quicker keyboard method exist. Very often, the visual method doesn't even exist. In your analogy, its more like there is no way to move text from one app to another except for ctrl-c / ctrl+v, so the guy trying to do this just gives up and can't do it because they only know how to use file - paste. It's not even about shaving off .5 seconds, its about not even accomplishing the thing they want to do.
Finally, no, there's no such thing as one method being "objectively" wrong. You're making the mistake to think that efficiency between navigating screens and work is all about being fast. It's not. There's a lot of people (actually the majority) who don't give a shit about being faster at keyboard shortcuts and shaving 2 seconds off whatever. If you're a copy-writer, you might copy-paste once or twice and then the rest literally never leave a word editor and email.
This attitude is one of the biggest problems in HCI and development today. The tinkerers and developers like ourselves who love doing this stuff are unable to understand how actual users and clients work with systems, and when told that our designs suck and are inaccessible we scoff and say "lol just learn linux".
Finally, I have no idea whether or not there's an audience for this, but I will actually say that I'm probably one of the audiences for it. HTML, CSS and even JS isn't actually all that complex. But guess what. The real annoying shit that I have no interest in dealing with is the insanity of web development these days which involve build/compile and webpacks and frameworks and blah blah blah.
If I had a platform that let me dip into CSS/HTML/JS but had security guardrails, deployment fully setup and had some basic capability to whip up a docs page, or a simple website that still looked good, I would absolutely use it in a heartbeat.
In fact, I'm currently using a dinky-ass no-code app builder (lmao, in ESRI's ArcGIS Enterprise no less) to make a simple CRUD app. Why am I using it? Because none of the shit is documented at my workplace for deployment, I'm not interested in learning to use kubernetes just for a simple-ass website, and I have zero interest in figuring out how to configure HTTPS and deal with JWT tokens and whatever. I'm a data analyst who works in jupyter notebooks, python and SQL.
"Should" I be making this god awful no-code app? Hell no. Do I want to? Hell no. But do I need it? Yes, very much so. Otherwise, the people I rely on to populate a referential / look-up table update their reference documents in word and the table only gets updated manually when someone bugs the DBAs to manually update it, so these tables are always out of date. I could go with a straight-face to our over-worked web devs and ask them to stop working on their enterprise-wide/big-client project, but they would either hate me forever (fair) or ignore me because they're doing way more important things. Or I could go to the policy people who update these tables who can stare at me with a blank face when I explain that even if they just make an Excel table instead of a Word table then it would improve so many things, but to them its "whats the difference? im putting text in one table or another."
Instead, we have this dumb thing that's a drag-n-drop Bootstrap page maker, and with it comes built in auth, login and even exposes a simple REST API.
If I narrowly focused down on whether or not making this app with a drag-n-drop tool vs just writing an SSG, ofcourse the latter would be easier and faster. But, just writing the code for an SSG is not the hard part here. It's everything else that web devs live and breath so they forget how stupid of a workflow it actually is to make a React-Nuxt-Next-Babel-Webpack-Vite-tailwindCSS-whatever monstrosity, when 90% of people's needs could be served with the equivalent of a web-deployed version of Excel with some neat animations.
It's the same reason why UX designers and shit like figma exist. We let developers be in charge of designing an app, and they built unironic versions of userinyerface[1] and when told their shit sucks, they shrug and say whatever, "it'd be faster if they wrote X in markdown anyways."
[1] https://userinyerface.com/
I love thoughtful pushback as well as a good rant, so thank you (really). I completely empathize with the use cases you listed. Only thing I'll point out is that I'm only quibbling about the mode of interaction (UI vs text), I'm definitely not advocating that designers or non-devs should know or care about react/webpack/tailwind/blah/blah. Agreed that a nicely integrated design tool would hide all incidental complexity.
Thats fair, sorry I sort of looped in your point about UI vs text unfairly into the designer vs non-dev bit. Thanks for the kind response :)
As someone who transitioned from flash to webdev a decade ago, I wholeheartedly agree with this. A lot of folks who started their careers with current state of webdev workflows don't fully understand how amazing a fully integrated design solution that generates production ready artifacts (while retaining programmability) can be.
Thank you for succinctly summarizing this - I couldn't have done it better.
Thank you for succinctly summarizing this - I couldn't have done it better.
As a frontend dev, I have to disagree. The web is primarily a visual medium, and it's quite odd and inefficient that we have to code UI in declarative markup rather than a visual IDE. Visual Studio had better layout tools for WinForms... two decades ago.
Tweaking CSS and manually dragging the viewport around is not a great way to make responsive layouts. Flex and Grid are a nightmare of confusingly named properties (align self? justify content?) that would be much simpler to lay out with visual guides and snaps.
Dreamweaver had its uses back in the day, but sadly couldn't keep up with the pace of framework development (in CSS and Javascript) and became less useful over time.
These days I wish I could export Figma layouts to framework skeletons and go from there.
Of course there's stuff that's easier to just write in code (business logic, chiefly), but complex layouts that are ultimately rendered visually? I see no reason they shouldn't be laid out visually to begin with, InDesign style.
Just as designers might not understand the tooling of dev environments very well, maybe it's the case that some coders don't understand the power and benefits of visual design tooling? They certainly have their value, if you know how to integrate them into your workflow.
I'll have to check out this Webflow thing...
Tweaking CSS and manually dragging the viewport around is not a great way to make responsive layouts. Flex and Grid are a nightmare of confusingly named properties (align self? justify content?) that would be much simpler to lay out with visual guides and snaps.
Dreamweaver had its uses back in the day, but sadly couldn't keep up with the pace of framework development (in CSS and Javascript) and became less useful over time.
These days I wish I could export Figma layouts to framework skeletons and go from there.
Of course there's stuff that's easier to just write in code (business logic, chiefly), but complex layouts that are ultimately rendered visually? I see no reason they shouldn't be laid out visually to begin with, InDesign style.
Just as designers might not understand the tooling of dev environments very well, maybe it's the case that some coders don't understand the power and benefits of visual design tooling? They certainly have their value, if you know how to integrate them into your workflow.
I'll have to check out this Webflow thing...
You must not have used the large amount of low-code tools in the past.
I remember a time when almost all business apps were written in a drag-n-drop environment.
There's a reason that they dominated so definitively, for so long.
In fact, a big reason they're not around anymore is because the vendors forcefully killed them off.
The web as a replacement for app development is a really poor substitute, but anyone who started coding after 2004 won't know this, as it's all they've ever seen.
In short, parent comment is so off-base it might as well come from an alternate reality in which VB, MS-Access, Delphi and C++ builder did not exist.
I remember a time when almost all business apps were written in a drag-n-drop environment.
There's a reason that they dominated so definitively, for so long.
In fact, a big reason they're not around anymore is because the vendors forcefully killed them off.
The web as a replacement for app development is a really poor substitute, but anyone who started coding after 2004 won't know this, as it's all they've ever seen.
In short, parent comment is so off-base it might as well come from an alternate reality in which VB, MS-Access, Delphi and C++ builder did not exist.
I used UIKit (iOS) for a couple of years back in 2015/2016. It was an interesting experience, I did enjoy laying out the architecture of my app visually, then dipping into code for the behavior and business logic.
> I used UIKit (iOS) for a couple of years back in 2015/2016. It was an interesting experience, I did enjoy laying out the architecture of my app visually, then dipping into code for the behavior and business logic.
I think you can expand your view on what is technically possible by simply downloading Lazarus and creating a simply application with it. Follow a tutorial.
Then compare that experience with mangling react or similar to get what you want using purely an IDE to build everything.
I think you can expand your view on what is technically possible by simply downloading Lazarus and creating a simply application with it. Follow a tutorial.
Then compare that experience with mangling react or similar to get what you want using purely an IDE to build everything.
I’ll check it out, thanks. I remember doing a survey of lots of GUI tools a couple of years back (GTK, QT, etc). I don’t think I ever came across Lazarus but if it’s still available for download I’m interested to see what it can do.
There are a lot of people who understand what code does in isolation but struggle to understand the complexity of what happens when you build up layers of abstraction. Knowing what flex does is one thing, but know how the cascade works or what specificity rules are is another level. Technical visual tools help.
Its worth noting that the same is true for plenty of coders too. There's a good reason why people say things like recursion and pointers are hard.
Its worth noting that the same is true for plenty of coders too. There's a good reason why people say things like recursion and pointers are hard.
I've been critical of Webflow in the past for the same reasons, but having seen teams use it effectively I think there's more nuance here.
Namely, if you want to build a website then CSS layout is just the tip of the iceberg. If you write your own website you have to consider:
- HTML - CSS selectors - Deployment - Team collaboration (probably)
Using a visual website builder allows people to learn only a bit of CSS and have the rest taken care of.
Namely, if you want to build a website then CSS layout is just the tip of the iceberg. If you write your own website you have to consider:
- HTML - CSS selectors - Deployment - Team collaboration (probably)
Using a visual website builder allows people to learn only a bit of CSS and have the rest taken care of.
> Using a visual website builder allows people to learn only a bit of CSS and have the rest taken care of.
Does it handle responsiveness automatically? Accessibility? Download speed/size? Interactivity? Time to first render?
There's more here than you listed. It's a complex subject, and making one part of it easier by slapping a UI on it doesn't reduce the complexity.
Does it handle responsiveness automatically? Accessibility? Download speed/size? Interactivity? Time to first render?
There's more here than you listed. It's a complex subject, and making one part of it easier by slapping a UI on it doesn't reduce the complexity.
Webflow actually helps with all those things. Webstudio doesn't have much yet accessibility features on canvas, because this comes next, but the performance - man it feels like a lifetime spent on optimizing it with the help of lots of different tools. we hit 100% on lighthouse score consistently, the webstudio.is landing is built with webstudio.
https://pagespeed.web.dev/analysis?url=https%3A%2F%2Fwebstud...
https://pagespeed.web.dev/analysis?url=https%3A%2F%2Fwebstud...
Use framer, that's the tool your boss is looking for. It has good mix of PowerPoint/figma's absolute positioning approach with relative layouts.
Hi, hacker news community.
Oleg here, founder of Webstudio. We just launched the Beta a few days ago https://twitter.com/webstudiois/status/1668519656481497088
This is basically the first phase - Builder UX. Builder is focused on designers and visual developers.
Features developers community would expect are still in development and not documented, but I am excited about any feedback!
Oleg here, founder of Webstudio. We just launched the Beta a few days ago https://twitter.com/webstudiois/status/1668519656481497088
This is basically the first phase - Builder UX. Builder is focused on designers and visual developers.
Features developers community would expect are still in development and not documented, but I am excited about any feedback!
Ah Dreamweaver. You just won't die, will you.
At my school "web design" was creating a document in MS Publisher and clicking export to html
Web publishing for individuals shouldn't be anymore complicated than that. Just add a "Publish to SFTP" instead of "Export to HTML" and we'd have a vibrant network of personal websites out there.
Yeah but in school I'd just wished they'd taught me html and css. Or even that there was another way of making a website that didn't require the MS Office suite.
I remember my sister doing "Web Design" for uni 100% in Dream Weaver
Their classes we're roughly explaining which magic buttons to press in what order and voila: web design
Adobe Dreamweaver still exists and is still proprietary. This one (Webstudio) is open source.
https://www.adobe.com/ca/products/dreamweaver.html
https://www.adobe.com/ca/products/dreamweaver.html
Ah Netscape Composer. You just won't die, will you.
Thanks for posting it:)
The editor is pretty slick for a beta, but I wonder what the benefit is of releasing an app before, or instead of, a browser version. It seems to be written in react native (?), so I assume it's not a technical reason. (edit: I notice it actually is possible to use the builder in the browser, but that doesn't seem to be advertised anywhere!)
One of the problems I've seen with no-code editors is that a small to medium sized site might be contracted out to a developer or agency that builds it with WebFlow. Since the layout and style ends up complex enough that the client can't do much with it themselves, they need to go back to the original contractor, or find someone else who specializes in WebFlow, just to make small changes and bug fixes. Maybe that's fundamentally unsolvable due to the difficulty of producing a complicated site, but it feels like it should be possible to do better.
The main criticism I have specifically of this editor is that it feels too similar to WebFlow, but with fewer features, and I can't use it from a browser. The design tokens/local styles might be interesting, but I don't think it's fleshed out enough yet to say whether it's a significant improvement on WebFlow's style selector. I think there's plenty of room to iterate and improve on WYSIWYG builder UX in general though, so I look forward to how the project evolves!
One of the problems I've seen with no-code editors is that a small to medium sized site might be contracted out to a developer or agency that builds it with WebFlow. Since the layout and style ends up complex enough that the client can't do much with it themselves, they need to go back to the original contractor, or find someone else who specializes in WebFlow, just to make small changes and bug fixes. Maybe that's fundamentally unsolvable due to the difficulty of producing a complicated site, but it feels like it should be possible to do better.
The main criticism I have specifically of this editor is that it feels too similar to WebFlow, but with fewer features, and I can't use it from a browser. The design tokens/local styles might be interesting, but I don't think it's fleshed out enough yet to say whether it's a significant improvement on WebFlow's style selector. I think there's plenty of room to iterate and improve on WYSIWYG builder UX in general though, so I look forward to how the project evolves!
I am confused, we only have a download button at the bottom of the page, but "Get early access" button everywhere else. It is much harder to find download than to open the browser version ...
Similarity to Webflow is not a bug, its a feature. It's designed to feel familiar for Webflow developers. This product is built for them.
Check out this video to learn how Design Tokens work in Webstudio. It's built with full knowledge of Webflow Style selector. You are talking to an ex style system engineer from Webflow lol.
https://twitter.com/webstudiois/status/1669441600831868944
Similarity to Webflow is not a bug, its a feature. It's designed to feel familiar for Webflow developers. This product is built for them.
Check out this video to learn how Design Tokens work in Webstudio. It's built with full knowledge of Webflow Style selector. You are talking to an ex style system engineer from Webflow lol.
https://twitter.com/webstudiois/status/1669441600831868944
Oh! I probably shouldn't write comments before coffee. What happened was that I saw the sign-up page and assumed it was just for creating an account, rather than accessing the web builder. I should have realized what was going on when the same login screen appeared in the downloaded app.
I'm familiar with Webflow and the design tokens make sense to me, but I don't think it's a natural abstraction for non-web developers. I saw that you're ex-Webflow, I just meant to express a general frustration with how existing builders deal with reusable styles - it totally makes sense in the context of targeting devs who already know the Webflow UX. For what it's worth, I've been working on a site builder for the past few months and ended up with a similar solution, so this criticism is partly a projection of my own struggles.
Anyway, thanks for replying! The project looks great, I look forward to see what you end up with wrt versioning and animations.
I'm familiar with Webflow and the design tokens make sense to me, but I don't think it's a natural abstraction for non-web developers. I saw that you're ex-Webflow, I just meant to express a general frustration with how existing builders deal with reusable styles - it totally makes sense in the context of targeting devs who already know the Webflow UX. For what it's worth, I've been working on a site builder for the past few months and ended up with a similar solution, so this criticism is partly a projection of my own struggles.
Anyway, thanks for replying! The project looks great, I look forward to see what you end up with wrt versioning and animations.
Webflow is so far ahead with CMS and now membership that it'll be hard for open source to catch up unless it moves significantly faster.
I think if this product integrates some kind of popular node CMS it might be able to compete. I might be wrong but it just looks like an front end editor similar to GrapeJS
I think if this product integrates some kind of popular node CMS it might be able to compete. I might be wrong but it just looks like an front end editor similar to GrapeJS
You are correct regarding CMS. Same story with e-commerce and other things.
In fact fundamentally the architecture is built around the idea of not having those things built-in but rather providing APIs for others to create integrations with any data source: CMSs, Databases, E-commerce etc.
Webflow and others with built-in CMS have a massive amount of problems, because there is no one CMS that fits all.
Even harder is e-commerce.
So yeah, we are not going to compete on that because we are not building any of it, but instead focusing on architecture to support integrations.
Webflow and others with built-in CMS have a massive amount of problems, because there is no one CMS that fits all.
Even harder is e-commerce.
So yeah, we are not going to compete on that because we are not building any of it, but instead focusing on architecture to support integrations.
Webflow CMS is expensive, I can see a small business starting out with Webflow and getting locked in. I can't see a more mature business doing this, as they'd want hosting flexibility. WordPress page builders don't have any hosting lock-in.
It is expensive, but it's more expensive to hire a programmer to do similar features on a website.
Wordpress is more flexible but it just lack the product polish for consumer or even programmers like myself.
If I am building a new product, I'm not going to also try to build a website.
Wordpress is more flexible but it just lack the product polish for consumer or even programmers like myself.
If I am building a new product, I'm not going to also try to build a website.
What do they mean by 'Open' if it's a service?
As far as I can tell, it is also a desktop application, and the source code is available on Github: https://github.com/webstudio-is/webstudio-builder
On the main website you can scroll down to the bottom and click Download.
On the main website you can scroll down to the bottom and click Download.
It's open source. You can self-host it.
Doesn’t say much how. And it mentions docker but doesn’t mention anything about running the docker image.
Their intro video says you can run it on Cloudflare Workers, so I guess you can also run it locally using Cloudflare's local dev setup for Cloudflare Workers.
https://developers.cloudflare.com/workers/wrangler/commands/...
https://developers.cloudflare.com/workers/wrangler/commands/...
Their Contributing guide has a couple sections on getting it up and running: https://github.com/webstudio-is/webstudio/blob/main/docs/con...
I saw that and confused it with a non-containerized install. Thanks for posting.
Good thing you can pay them to take care of those things if you don't want to invest effort in finding out for yourself.
I wrote some "CNET 5-star" award winning software (if anyone remember them) and its website back in 1996. HTML/CSS/JS/SQL. CSS/JS were just getting started (CSS 95, JS 96).
I did it by hand, but Microsoft FrontPage v1.1 was out that year ... WYSIWYG!
2013 and I'm seeing a proliferation of ... WYSIWYG?
Granted, it does look slick and it's MIT licensed. Best of luck with the product.
I did it by hand, but Microsoft FrontPage v1.1 was out that year ... WYSIWYG!
2013 and I'm seeing a proliferation of ... WYSIWYG?
Granted, it does look slick and it's MIT licensed. Best of luck with the product.
I downloaded it, looks slick. Can I use standard frameworks like Bootstrap with this? Also, any docs?
If you're using a design tool to build your website... why would you need bootstrap? If you use a tool, the implementation details shouldn't matter much to you, just the process and final product.
Wish that was the case in general, but it isn't. The implementation details matter, because:
- There may be other tools better at specific aspects of the product, which you may want to include in the process;
- Special case of the above, the design tool may not carry you 100% of the way, and you don't want the tool to become an anchor at that point;
- There may be other people working on the product, using different tools;
- There is lots of ready-made stuff that can be plugged in to your product to enhance or prettify or optimize it - provided it's compatible with common standards at the implementation level.
- There may be other tools better at specific aspects of the product, which you may want to include in the process;
- Special case of the above, the design tool may not carry you 100% of the way, and you don't want the tool to become an anchor at that point;
- There may be other people working on the product, using different tools;
- There is lots of ready-made stuff that can be plugged in to your product to enhance or prettify or optimize it - provided it's compatible with common standards at the implementation level.
This is true. There are standard use cases like landing/marketing sites, blogs etc that can be done fully visually, and there are custom once where coding is not avoidable.
We have designed it to work for both by providing API and CLI to integrate with the custom app and git-based workflow.
This part is still work in progress though.
We have designed it to work for both by providing API and CLI to integrate with the custom app and git-based workflow.
This part is still work in progress though.
I am just fine with the look and feel of bootstrap. Visual tools are great for prototyping and for dealing with fiddly bits like layouts.
Why would I want to be constrained to plain HTML when there are pre-made toolkits out there that do it for me? I don't want to figure out how to do rounded corners in CSS, but I would like to have a GUI that shows me how it looks on a page.
Why would I want to be constrained to plain HTML when there are pre-made toolkits out there that do it for me? I don't want to figure out how to do rounded corners in CSS, but I would like to have a GUI that shows me how it looks on a page.
It sounds like you'd be better off with a Bootstrap-based visual site builder. I can recommend Bootstrap Studio. The visual nature of it helped me work with flexbox much better than online tutorials did. It exports nicely structured HTML that can be edited and modified outside of BSS easily.
It's a paid tool, but there's no vendor lock-in. Buy once and it's yours forever.
It's a paid tool, but there's no vendor lock-in. Buy once and it's yours forever.
... you know rounded corners are built in to CSS right? There's no arcane knowledge there. Bit of an odd example
Reminds me of the old "sliding doors" technique. You young guns have no idea how good you have it with your fandangled "border-radius". We had to work hard for our rounded corners back in the day.
https://alistapart.com/article/slidingdoors/
https://alistapart.com/article/slidingdoors/
Integrations with various frameworks is on the roadmap. In fact we have already started integrating with the first one - Radix UI.
Once we are happy with the API for integration, we will document it for developers community so everyone can integrate it with different frameworks.
Once we are happy with the API for integration, we will document it for developers community so everyone can integrate it with different frameworks.
[deleted]
> Similar to Webflow, Webstudio visually translates...
Wait. So in the first sentence on your homepage you mention your competition. Third word. Before you mention yourself.
Wait. So in the first sentence on your homepage you mention your competition. Third word. Before you mention yourself.
Not sure if you are new to the internet :) to give you one example of many https://supabase.com/
This is how you can position yourself and be understood by the target user if the product is for them
This is how you can position yourself and be understood by the target user if the product is for them
> Not sure if you are new to the internet :)
:-)
> to give you one example of many https://supabase.com/ This is how you can position yourself and be understood by the target user if the product is for them
Supabase headline reads: "Supabase is an open source Firebase alternative for building secure and performant Postgres backends with minimal configuration."
Still don't know what it is, other than I should go to the Firebase website to find out. There I read at the top: "Firebase is an app development platform that helps you build and grow apps and games users love. Backed by Google and trusted by millions of businesses around the world."
And right after there's a "Get Started" button.
Since supabase is just an open source alternative (according to their copy) of Firebase (but is it really? it talks about postgres backends not apps?), I'd rather go with the thought leader in this space. Supabase, if you're reading this: what's your elevator pitch? What makes you the leader for building apps or whatever it is you do? Why would I want to follow you?
:-)
> to give you one example of many https://supabase.com/ This is how you can position yourself and be understood by the target user if the product is for them
Supabase headline reads: "Supabase is an open source Firebase alternative for building secure and performant Postgres backends with minimal configuration."
Still don't know what it is, other than I should go to the Firebase website to find out. There I read at the top: "Firebase is an app development platform that helps you build and grow apps and games users love. Backed by Google and trusted by millions of businesses around the world."
And right after there's a "Get Started" button.
Since supabase is just an open source alternative (according to their copy) of Firebase (but is it really? it talks about postgres backends not apps?), I'd rather go with the thought leader in this space. Supabase, if you're reading this: what's your elevator pitch? What makes you the leader for building apps or whatever it is you do? Why would I want to follow you?
> Still don't know what it is, other than I should go to the Firebase website to find out.
You almost got it :)
95 pct of people arriving on WebStudios' site will be coming from search engines. What search term did they most likely use? Webflow, perhaps?
You are confused by the marketing copy because the website link was given to you, you didn't have to think of anything to search for.
You almost got it :)
95 pct of people arriving on WebStudios' site will be coming from search engines. What search term did they most likely use? Webflow, perhaps?
You are confused by the marketing copy because the website link was given to you, you didn't have to think of anything to search for.
So, another Framer.com.
There are so many website builders out there, I'm surprised someone made yet another one. This basically looks like webflow.
According to their blog, the main developer used to work for Webflow. They wanted to start fresh because of some technical debt that Webflow (apparently) has.
I, for one, am glad for there to be more than just one good option out there. Alternatives are a good thing, especially self-hostable ones.
See "Webstudio vs. Webflow" https://webstudio.is/blog/webstudio-vs-webflow
[deleted]
need a good react component visual builder that produces code you can then customize. You still have code but it speed things up
Down for me. HN-hug of death?
Look, at a high level no-code seems to make sense. But there's a serious issue with the value proposition when you start thinking critically about it. The supposed benefit is that, as the "no-code" moniker suggests, people without coding skills can build websites. Sounds great!
Except that just, like, look at the screenshot in the hero section webstudio's landing page. There's a visual sidebar with a flexbox configuration panel. The word "flex" is displayed as a dropdown, so I'd imagine that the menu list contains other options like "grid", "block", etc.
This means your target audience is people who (a) understand the difference between CSS display properties, and (b) think that this interface is easier and faster than writing the code directly. I genuinely do not understand who this audience is - if you understand code, code is dramatically faster than any UI and everyone who codes knows it.
I've worked with a non-technical CEO, and I once showed him Webflow to see if he could grasp it. It went as well as you'd imagine. That's not me making fun of him, it's me pointing out the reality that this shit is complex, and tossing a UI on top of it doesn't change that complexity.
Another point is that even if it helps speed up web development, it can only do so for very small websites with light interaction. If you're looking to do anything even remotely custom or sophisticated, these kinds of tools break down very fast. So there's a paradox here - the stuff you can speed up really doesn't take very long anyways, and the stuff you actually need to speed up, these tools don't help with.