ハクソク

世界を動かす技術を、日本語で。

Show HN: Onlook – デザイナー向けオープンソースのビジュアルファーストカーソル

361日前原文(github.com)

概要

Onlook は、デザイナー向けの オープンソース・ビジュアル型コードエディタ。 Next.js と TailwindCSS を活用し、AIによるリアルタイム編集やデザインが可能。 ブラウザ上で 直接DOM編集、Figma風UI、即時プレビュー機能を提供。 Bolt.new や Webflow などの代替として注目。 現在Web版を開発中で、 コントリビューター募集中。

Onlookとは何か

  • デザイナー・開発者向け のオープンソース・ビジュアルコードエディタ
  • Next.js と TailwindCSS をベースにしたWebアプリケーション構築支援
  • AIアシスト によるプロトタイプ・ウェブサイト・デザイン制作
  • ブラウザ上での直接編集、FigmaのようなUI体験
  • Bolt.new、 Lovable、 V0、 Replit Agent、 Figma Make、 Webflow 等のオープンソース代替

主な機能

  • Next.jsアプリの即時作成
    • テキスト・画像からのスタート
    • プリセットテンプレート利用
    • Figmaからのインポート
    • GitHubリポジトリからの開始
  • ビジュアル編集機能
    • Figma風UI
    • リアルタイムプレビュー
    • ブランドアセット・トークン管理
    • レイヤー管理、コンポーネント検出、ページ作成・移動、画像管理
  • 開発ツール
    • リアルタイムコードエディタ
    • チェックポイント保存・復元
    • CLIコマンド実行
    • アプリマーケットプレイス連携
    • ローカルコード編集
    • ワンクリックデプロイ
    • 共有リンク生成、カスタムドメイン連携
  • チームコラボレーション
    • リアルタイム編集
    • コメント機能

Web版への移行理由と学び

  • ElectronからWeb版への全面移行
    • ダウンロードやセットアップ不要な体験重視
    • React UIコードの再利用は可能だが、 状態管理の移行 は困難
    • ローカルJSONデータ から リモートDB管理 への大規模リファクタリング
    • ブラウザの iframe制約 対応のため、コード注入・クロスiframe通信の工夫
    • APIキー管理 のセキュリティ強化（Webはサーバー管理が容易）
    • Electron特有の リリース・アップデートの課題 解消

Onlook for Webの仕組み

  • リモートサンドボックス （現状CodeSandbox）と接続
  • iframe経由でビジュアル編集、HTML要素とコードのマッピング
  • 編集時に iframe・コード双方へ即時反映、インスタントな操作感
  • AIチャット によるコード理解・編集支援
  • Next.js・TailwindCSS に最適化、今後他フレームワーク対応も視野

できること（現状）

  • 要素選択・プロンプト変更
  • TailwindCSSクラスのUI編集
  • 新規divや要素のドラッグ＆ドロー
  • 複数画面サイズでのプレビュー
  • ブラウザIDEによるコード編集

今後の展望

  • レイヤー管理・フォント・ホスティング・Git連携 等のデスクトップ版機能移植
  • 認証・データベース・API呼び出し 等のバックエンド機能追加予定

開発・参加方法

  • GitHubリポジトリ からクローン・ローカル実行可能

  • コントリビューター 70名以上参加、引き続き協力者募集中

  • Discord でのコミュニティ・コラボレーション

  • Apache 2.0ライセンス で配布

    • プロジェクト: https://github.com/onlook-dev/onlook
    • ウェブサイト: https://onlook.com
    • 無料体験版: https://beta.onlook.com
    • ドキュメント: https://docs.onlook.com

まとめ

  • Onlook は、デザインと開発の垣根をなくす 新世代のビジュアルエディタ
  • AI活用・リアルタイム編集・Web完結型 で、誰でも簡単にアプリ構築体験
  • 今後の機能拡張・コントリビューターの参加 により、さらなる進化が期待

Hackerたちの意見

すごいね！ウェブ版の理由としてダウンロードの摩擦を減らすって言ってたけど、ユーザーにとってそれがどんな摩擦になってたの？

└

ウェブサイトでダウンロードをクリックした人と、実際にアプリにサインインした人の間で、約40%の大きな落ち込みがあったんだ。これはアプリのバンドルサイズ（500MB以上で、ランタイムバイナリを含んでるから）も関係してるけど、サポートしてないプラットフォーム（しばらくの間Linuxとか）にいる場合も影響してるね。

