本物の HTML が、そのまま動く
メールアドレスは共有されません。
Active
Hypermedia Components
セマンティックな HTML コンポーネントと htmx レシピ — markup がそのままワイヤ契約。ビルド不要で、サーバ言語は問いません。
Badge
- Chip
68 コンポーネント · 53 レシピ(すべてライブデモ付き)· 5 ページテンプレート · ランタイム依存 0 · MIT
button、dialog、popover といった
ネイティブ要素が第一の構成部品です。
Shadow DOM なし。htmx 属性・フォーム挙動・プログレッシブ エンハンスメントが期待どおりに機能します。
テーマ・密度・コンポーネント値はトークンファイルから CSS カスタム プロパティとして出力されます。
確認アクション・ライブ検索・リモートダイアログ・フィルタポップオーバー — いずれもサーバ契約をドキュメント化しています。
markup がそのまま契約
Section titled “markup がそのまま契約”書いたものがそのまま出荷物です — ネイティブ要素にセマンティックな クラス、状態は属性、ラッパーランタイムなし。下の Code タブの中身が、 サーバ(テンプレートエンジンやコードジェネレーター)が出力する ワイヤ形式そのものです:
We never share it.
Draft
<div class="hc-field"> <label class="hc-field__label" for="email">Email</label> <input class="hc-input" id="email" name="email" type="email"> <p class="hc-field__hint">We never share it.</p></div>
<button class="hc-button" data-variant="primary" type="button">Save</button><button class="hc-button" type="button">Cancel</button><span class="hc-badge" data-variant="info">Draft</span>テーマも同じマークアップに乗ります — ヘッダーのカラー / 密度 / ダーク切替を試すと、このページ全体が追従します。
ワイヤを流れるのは HTML
Section titled “ワイヤを流れるのは HTML”サーバはフラグメントで応答し、htmx がスワップし、コンポーネントは そのまま動きます — JSON もクライアント状態もありません。下に入力して みてください: デバウンスされたリクエストがこのサイトの デモ API に届き、結果のフラグメントがスワップされて返ってきます。
53 のレシピはすべて この方式で動きます — 各ページがサーバ契約をドキュメント化し、この サイトの Worker 上でライブ実行されます。 ページテンプレートは それらをフルスクリーンに合成したものです。