Honoアプリ
スライドを。

MDXをHono JSXへコンパイルし、閲覧・発表・発表者・印刷の各画面を既存のHonoアプリに追加します。

ライブデモGET /demo/product/embed

MDXから生成したデッキを、このページと同じHonoXアプリに組み込んでいます。スライドの左右をクリックするか、矢印キーで操作できます。

別ページで開く

コンパイル後にルーターを登録する

Node.jsが必要なのはコンパイル時だけです。生成したルーターはapp.route(decks.mountPath, decks.router())で登録します。ViteまたはWranglerのdevコマンドを使えば、デッキの変更も自動で反映されます。

npm・pnpm・Yarn・Bunの導入手順
Terminal
npm install hono-decks
npx hono-decks init
npx hono-decks compile

作成されるルート

標準では、外部埋め込みを除くすべての画面が作成されます。使わないルートは設定で無効にし、必要な認証はHonoアプリ側で追加します。

ルート / API役割
/:slugiframeを使ったビューアーと操作ボタン
/:slug/renderiframe内に表示するスライド
/:slug/presentation発表用の全画面表示
/:slug/presenter次のスライドと発表者ノート
/:slug/print印刷・PDF出力用の画面