Why Webstudio, why now?

It all started when I created JSS 2014, a CSS-in-JS library. I created it to fix the problem of authoring CSS in a more maintainable way, especially in large projects. Managing selectors has always been a problem with CSS, since it was originally designed for documents and not applications.

Later, in 2018, I joined Webflow as an engineer to work on the Style System - the code responsible for rendering CSS. During that time, I fell in love with some fundamental UX concepts that Webflow made available to a lot of people and how this has impacted many people's lives for the better.

Craving progress

While being an engineer at Webflow was challenging, most of the challenges were a result of architectural and engineering decisions made early on. These decisions, along with the large scale of the product, led to frustratingly long development times. Even the smallest imaginable changes sometimes took months. Technical debt in a huge codebase is just something you can't avoid if you don't make the right decisions early on, and sometimes correcting them is harder than rewriting the entire system from scratch.

This thought got me frustrated over time so I quit Webflow in May 2021. This wasn’t an easy decision, because these were people I enjoyed working with a lot. In fact, this was the best company I ever worked for. I am thankful to Vlad and many others for their thoughtful conversations and support.

Why Now?

Fast forward 1 year after leaving Webflow, I realized two major developments happened:

1. Cloudflare Workers - a micro VM for JavaScript on the Edge. This is a new kind of server that is faster, distributed to over 270 locations worldwide, cheap, scalable, and Open Source. Cloudflare has made enormous advancements in hosting and runtime. Workers, coupled with KV Stores and Durable Objects, are opening up incredible technical capabilities on a planet-wide scale.

2. Remix - a framework with a tiny runtime running on CF Workers or any other JS runtimes. All it needs is JavaScript and a few APIs. It is portable and yet super powerful. Perfect for any type of website including E-Commerce.

One day, while reading tweets from Ryan Florence about Remix, my mind went 🤯. I suddenly realized the potential of combining visual development with these technologies: designers can now produce highly portable and optimized sites and web apps. This not only enables them to build virtually anything, but it also provides a next-level experience for both the designer and end-users!!!

Better UX, more power to visual developers

While I love Webflow's core UX, which involves building using CSS primitives without abstracting them away entirely, there are many things that I want to improve. These are the kinds of early mistakes that a grown company can't easily fix.

1. Design Tokens instead of classes.

   Classes are fine as long as you don't have to maintain 500 of them. Medium and large Webflow builds are difficult to maintain due to the global nature of classes and the inability to scope them.
   
   Design Tokens eliminate the need to worry about naming conflicts. They can be renamed at any time without breaking external dependencies and can be synced with Figma Design Tokens and shared with other platforms.

2. Custom Code Components.

   I really want the ability to use code components. Sometimes writing code is unavoidable for custom logic, and sometimes using a framework like Tailwind or Material UI is the only good way to build the UI you want. For this, an entirely different architecture is required.

3. No handover.

   As a designer, you want to build parts or all of the product visually. Giving a designer the ability to control the appearance solves the same problem for product teams as it does for marketing teams - the ability to directly manipulate the design without handover.

4. Using external data sources.

   I really want to be able to connect to any data source, such as a CMS like WordPress, an e-commerce shop like Shopify, or a database like Supabase or Airtable. For this, once again, we need an entirely different architecture.

5. Real-time collaboration.

   Last but not least, Figma’s UX with actual real-time collaboration is incredible. I enjoy it so much that I want the same experience for all Webstudio users.

All in all, these goals are so difficult to achieve that they certainly require building a new product. This cannot be easily accomplished within Webflow any time soon, maybe never. However, my experience tells me that we can build all of this with a small team in under 2 years.

Pricing that works for everyone

We are building Webstudio to not only provide capabilities, but also to become a better community and a better place for learning, experimenting, and building hobby projects for free.

Moreover, the pricing structure is designed to enable free learning and experimentation, while only professional use cases would incur a fee to ensure the long-term sustainability of Webstudio. The pricing structure is also straightforward. You will like it!

The true value of Open Source

I am a strong believer in Open Source. I believe that to truly democratize anything, the solution has to be open: open for extension, open for contribution, and open for building on top of it.

Even more, the reason to build on Open Source is the community. I believe that the full vision can only be realized with the help of the entire community of designers and developers collaborating together. We can build an open marketplace for free and paid components and integrations in the future.

We plan to release the beta version of Webstudio within the next couple of months. This year, we will introduce the ability to connect to external data sources, build animations, enable real-time collaboration, and much more. Our team has built everything from the ground up to make this vision a reality.

Webstudio Beta offers a user experience that should be familiar to Webflow users, better maintainability, powerful collaboration that you've come to expect from Figma, and ludicrous performance.