デザイナー向け Cursor - オープンソースのビジュアルファーストコードエディタ

Next.js + TailwindCSS で AI を活用してウェブサイト、プロトタイプ、デザインを作成。ブラウザの DOM 上で直接編集可能なビジュアルエディタ。コードとリアルタイムでデザイン。Bolt.new、Lovable、V0、Replit Agent、Figma Make、Webflow などのオープンソース代替ツール。

🚧 🚧 🚧 Onlook for Web は現在開発中 🚧 🚧 🚧

私たちは Onlook for Web を素晴らしいプロンプト・トゥ・ビルド体験にするため、積極的にコントリビューターを募集しています。未解決の課題で提案機能や既知の問題の一覧を確認し、Discord で数百人のビルダーと協力してください。

Onlook でできること:

• Next.jsアプリを数秒で作成
  • テキストまたは画像から開始
  • 事前構築済みテンプレートを使用
  • Figmaからインポート
  • GitHubリポジトリから開始
• アプリを視覚的に編集
  • Figma風UIを使用
  • リアルタイムでアプリをプレビュー
  • ブランドアセットとトークンを管理
  • ページの作成とナビゲーション
  • レイヤーを閲覧 - 以前はOnlook Desktopで提供
  • コンポーネントを検出して使用 - 以前はOnlook Desktopで提供
  • プロジェクト画像を管理 - 以前はOnlook Desktopで提供
• 開発ツール
  • リアルタイムコードエディタ
  • チェックポイントから保存/復元
  • CLI経由でコマンドを実行
  • アプリマーケットプレイスと接続
  • ローカルでコードを編集 - 以前はOnlook Desktopで提供
• アプリを数秒でデプロイ
  • 共有可能なリンクを生成
  • カスタムドメインをリンク
• チームと共同作業
  • リアルタイム編集
  • コメントを残す

Onlook for Desktop (別名 Onlook Alpha)

Onlook Webは現在早期プレビュー段階です。ダウンロード可能なデスクトップ版Electronアプリをお探しの場合は、Onlook Desktopに移動しました。

Web移行の理由についてはこちらをご覧ください: ElectronからWebへの移行

はじめに

近日公開予定：ホスト版アプリまたはローカル実行

使用方法

OnlookはNext.js + TailwindCSSプロジェクト上で動作します。既存プロジェクトをOnlookにインポートするか、エディタ内で新規作成できます。

AIチャットを使用してプロジェクトの作成や編集が可能です。いつでも要素を右クリックすると、該当コードの正確な位置を開くことができます。

新しいdivを描画し、ドラッグ＆ドロップで親コンテナ内で再配置できます。

サイトデザインとコードを並べてプレビュー

Onlookのエディターツールバーを使用して、Tailwindスタイルを調整し、オブジェクトを直接操作し、レイアウトを試行錯誤できます。

ドキュメント

完全なドキュメントについては、docs.onlook.comをご覧ください。

貢献方法については、ドキュメントのContributing to Onlookを参照してください。

動作原理

1. アプリを作成すると、コードをWebコンテナにロードします
2. コンテナが実行され、コードが提供されます
3. エディターがプレビューリンクを受け取り、iFrameに表示します
4. エディターがコンテナからコードを読み取り、インデックス化します
5. 要素をコード内の位置にマッピングするため、コードを計装します
6. 要素が編集されると、iFrame内の要素を編集し、その後コードを編集します
7. AIチャットもコードにアクセスし、コードを理解・編集するツールを備えています

このアーキテクチャは理論上、宣言的にDOM要素を表示するあらゆる言語やフレームワーク（例：jsx/tsx/html）に拡張可能です。現在はNext.jsとTailwindCSSとの連携に注力しています。

詳細な解説については、Architecture Docsをご覧ください。

技術スタック

フロントエンド

• Next.js - フルスタック
• TailwindCSS - スタイリング
• tRPC - サーバーインターフェース

データベース

• Supabase - 認証、データベース、ストレージ
• Drizzle - ORM

AI

• AI SDK - LLMクライアント
• Anthropic - LLMモデルプロバイダー
• Morph Fast Apply - 高速適用モデルプロバイダー
• Relace - 高速適用モデルプロバイダー

サンドボックスとホスティング

• CodeSandboxSDK - 開発サンドボックス
• Freestyle - ホスティング

ランタイム

• Bun - モノレポ、ランタイム、バンドラー
• Docker - コンテナ管理

貢献

このプロジェクトを改善する提案がある場合は、リポジトリをフォークしてプルリクエストを作成してください。また、issueを開くことも可能です。

詳細な手順と行動規範については CONTRIBUTING.md をご覧ください。

コントリビューター

連絡先

• チーム: Discord - Twitter - LinkedIn - Email
• プロジェクト: https://github.com/onlook-dev/onlook
• ウェブサイト: https://onlook.com

ライセンス

Apache 2.0ライセンスの下で配布されています。詳細は LICENSE.md をご確認ください。