- Web上でサイト、プロトタイプ、デザインをリアルタイムのコードとともに作成できるオープンソースのビジュアルVibe Codingエディタ
- Next.js + TailwindCSSベースで、ブラウザ上でリアルタイムプレビューとDOMの直接編集が可能
- Bolt、Lovable、V0、Replit Agent、Figma Make、Webflowなどの商用サービスのオープンソース代替を目指す
主な機能
- Next.jsアプリをテキスト/画像から即座に生成 - Figmaインポート、テンプレートなどを今後サポート予定
- Figmaに似たUIでページ生成、アセットおよびトークン管理、リアルタイムプレビューをサポート
- リアルタイムコードエディタ、チェックポイントの保存と復元、CLIによるコマンド実行、マーケットプレイス連携
- ドラッグ＆ドロップ、Tailwindスタイル編集、レイアウト実験などのビジュアル操作をサポート
- リアルタイム編集 / コメント / 共有リンク / カスタムドメインを今後サポート予定
- Webベースだが、デスクトップアプリ(Onlook Desktop)とも連携可能
アーキテクチャと動作方式
- アプリ生成時にコードをWebコンテナにロードして実行
- プレビューリンクをiFrameとしてエディタに表示し、コードとUIのマッピングを処理
- AIチャットボットがコードへのアクセスと編集を支援し、コードを直接理解して修正可能
- JSX/TSX/HTMLなど宣言型DOMを使用するさまざまなフレームワークへ拡張可能
使用技術スタック
- フロントエンド: Next.js, TailwindCSS, tRPC
- データベース/ストレージ: Supabase, Drizzle
- AI: AI SDK, Anthropic, Morph Fast Apply, Relace
- サンドボックス/ホスティング: CodeSandboxSDK, Freestyle
- ランタイム/バンドラ: Bun, Docker
その他の情報
- Apache 2.0ライセンス
- Webアプリは近日公開予定、デスクトップアプリも別途提供
- 全ドキュメントおよび開発参加方法は公式ドキュメントを参照
2件のコメント
Onlook - オープンソースのWebflowを使ったカスタムアプリ制作ツール
1年くらい前にこんなタイトルで投稿されていましたが、やはりネーミングは重要ですね。OOO for XXX のほうが理解しやすいです。