OSS探訪概要
Onlookは、Next.js + TailwindCSSのアプリをブラウザDOM上で直接選択・配置・スタイル変更し、その変更を実コードへ反映できるビジュアルコードエディタです。AIチャットから新規ページや要素を作り、コードエディタ、チェックポイント、分岐、共有リンクや独自ドメインへのデプロイまで扱えます。このGitHubリポジトリで確認できる最新リリースはv0.2.32です。
特徴と向いている用途
公式資料に基づく紹介・実機未検証 · 内容確認日：
Figmaのように画面上の要素を操作し、変更をReactコードへ反映する
ブラウザ内の要素を選び、レイアウトやTailwindスタイルを視覚的に編集できます。要素から対応するコード位置へ移動したり、デザインとコードを横に並べて確認したりできます。
出典：[2]
AI生成・分岐・チェックポイントを使って複数のデザイン案を試す
テキストや画像からNext.jsアプリを作成し、AIチャットで編集できます。デザイン分岐、チェックポイント、CLI実行、共有リンク/独自ドメインへのデプロイなど、デザインと開発の往復を一つの環境へ寄せています。
出典：[2]
デザイナーとフロントエンド開発者が同じReactコードベース上で作業したい場合に
Figmaのモックと実装を別々に管理するのではなく、実際のNext.js/Tailwindコードを見ながら画面を調整したいチームに向きます。
出典：[2]
OSSエディタと次のホスト型Onlook、対応フレームワークの範囲を分けて考える
READMEはこのリポジトリを『Onlookを始めたオープンソースのビジュアルエディタ』と説明し、AI-native designers向けの次のホスト型製品はearly accessとしています。またREADMEの未完了項目では非Next.js/非Tailwindプロジェクト対応が今後の対象として挙げられているため、現時点ではNext.js + Tailwindを主対象と考えるのが安全です。ライセンスはApache-2.0です。
参考にした公式資料
- [1]onlook-dev/onlook repository(2026-09-18)
- [2]Onlook README(2026-09-18)
- [3]Onlook LICENSE(2026-09-18)
- [4]Onlook v0.2.32 release(2026-09-18)
編集部からの補足
指定URL`onlook-dev/studio`は現在`onlook-dev/onlook`へリダイレクトされます。READMEはこのOSSリポジトリを『Onlookを始めたビジュアルエディタ』と位置付け、次のホスト型製品はearly accessと説明しているため、両者を同一製品状態として扱わないよう注意が必要です。
3ステップで試す
- 1
ソースを取得
git clone --depth 1 https://github.com/onlook-dev/onlook.git - 2
リポジトリへ移動
cd onlook - 3
公式手順を確認
READMEのInstallation / Quick Start / Getting Startedにある公式コマンドを続けて実行してください。
find . -maxdepth 1 -iname 'README*' -exec sed -n '1,220p' {} \; -quit
成長
成長の推移 · 直近30日
26,759 Stars
推移データを蓄積中です。
開発アクティビティ
直近90日・週次
- Commit（直近30日）
- 0
- Open PR
- 74
開発アクティビティを蓄積中です。
Built with
カテゴリとタグ
GitHubデータ
GitHubのデータGitHubの詳細データを見る
GitHub Topics
- react
- typescript
- tailwindcss
- nextjs
- low-code
- design
- frontend
- ui
- figma
- cursor
- ide
- cursor-ai
- Stars
- 26,759
- Forks
- 2,104
- Watchers
- 130
- Open Issues
- 307
- 主要言語
- TypeScript
- ライセンス
- Apache-2.0
- リポジトリ最終更新
- 2026/08/25
関連情報
関連記事を投稿するこのOSSの使い方や活用事例をMarkdownで投稿できます。管理者が承認した後に公開されます。
あわせて探訪
- OpenClaw390,022 Stars
チャネル・ツール・メモリを束ねる永続型パーソナルAIアシスタント基盤。
TypeScript - React250,557 Stars
宣言的なコンポーネントでWebとネイティブのUIを構築するJavaScriptライブラリ。
JavaScript - Hermes Agent246,751 Stars
Memory・Skills・Cron・Subagentsを備える永続型AIエージェント。
Python - TensorFlow200,162 Stars
研究・学習・評価・可視化・配備をtoolとlibraryでつなぐend-to-end machine learning基盤。
C++ - Visual Studio Code（Code - OSS）192,641 Stars
Visual Studio Codeの基盤となるMITライセンスのCode - OSSリポジトリ。
TypeScript
情報の誤りを報告
掲載内容に誤りや古い情報があればお知らせください。