概要

GPUI Componentは、Rust製のデスクトップアプリ向けUIコンポーネント集。 macOS・Windows風のモダンなデザインと高いカスタマイズ性を両立。 Markdownやコードエディタ、チャートなど多機能を搭載。 高パフォーマンスなバーチャライズドテーブル・リストに対応。 開発中であり、導入はGit依存・ドキュメントも簡易的なもの。

GPUI Componentの特徴

• 60種類以上 のクロスプラットフォーム対応UIコンポーネント
• macOS/Windows風の操作感 と shadcn/ui デザインの融合
• Stateless RenderOnce 形式で、シンプルかつ直感的な利用性
• Theme/ThemeColor による多彩なテーマ・変数ベース設定
• xs/sm/md/lg の柔軟なサイズ指定
• Dockレイアウト によるパネル配置、リサイズ、自由なTilesレイアウト
• バーチャライズドテーブル・リスト で大規模データも滑らか表示
• Markdownと簡易HTML のネイティブ描画
• 内蔵チャート でデータ可視化
• LSP対応・20万行対応のコードエディタ 搭載
• Tree Sitter によるエディタ・Markdownのシンタックスハイライト

Showcaseとマルチテーマ

• Longbridge Pro がGPUI Componentで構築された初のアプリケーション事例
• アプリ側で 独自のマルチテーマ 実装が可能（GPUI Component標準機能ではないが、Theme機能ベースで容易に実装可能）

導入方法

• 開発中のため、依存追加はGit指定

  • gpui = "0.2.2"
  • gpui-component = "0.3.0"

• 基本的な利用例（HelloWorld表示＋ボタン配置）

  • Window/Context/Root の組み合わせで構築
  • gpui_component::init(cx)呼び出しが必須

  use gpui::*;
  use gpui_component::{button::*, *};
  pub struct HelloWorld;
  impl Render for HelloWorld {
      fn render(&mut self, _: &mut Window, _: &mut Context<Self>) -> impl IntoElement {
          div().v_flex().gap_2().size_full().items_center().justify_center()
              .child("Hello, World!")
              .child(
                  Button::new("ok")
                      .primary()
                      .label("Let's Go!")
                      .on_click(|_, _, _| println!("Clicked!")),
              )
      }
  }
  fn main() {
      let app = Application::new();
      app.run(move |cx| {
          gpui_component::init(cx);
          cx.spawn(async move |cx| {
              cx.open_window(WindowOptions::default(), |window, cx| {
                  let view = cx.new(|_| HelloWorld);
                  cx.new(|cx| Root::new(view.into(), window, cx))
              })?;
              Ok::<_, anyhow::Error>(())
          }).detach();
      });
  }
  

WebView機能

• WryベースのWebView要素 をオプションで利用可能
  • まだ初期実装段階、制限多数
  • gpui-component = { version = "0.3.0", features = ["webview"] }
  • wry = { version = "0.53.3", package = "lb-wry" }

アイコン利用

• Icon要素 はSVGファイルを標準搭載していない
  • 例ではLucideアイコンを使用
  • 独自SVGをIconNameに従い命名しプロジェクトに追加可能

開発とサンプル

• アプリギャラリー・examplesディレクトリ で多数サンプル公開
• cargo runやcargo run --example <example_name>で実行可能
• 詳細は CONTRIBUTING.md 参照

他ライブラリとの比較

| 機能 | GPUI Component | Iced | egui | QT 6 | |---------------------|---------------|-----------|--------------|-----------| | 言語 | Rust | Rust | Rust | C++/QML | | レンダラー | GPUI | wgpu | wgpu | QT | | ライセンス | Apache 2.0 | MIT | MIT/Apache2.0| 商用 | | 最小バイナリサイズ | 12MB | 11MB | 5MB | 20MB | | クロスプラットフォーム | Yes | Yes | Yes | Yes | | ドキュメント | No | Simple | Simple | Good | | Web対応 | No | Yes | Yes | Yes | | UIスタイル | Modern | Basic | Basic | Basic | | CJKサポート | Yes | Yes | Bad | Yes | | チャート | Yes | No | No | Yes | | テーブル（大規模） | Yes | No | Yes | Yes | | テーブル列リサイズ | Yes | No | Yes | Yes | | テキスト基盤 | Rope COSMIC | Text 3 trait | TextBuffer | QTextDocument | | コードエディタ | Simple | Simple | Simple | Basic API | | Dockレイアウト | Yes | Yes | Yes | Yes | | シンタックスハイライト | Tree Sitter | Syntect | Syntect | QSyntaxHighlighter | | Markdown描画 | Yes | Yes | Basic | No | | Markdown+HTML混在 | Yes | No | No | No | | HTML描画 | Basic | No | No | Basic | | テキスト選択 | TextView | No | Any Label | No | | テーマ | Yes | No | No | No | | I18n | Yes | Yes | Yes | Yes |

ライセンスとクレジット

• Apache-2.0ライセンス
• UIデザインは shadcn/ui、アイコンは Lucide より

注意事項・フィードバック

• 誤りや古い情報 があればIssueまたはPRで報告推奨
• 詳細なリリース情報・バイナリサイズ削減方法などは脚注参照