OSS探訪

Webstudio — CSSを視覚編集し、headless CMSと任意インフラへつなぐopen-source website builder

OSS健全度 93
スコアの見方

発掘スコアはStars・Watchers・Forks・Contributorsを対数圧縮して重み付けした独自指標(上限なし)。成長モメンタムは観測期間内の同スコアの差、OSS健全度は取得できた更新状況・Community Health・Releaseの0〜100評価です。

Stars
8,957
主要言語
TypeScript
ライセンス
AGPL-3.0
リポジトリ最終更新
2026/09/17

概要

Webstudioは、Webflow代替を掲げるTypeScript製のvisual development platformです。hosted版とself-hostの両方を選べ、data・component・infrastructureを自分で持ちながら、visual builderからWebサイトを構築できます。2026年9月17日時点のlatest releaseは0.298.0です。

特徴と向いている用途

公式資料に基づく紹介・実機未検証 · 内容確認日:

visual builderでWeb制作を進めつつ、headless CMSや既存Web stackへ接続する

repository metadataでは、すべてのCSS propertyを扱えるvisual builder、headless CMSへの接続、任意環境へのhostingを主要価値として掲げています。design toolの操作感を使いつつ、生成物やinfrastructureの所有権をSaaSだけに固定しない構成です。

出典:[1][2]

Cloudflare publishingを含むdeploy導線を継続的に改善する

0.298.0ではCloudflare publishingをWrangler 4で再び動作させる修正、collection entry authoring改善、asset upload retry/diagnostics改善が入りました。visual editingだけでなく、publish pathとruntimeを同じprojectで扱う点が特徴です。

出典:[4]

Webflow型のvisual editingを使いたいが、code・data・hostingの選択権も保持したいteamに

designerとdeveloperが同じWeb制作基盤を使い、headless CMSやCloudflare等へ接続しながら、hosted serviceだけに閉じない運用をしたい場合に比較価値があります。

coreはAGPL-3.0-or-laterだが、optional animation packageは別EULA

READMEはrepositoryのcore functionalityをAGPL-3.0-or-laterとしつつ、optionalな sdk-components-animation packageはproprietaryで、利用前にWebstudio, Inc. EULAへの同意が必要と明記しています。全packageが同一OSS licenseだと扱わない方が安全です。

また0.x seriesで更新頻度が高いため、self-hostやpublish workflowへ組み込む場合はrelease notesとmigration/config差分を追う運用が必要です。

出典:[2][4]

参考にした公式資料

  1. [1]webstudio-is/webstudio — GitHub repository metadata(2026-09-17)
  2. [2]Webstudio — README(2026-09-17)
  3. [3]Webstudio — Contributions / local development guide(2026-09-17)
  4. [4]Webstudio 0.298.0 release(2026-09-17)
編集部からの補足

visual authoringとcode/infra ownershipを両立できる点を重視しました。optional animation packageは別EULAなのでlicense境界に注意してください。

3ステップで試す

  1. 1

    ソースを取得

    git clone --depth 1 https://github.com/webstudio-is/webstudio.git
  2. 2

    リポジトリへ移動

    cd webstudio
  3. 3

    公式手順を確認

    READMEのInstallation / Quick Start / Getting Startedにある公式コマンドを続けて実行してください。

    find . -maxdepth 1 -iname 'README*' -exec sed -n '1,220p' {} \; -quit
公式READMEで確認

成長

成長の推移 · 直近30日

8,957 Stars

推移データを蓄積中です。

開発アクティビティ

直近90日・週次

Commit(直近30日)
74
Open PR
25

開発アクティビティを蓄積中です。

Built with

カテゴリとタグ

GitHubデータ

GitHubのデータGitHubの詳細データを見る

GitHub Topics

  • accessibility
  • cloudflare
  • cloudflare-workers
  • design
  • free
  • frontend
  • open-source
  • radix-ui
  • react
  • remix
  • web-development
  • webflow
Stars
8,957
Forks
1,607
Watchers
66
Open Issues
342
主要言語
TypeScript
ライセンス
AGPL-3.0
リポジトリ最終更新
2026/09/17

このOSSの使い方や活用事例をMarkdownで投稿できます。管理者が承認した後に公開されます。

情報の誤りを報告

掲載内容に誤りや古い情報があればお知らせください。