JavaScript、Python、Javaなど、幅広いサーバーサイド言語やプラットフォームとの統合例を示すGitHubリポジトリのリスト。
以下は、最小限のHTMLとスタイルでhtmxに実装された一連のUXパターンです。
それらをコピーしてペーストし、必要に応じて調整できます。
| パターン | 説明 |
|---|---|
| クリックして編集 | データオブジェクトのインライン編集を示します |
| 一括更新 | 複数のデータ行の一括更新を示します |
| クリックして読み込み | クリックしてテーブルの行をさらに読み込むことを示します |
| 行を削除する | テーブルの行の削除を示します |
| 行を編集する | テーブルの行の編集方法を示します |
| 遅延読み込み | コンテンツを遅延読み込みする方法を示します |
| インライン検証 | インラインフィールド検証を実行する方法を示します |
| 無限スクロール | ページの無限スクロールを示します |
| アクティブ検索 | アクティブ検索ボックスのパターンを示します |
| プログレスバー | ジョブランナーのようなプログレスバーを示します |
| 値の選択 | あるセレクトの値を別のセレクトに依存させる方法を示します |
| アニメーション | さまざまなアニメーション手法を示します |
| ファイルのアップロード | プログレスバーを使用してajax経由でファイルをアップロードする方法を示します |
| フォームエラー後のファイル入力の保持 | フォームエラー後にファイル入力を保持する方法を示します |
| ダイアログ - ブラウザ | プロンプトと確認ダイアログを示します |
| ダイアログ - UIKit | UIKitを使用してモーダルダイアログを示します |
| ダイアログ - Bootstrap | Bootstrapを使用してモーダルダイアログを示します |
| ダイアログ - カスタム | モジュールダイアログをゼロから示します |
| タブ（HATEOASの使用） | HATEOASの原則を使用してタブを表示して選択する方法を示します |
| タブ（JavaScriptの使用） | JavaScriptを使用してタブを表示して選択する方法を示します |
| キーボードショートカット | htmxが有効になっている要素にキーボードショートカットを作成する方法を示します |
| ドラッグ＆ドロップ/ソート可能 | Drag-and-Dropの並べ替えを実装するために、Sortabl.jsプラグインとhtmxを併用する方法を示します |
| 他のコンテンツの更新 | ターゲット要素だけでなく、コンテンツを更新する方法を示します |
| 確認 | htmxを使用してカスタム確認ダイアログを実装する方法を示します |
| 非同期認証 | htmxで非同期認証トークンを処理する方法を示します |
| Webコンポーネント | htmxをWebコンポーネントとシャドウDOMに統合する方法を示します |
| （実験的）moveBefore()搭載のhx-preserve | 存在する場合、htmxは要素を移動するための実験的moveBefore()APIを使用します。 |
一般的なプラクティスについては、Hotwire / Turbo to htmx移行ガイドを参照してください。