ウェブ版は摩擦を取り除いて、価値をすぐに感じられるようにするための自然な次のステップって感じだね。投稿作成を視覚的に編集できるのもいいね。ほとんどの人がここでプロジェクトを始めると思う？それとも既存のプロジェクトを持ち込んで編集する感じ？GitHubのアプリや統合で、サポートされてるリポジトリを直接Onlookで開けるようにするのもいいかもね。

└

うん、インポートはロードマップに入ってるよ。デスクトップアプリではすでにインポートをサポートしてるから、サンドボックスにコードを入れる方法を考えないとね。僕の計画はこうだよ：1. GitHubからインポート - クローンして、ベストエフォートでセットアップ 2. ローカルリポジトリでnpxアップロードスクリプトを実行 3. アップロードUIを通じてバンドルを直接ドロップ

こんにちはHN！僕はダニエル、Onlookのもう一人のメンバーだよ。この新しいOnlookのバージョンにすごくワクワクしてる理由は二つあって、1) デザインを始めるのがめっちゃ楽になること、2) スタイルのための直感的でシンプルなツールバーコントロールがあって、デザインがさらに簡単になること。これがOnlookの3回目のメジャーバージョンで、毎回デザインと開発のギャップを埋めるための大きな一歩を感じてる。最初の製品はChrome拡張で、次はダウンロード可能なデスクトップアプリ（Onlook Studio）、そして今はウェブ版のOnlookをリリースしてる。デザイナーや技術的でない人たちがエンジニアの同僚とアイデアを共有するための方法が必要な場合、このウェブ版のベータは素晴らしいスタートだよ。でも、僕たちの目標は本当にそのギャップを解決することだから、アイデアから実際のコードベースへの実装を可能にする素晴らしい機能をたくさん追加するつもりだよ。いくつかの既知のバグ：– 時々、生成物が読み込まれた後に「適用」されないことがある：Kietが修正に取り組んでるけど、空のテンプレートをクリックして変更を再プロンプトしてみて。– AIチャットの読み込みに時間がかかることがある：これをもっと速くするために取り組んでる（少なくとももう少し面白くするつもり）。– 時々、チャットに何も表示されないことがある：ホームページに戻って再プロンプトしてみて。これをもっとスムーズにしたい。– 時々、スタイルが適用されないことがある：教えてね！エッジケースをキャッチしようとしてるから。早期プレビューを進める中での皆さんの助けと忍耐に感謝します。Discordにも参加してね [https://discord.gg/ZZzadNQtns]。バグや問題はGitHubリポジトリに報告してね：https://github.com/onlook-dev/onlook

これすごいね！BoltやLovableみたいな他のビジュアルAI開発ツールも試したけど、彼らの取っているクローズドなアプローチは、僕が個人的にやりたいことに関してちょっと制限がある気がする。デザイン出身だけど、CursorやWindsurfを積極的に使ってる僕としては、Webflowのようにクリックして編集して、リアルタイムで更新されるのを見られる能力がすごく恋しい。コードに入ってもっと複雑なことをすることもできるって知ってるからね。君たちはこの交差点をうまく捉えたみたいだね。基本的にコードの上にビジュアルレイヤーを持っていて、ブラウザ内のコードエディタも含まれてる（最終的にはサンドボックスへのターミナルアクセスもあると思うけど？）っていうのは、正しい方向への大きな一歩で、デザインと開発の間のギャップを本当にカバーできる気がする。これは注目してるし、既存のプロジェクトのインポートが可能になったら、絶対に参加するよ。ローンチおめでとう！

└

ありがとう！これに対する適切なバランスを見つけるのは大変だったよ。一方では、コードを知っている人にとっては、コードベースを簡単にナビゲートできる方法を提供したいし、もう一方では、コーディングしたことがない人が本当に好きなものを作れるように手助けしたい。ビジュアルレイヤーは完璧なデザインツール体験になるためにはまだ磨くべきところがたくさんあるけど、少しずつ進んでる。ほとんどのデザイナーは、フレックスボックスのような従来のウェブ「構造」に制限されるのが好きじゃないけど、それが物事を構築して適切にスケールさせる方法でもある。AIはフレックスボックススタイルのウェブサイトを生成するのが得意だけど、デザイナーがAI生成のウェブサイトに飛び込むと、他の誰かが設計した複雑なプロジェクトを引き受けるような感じになる。ウェブサイトの仕組みが分かっていればそれほど怖くないけど、分からなければすごく圧倒されることもある。レイヤーやスタイルをアプリの左右にすぐに表示しないことにした主な理由の一つは、デザインツールに飛び込んだことがない人たちがUIに圧倒されていると感じたから。これらのツールを「セカンダリー」インタラクションレイヤーに移動させることで、インターフェースがすっきりしたけど、プロユーザーが見つけやすくなった。プロジェクトをインポートできるようになったときに、コードベースのためのビジュアルエディターから期待できるすべてのツールが揃っているように、このエディター体験をさらに洗練させていくのが楽しみだよ。

└

ありがとう！Cursor/WindsurfをSSH経由で使えるようにするのを早く復活させたいと思ってる。下のバーの右側にターミナルアクセスがあるよ。今は1つのCLI接続とロングランサーバーがあるけど、そこからコマンドを実行したりAIを通じて実行したりできる。今、PRをマージしたところで、数分後にはライブになるはずだよ。 https://github.com/onlook-dev/onlook/pull/1963

SvelteをサポートするためのAPIの進捗はどう？ https://github.com/onlook-dev/onlook/issues/625

└

こんにちはesafak、正直言って、より良い体験を提供するためにNext.jsにさらに依存するようになったよ。Svelteは、体験が最高になるまで優先度が下がり続けると思う。悪い答えだとは思うけど、現時点で可能性が低そうな機能を約束し続けたくないんだ。この問題は今のところ「修正しない」に更新するつもりだよ。

うまくいかないみたい。右の矢印ボタンでローディングスピナーが一瞬表示されて、その後矢印に戻って何も起こらない。

└

適用モデルにいくつか問題があると思うよ。Kietがその解決策に取り組んでる。とりあえず、もう一度Onlookに聞いてみてくれる？不便なのは分かってる。ページに何も読み込まれないなら、ページのテキストをクリックして、チャットからウェブサイトやプロンプトしたものの一部を作成するように頼んでみて。時々、レンダリングされるコードがたくさんあって適用されないことがあるから、出力の長さを手動で短くするのが役立つかも。これは絶対に修正が必要だね。

└

制限が引き上げられたよ – もう一度試してみて、うまくいくか教えてね！

Githubアカウントでログインしたけど（ここでのユーザー名と同じ）、プロンプトに対して何も起こらない: >3DでGコードを作成、編集、プレビューするためのサイトを作成する。 それと、https://www.blockscad3d.com/editor/のスクリーングラブ。

└

あー、それは残念だね。レンダリングされたコードが適用されない問題があるみたい。もう一度試してみてくれる？それか、ページをクリックして、プロンプトと一緒にスクリーンショットをチャットに追加してみて。正直、Onlookで3Dをやるのはちょっと難しいかもしれないけど、うまくいくか見てみたいな。普通のブラウザと同じように動くけど、ああいう3Dサイトを設定するのはOnlookにはちょっと高度すぎるかも。

すごくクールだね、そしてUnicorn Studioも教えてくれてありがとう！ https://www.unicorn.studio/

└

超ヤバい製品だね！

発売おめでとう！核心的な問題に取り組んでると思うよ。多くの人がv0に行って、そのままコピー＆ペーストしちゃうからね。ドラッグ＆ドロップは本当に素晴らしい！ところで、なんでTauriじゃなくてElectronを選んだの？バンドルサイズがかなり小さくなったと思うんだけど。改めておめでとう！

└

Tauriも考えたけど、ユーザーウィンドウ内の「フレーム」がOS間で一貫して動作する必要があったからElectronにしたんだ。Tauriはそれを保証してくれないから、ChromiumのElectronを選んだんだよね。振り返ってみると、他のデスクトップアプリの問題、例えばセットアップの手間にはあまり役立たなかったと思うし、正しい判断だったと思う。バンドルの大部分は、NodeがインストールされていないユーザーのためにBunをフォールバックランタイムとして含めているからなんだ。これももっと良くできたかもしれないけど、それでも300MB以上のバンドルサイズになっちゃうね。

一度試してみたけど、結果にはあんまり満足できなかったな。正直、Sonnet 4からデザインの質が大きく向上することを期待してたんだけど。

└

退屈すぎたの？それとも結果に何が不満だったの？Sonnet 4はもっと信頼性の高い出力を出してるけど、本当にクリエイティブにするのはいつも難しいよね。もっとクリエイティブな出力を促す方法があると思うけど、確実に実験を続けていく必要があるね。