開発者ツール

HTMX チートシート — 属性とトリガー

よく使う HTMX の属性、トリガー、スワップ戦略をキーワード検索で参照し、表示中のスニペットをコピーし、Markdown でエクスポートできます。本格的なドキュメントを読まずに hx-* を手早く調べる際に役立ちます。

クイック切替→Mermaid ダイアグラム生成

HTMXチートシートフロントエンド

クイック切替:Mermaid ダイアグラム生成 HTMLエンティティチートシート Tailwindカラーチートシート

このツールをお気に入りに

お気に入りの保存方法がまだ選ばれていません。

クイック操作

開発者ツールに戻るすべてのツールを見る

このツールの URL をコピーするか、対応端末ではシステムの共有シートを開けます。

利用シーン

hx-get と hx-post のリクエスト属性の構文を確認する
hx-trigger の遅延やインジケーターのパターンを調べる
よく使う属性を Markdown のノートとしてエクスポートする

使い方

パネルを閲覧するかキーワードで検索する
属性の説明とサンプルスニペットを確認する
表示中の項目をコピーするか Markdown をエクスポートする

入出力サンプル

検索

hx-trigger

マッチ

hx-trigger="keyup changed delay:500ms"

FAQ

これはインタラクティブなデモですか、それともリファレンスですか?

主にコピーとエクスポートができる検索可能な属性リファレンスです。公式ドキュメントや実際の API テストの代わりにはなりません。

エクスポートの対象は何ですか?

現在表示中の属性項目をノートや README 用の Markdown として整形します。

ツール

関連ツール

近い用途の翻訳済みツールへ続けて進めます。

HTMLエンティティチートシート

HTMLエンティティチートシート - 名前付きと数値コード

利用可能

空白、通貨、数式、組版記号でよく使う HTML entity と numeric character reference を確認できます。名前付き形式と数値形式をコピーし、安全な source markup に使えます。

HTML Entity Encoding

ツールを開く

Tailwindカラーチートシート

Tailwindカラーチートシート - フルスケール配色ボード

利用可能

Tailwind CSS の配色スケール（50〜950 を含む）を 1 画面で確認できます。名前、スケール、HEX で検索し、utility class 名や生の HEX 値を CSS プロジェクト向けにコピーできます。

Design Tailwind CSS

ツールを開く

Mermaid ダイアグラム生成

Mermaid Diagram Generator — テンプレートと構文

利用可能

フローチャート、シーケンス、ガント、クラス、状態図のテンプレートを選んで編集し、ブラウザ内で Markdown ドキュメント向けの Mermaid 構文を出力、または .mmd ファイルとしてエクスポートできます。README や技術図に役立ちます。

Mermaid 図 Markdown

ツールを開く