HTMX サンプルページ

HTMX は、HTML属性を使って AJAX、CSS トランジション、WebSocket などの機能を簡単に実装できるライブラリです。

1. ボタンクリックでコンテンツを読み込む

ボタンをクリックすると、HTMLフラグメントを取得して表示します。

<button hx-get="fragments/greeting.html" hx-target="#greeting-result">

2. インタラクティブカウンター

ボタンクリックでカウントを増減します（クライアントサイドで動作）。

0

3. クリックでコンテンツを切り替え

hx-swap-oob を使って要素を入れ替えます。

<button hx-get="fragments/toggle-on.html" hx-target="#toggle-content">

4. リアルタイム検索

入力するとリアルタイムで検索結果が表示されます。

<input hx-get="fragments/search.html" hx-trigger="keyup changed delay:300ms">

5. フォーム送信

フォームの送信を HTMX で処理します。

<form hx-post="fragments/form-result.html" hx-target="#form-result">


6. Todo リスト

タスクの追加・削除ができるTodoリストです。

HTMXを学ぶ
サンプルを作成する

7. データテーブル

テーブルデータを遅延読み込みします。

<tbody hx-get="fragments/table-data.html" hx-trigger="load">
ID 名前 ステータス
読み込み中...

8. 確認ダイアログ付きアクション

hx-confirm を使って確認ダイアログを表示します。

<button hx-delete="..." hx-confirm="本当に削除しますか？">