Webstudio:开源可视化网站构建器（Webflow 替代）
分类：工具实测 浏览量：51
摘要：
Webstudio 是一个开源的可视化网站构建器，定位为 Webflow 的替代品。它能帮助电商团队在「可视化工具能力有限」和「手写代码太慢」之间取得平衡，通过支持所有 CSS 属性来制作复杂布局，并可将前端界面与任意 headless CMS 连接，实现内容与界面的分离管理。该工具适合前端开发者、设计师以及对数据主权有要求、需要自托管部署的团队使用。
Webstudio 是一个开源的可视化网站构建器，官方说它是 Webflow 的替代品。它给开发者、设计师和跨职能团队用，能接任意 headless CMS，支持所有 CSS 属性，部署到哪里都行——用官方的托管服务，或者放到自己的服务器上。它在 GitHub 上有 9153 个 star、1639 个 fork，用的协议是 AGPL-3.0。
适合谁
- 前端开发者：不想从头写页面，又嫌普通拖拽工具生成的代码质量不行。用 Webstudio 可以在可视化界面里搭页面，同时还能完全控制 CSS。
- 设计师：所有 CSS 属性都支持，意味着你能在浏览器里直接做出设计稿的效果，不用在 Figma 和代码编辑器之间来回倒腾。
- 需要自托管的团队：数据、组件、基础设施都握在自己手里，不绑定任何 SaaS 服务，适合那些对数据主权有要求的项目。
能解决什么问题
1. 在「可视化工具能力有限」和「手写代码太慢」之间做选择。Webstudio 支持全部 CSS 属性，做复杂布局不用找变通方法，也不用等开发排期。
2. 把内容和前端分开。接上任意 headless CMS 后，内容团队管内容，开发团队管界面，两边工作不互相耽误。
3. 部署被锁定的问题。可以用托管版，也可以自己托管。README 里原话是 "You can use the hosted version or roll out your own"，以后换平台不用重新做。
怎么开始用
先去看 GitHub 仓库里的 README 和文档，再决定用托管版还是自己部署：
仓库：https://github.com/webstudio-is/webstudio
文档：https://docs.webstudio.is/
社区：https://wstd.us/community
想快速试试，直接用托管版；想自己完全控制，就按官方文档部署。如果想参与开发，看 Contributing 文档和 Builder Issues Tracker，Roadmap 也在仓库里公开了。
优点和坑
优点：
- 开源，核心功能都在这个仓库里，协议是 AGPL-3.0-or-later。
- 可视化搭建，同时支持所有 CSS 属性，不用在表达能力和效率之间妥协。
- 部署自由，托管或自托管都行，数据、组件、基础设施归你自己管。
坑：
- AGPL-3.0 有传染性。如果你改了代码，并且对外提供网络服务，可能得把你的修改也开源。商用之前先搞清楚协议要求。
- 动画组件不是完全开源的。sdk-components-animation 这个包是专有的，用之前必须接受 Webstudio, Inc. 的最终用户许可协议。
- 自托管有门槛。得自己搞定服务器、数据库、域名这些基础设施，不懂技术的用户会觉得麻烦。
- 社区规模中等。项目是 2022-03-13 创建的，最近更新是 2026-11-08，迭代挺活跃，但 9153 个 star 不算特别多，遇到问题主要靠 Discord 和 Issues 解决。
适合你吗
适合：开发者、设计师、想摆脱 Webflow 订阅费的团队、对数据主权有要求的项目。
不适合：完全不懂技术的纯新手，自托管和 AGPL 协议都会是障碍，直接用托管版更省事；需要官方动画组件的人，注意那个包要单独接受许可协议，不是纯开源的。
---
常见问题
Webstudio 是免费的吗？
Webstudio 是开源工具，核心功能免费。但要注意它的 AGPL-3.0 协议有传染性，如果你修改了代码并对外提供网络服务，可能需要开源你的修改。另外，它的动画组件包是专有的，用之前必须接受 Webstudio, Inc. 的最终用户许可协议。
Webstudio 和 Webflow 有什么区别？
Webstudio 是一个开源的可视化网站构建器，官方把它定位成 Webflow 的替代品。主要区别是：Webstudio 支持所有 CSS 属性，可以接任意 headless CMS，并且部署自由（可以用官方托管，也可以自己托管），数据、组件和基础设施都由用户自己控制，不绑定任何 SaaS 服务。
Webstudio 怎么部署到自己的服务器？
Webstudio 支持自托管，你可以把项目部署到自己的服务器上。这需要你自己准备服务器、数据库、域名这些基础设施。具体步骤看官方文档，不懂技术的用户操作起来会有难度。
Webstudio 适合设计师用吗？
适合设计师用。因为 Webstudio 支持所有 CSS 属性，设计师可以直接在浏览器里还原设计稿，不用在 Figma 和代码编辑器之间来回切换，能提高效率。
Webstudio 的开源协议有什么限制？
Webstudio 用的是 AGPL-3.0 开源协议，这个协议有“传染性”。如果你修改了 Webstudio 的源代码，并把修改后的版本对外提供网络服务，那么你可能需要把你的修改部分也开源。商用之前一定要弄清楚协议的具体要求。
相关工具推荐
- 像 KeystoneJS 这样的无头 CMS 可以与 Webstudio 无缝连接
- 使用 MDBootstrap 可以快速实现 Material Design 风格的组件
- 通过 Web Font Loader 可以更好地控制网页字体加载
官方地址，点开新窗口；本文仅为工具介绍，与该项目无隶属关系。
