htmx

Hono と htmx を組み合わせて使います。

typed-htmx

typed-htmx を使うと、htmx 属性の TypeScript 型定義を利用して JSX を記述できます。 typed-htmx のサンプルプロジェクトと同じ方法で、hono/jsx と組み合わせて使えます。

パッケージをインストールします。

npm i -D typed-htmx

src/global.d.ts（HonoX を使っている場合は app/global.d.ts）で typed-htmx の型をインポートします。

import 'typed-htmx'

typed-htmx の型定義で Hono の JSX 型を拡張します。

// A demo of how to augment foreign types with htmx attributes.
// In this case, Hono sources its types from its own namespace, so we do the same
// and directly extend its namespace.
declare module 'hono/jsx' {
  namespace JSX {
    interface HTMLAttributes extends HtmxAttributes {}
  }
}

関連情報

• htmx
• typed-htmx