onlook-dev/onlook

これは何？

主な機能

• 01ブラウザのライブプレビュー上で要素を直接編集し、変更をコードに反映する。
• 02要素を右クリックして、ソースコード内の該当箇所に移動する。
• 03AIチャットを使ってプロジェクトを作成・編集する。
• 04ビジュアルツールバーからTailwindのスタイルやレイアウトを調整する。
• 05チェックポイントを保存・復元し、共有可能なデプロイリンクを生成する。

ユースケース

• Next.jsとTailwindのプロジェクトで、ランディングページやマーケティングサイトをプロトタイピングする。
• デザイナーが加えた視覚的な調整を、レビュー可能な実際のコードとして反映する。
• 変更を確定する前に、AIを使ってレイアウトのバリエーションを検討する。

クイックスタート

1. 1

   onlook.com のホスト版アプリを使う

2. 2

   または、ドキュメントのローカル実行ガイドを読む

使う前に知っておきたいこと

• !Next.js と Tailwind CSS のプロジェクトのみ対応しています。その他のフレームワークにはまだ対応していません。
• !ホスト版プロダクトはウェイトリスト制の早期アクセスです。
• !ローカルでの実行方法は README ではなく、ドキュメントサイトに別途記載されています。

トピック

よくある質問

onlook とは？

AI支援を使い、ブラウザ上でNext.jsとTailwind CSSのコードをデザイン・編集できるオープンソースのビジュアルエディター。 Onlookは、Next.jsとTailwindCSSでWebサイトやインターフェースを構築するためのビジュアルコードエディターです。コードエディターだけで編集するのではなく、アプリのライブプレビュー上で要素を選択して変更でき、その内容は元のソースコードに反映されます。AIチャットを使ってプロジェクトを作成・変更することもできます。

onlook は無料で使えますか？ライセンスは？

onlook は Apache-2.0 ライセンスのオープンソースです。商用製品で使う前にライセンス条件を確認してください。

onlook は今もメンテナンスされていますか？

半年以内に更新あり。onlook の最終コミットは 2026年8月25日 です。

onlook は何に使えますか？

Next.jsとTailwindのプロジェクトで、ランディングページやマーケティングサイトをプロトタイピングする。 デザイナーが加えた視覚的な調整を、レビュー可能な実際のコードとして反映する。 変更を確定する前に、AIを使ってレイアウトのバリエーションを検討する。

onlook のインストール方法は？

onlook.com のホスト版アプリを使う または、ドキュメントのローカル実行ガイドを読む

onlook はどこで入手できますか？

ソースコードとインストール手順は GitHub にあります：https://github.com/onlook-dev/onlook