Open Visual Development for the Open Web

<aside> 💡 Webstudio is a UI builder and a Platform.

</aside>

Who is it for?

Webstudio Designer is a product for Designers and design-oriented visual developers; in a category pioneered by Webflow.

So far we have seen both: Designers who learned Visual Development using Webflow and beginner web developers who started using Webflow to become more productive.

Early adopters will be advanced Webflow users who want the power Webstudio provides.

Developers have an important role too: they will be able to build integrations for Webstudio, similar to Figma plugins and Shopify Apps.

Experienced Developers who lack HTML/CSS skills will find it also easier to build and learn using Webstudio.

Focus

The primary goal for Webstudio is to become the best UI for visually manipulating CSS and HTML, without being opinionated on data and rendering. To achieve that, we made several decisions:

1. Graduate from classes - making it easier for designers. Dealing with classes has a lot of gotchas, we can reuse styles using Design Tokens and Composite Tokens, rather than classes https://webstudio.is/blog/design-tokens-better-than-classes Classes are subject to CSS specificity conflicts. Tokens, the way we provide them, are not. Additionally Design Tokens are cross-platform and can be shared across teams and platforms or synced with design tools like Figma.
2. Decouple the Rendering - making sure every developer is happy. Designer Product is decoupled from rendering frameworks like React, Vue, etc. It produces JSON data. Frameworks are connected to it using an SDK. Frameworks are maintained by the community rather than provided out of the box. Framework integration is made as easy as possible to allow the community to innovate, use any components and logic they want.
3. Components are the core. Developers can provide their own Components for the canvas. Components allow composition. Components define properties available in the Properties Panel and Style Panel. Components define the rendering in the document. Components implement complex behavior.
4. Keeping Webstudio Builder UX as close as possible to CSS and HTML. We are trying to achieve transferable knowledge as much as possible. We don’t encourage using legacy parts of the platform. We fix problems the platform has and explain through the UI what we did. We don’t abstract away the underlying platform to the level where a user has no idea how HTML or CSS works. We allow a person with a Design background to learn the fundamentals of HTML and CSS while giving them an easy way to discover how it all works visually.

Workflow

A typical workflow can be a Visual Developer building low-fidelity designs first in Figma, then building high fidelity version in Webstudio, with a potential tokens sync.

It is entirely possible for a Visual Developer to also build directly in Webstudio. Webstudio isn’t trying to replace a free-hand drawing tool like Figma, but making it easier for them to work together.

A Visual Developer will use integrations made by developers to build CMS-driven sites, Shops or build on top of company-owned proprietary components or databases.

The goal is to empower Designers and Visual Developers to build complex sites while letting developers help them build.

In the next stage, a developer will be able to collaborate with a Designer by letting Designer build visual components and pages, but rendering them in their app, using their technology of choice. Improving Designer collaboration and deploying to their servers.

No CMS, E-Commerce, or Database