# 🔥 Intro

{% embed url="https://vimeo.com/831343124" %}

Webstudio is an open-source visual development platform that empowers designers and developers to create responsive web designs with ease. Bridging the gap between design and code, it allows users to visually build while maintaining control over the underlying HTML, CSS, and JavaScript.

## 🧑‍🎨 For Designers

Webstudio offers a powerful platform for designers to bring their creative visions to life, without needing extensive coding knowledge. Its intuitive visual interface enables the construction of layouts, styling of components, and animation of elements in real-time on a live canvas. This direct manipulation of design elements facilitates immediate feedback and accelerates iteration cycles.

## 🧑‍💻 For Developers

Developers can combine the visual editor with Resources, expressions, HTML Embed, and Webstudio MCP. Projects can be exported, self-hosted, or extended by contributing to the open-source Builder. Webstudio does not currently provide a visual workflow for defining new reusable component types; use Slots for reusable project content and HTML Embed for custom code.

## Related

- [Webstudio Features](https://webstudio.is/features) – Explore all Webstudio features
- [Building your first site](building-your-first-site.md) – Step-by-step guide to create your first website
- [Courses](courses.md) – Community-made courses for learning Webstudio
- [Anatomy of the Webstudio builder](../university/foundations/anatomy-of-the-webstudio-builder.md) – Understand the builder interface
- [Inception](../university/inception.md) – Explore Webstudio's standalone AI design exploration app
- [FAQs](FAQ.md) – Common questions and answers about Webstudio