Finally, an open source visual development tool!

Visual development, without limitations.

No platform risk
No back-end limitations
No unreadable, one-way code

Sound exciting?
Don't hesitate to start a discussion on Github and give it a star.
Subscribe and follow us on Twitter.

On the mission to democratize software creation on the web

Webstudio is going to dramatically simplify collaboration between designers and developers on any type of site or web app.

You can build your front-end visually with Webstudio and connect it with your digital ecosystem over APIs or with any custom back-end system.

You own everything you create with Webstudio and you’re free to deploy it wherever you want!

Deploy anywhere

Launch with one click directly from Webstudio or deploy the code to any other service like Vercel, Netlify, AWS, etc. yourself!

For developers

What if you could avoid writing declarative render components and CSS in code completely? What if you could create the visual components in a visual tool? What if you could play with CSS like you do in dev tools and make it synchronize with your production code?

That's the goal with Webstudio. Designers and product owners on your team can work on the front-end without needing your help for every task. The goal is to let you focus on business logic and custom rendering logic that requires code and remove pixel-moving tasks from your to-do list.

And did we mention it’s open source?

For designers

The power to bring your designs to life on the web is here. Webstudio is like no tool you’ve ever used before. While other visual development tools limit you to their platform, you can take your Webstudio project and do anything with it!

You can integrate with any CMS or e-commerce platform, you can share your builds on GitHub, and you can collaborate with developers like never before.

For everyone

We want Webstudio to be useful to everyone. No matter your role or coding ability - you should be able to use it. Our mission is to democratize software creation for the web.

Save time and money with empowered collaboration

Imagine a team of designers, engineers, and product owners collaborating on the product in real-time. Any of them can work on the product, reducing the engineering hours needed and significantly reducing time spent on communication.

Each team member can work on a different version of the same product, validate their assumptions and merge their version when a consensus is reached.

Integrate with any service

With Webstudio you can use any headless CMS or e-commerce back-end. For example, you can build a site or app that integrates Shopify for online shop or GraphCMS and Contentful for CMS content.

Webstudio features a UI to create API bindings. You can add a GraphQL binding to any component and choose which endpoint and data properties to bind to each component property. Webstudio will optimize and cache data for you, making as few and as small requests as possible.

Code, visually

Webstudio is a true visual development tool that embraces CSS, unlike drag-and-drop builders that produce bloated, unreadable code and slow sites.

With Webstudio, you build visually while the code is written for you. Your code comes to life in real time on the canvas, where you can also select and move elements.

Any component can be overwritten or wrapped by a custom code component. You can visually create bindings for any GraphQL API to any component.

No platform risk or vendor lock-in, ever! Embrace the web foundation on top of a distributed infrastructure. (thanks, Remix)

Export and synchronize data from Webstudio

Webstudio produces three types of data and enables access to it over API: components tree, styles, and GraphQL bindings. Additionally, it provides primitive components you can install via npm in your codebase.

Webstudio will generate a Remix app for you out of the box, or you can choose to integrate primitive components and data from Webstudio with your custom code.

You can use a single component, one page, or the entire site from Webstudio because everything is a React component. There is no "eject".

You can synchronize the data any time and keep collaborating between custom code and Webstudio!

Performance is our foundation

We want you to deploy your serverless app to the edge with just one click. Running on the edge means your code runs on a globally distributed server infrastructure, close to your users. Furthermore, thanks to Remix your app runtime won’t depend on Node and can be deployed virtually anywhere, for example, Cloudflare Workers or Vercel Serverless Function.

Remix also ensures the highest possible front-end performance by utilizing lazy loading and progressive enhancement.

Accessibility commitment

Our commitment is to ensure the highest possible accessibility standard in Webstudio UI and produced sites or web apps. Webstudio itself is already built using an accessible components foundation - Radix UI.

On top of that, we are committed to guiding the user towards fully accessible content, validating their work in real-time and identifying problems, pushing them to create accessible content.