Kadal Deck

Kadal Deck

トークを MDX で書き、ブラウザーで発表できます。参加者はスマートフォンから進行を追い、投票し、質問できます。

_{ツアーはエンジン自体の機能を紹介するデッキです。すべて MDX で書かれた100枚以上のスライドで構成されています。開いて ? を押してください。}

始める · ドキュメント · ライブツアー · テーマ · ホスティング · 変更履歴

---

30秒で始める

Node 20.19 以降が必要です。

npm create @kadal/deck@latest my-talk
cd my-talk && npm install
npm run dev        # http://localhost:5173: edit deck.mdx and the slide you're on updates in place

デッキは1つの deck.mdx ファイルです。Markdown を --- でスライドに分割し、必要に応じてコンポーネントを使います。

---
title: Hello, room
theme: ocean
---

# Hello, room

---

## One point at a time

<Clicks>

- Slides split at `---`; a slide below this one starts at `----`
- Code steps line by line, and the notes follow your clicks

</Clicks>

---

<Poll id="lunch" question="Lunch?" options={["Dosa", "Biryani", "Both"]} />

準備ができたら：

npx kadal-deck build      # dist/: a static site for any host, works offline
npx kadal-deck export     # PDF in export/ (add --png or --pptx)
npx kadal-deck publish    # a URL on deck.kadal.cc with a live room (free plan)

すでに Slidev のデッキがある場合は、npx kadal-deck import slidev slides.md で変換できます。引き継げなかった項目のレポートも出力されます。

得られるもの

執筆 (ドキュメント)	MDXスライド、名前付きスロットを備えた19種類のレイアウト、スライドごとのフロントマター、src:インクルード、コンパイラーが初出時にリンクする用語集の用語
クリックとモーション (ドキュメント)	<Click>、<Clicks>、at="+2"、クリックに合わせて表示されるノート、7種類のトランジション（必要に応じて開始時と終了時で別のものを選べます）、オートアニメート、<Motion>
コード (ドキュメント)	Shikiによる1行ずつの段階的なハイライト、マジックムーブ、Monacoエディター、実行可能なJS/TS/Python、TwoSlashのホバー表示、コードグループ、スニペットのインポート
数式、図、スケッチ (ドキュメント)	ビルド時のKaTeX、デッキの色を使ったMermaid、領域ごとに表示されるExcalidrawの図
外観 (ドキュメント)	ライトとダークの16種類のテーマ、42種類の背景（ほとんどがアニメーション付き）、Iconifyによる20万個のアイコン、Tailwind
あらゆるフレームワーク (ドキュメント)	ReactとWebコンポーネントを標準搭載。Vue、Svelte、Solid、Preact、Qwik、Angular、Fresh、Rust/WebAssembly、Pythonはアイランドとして利用でき、それぞれスライドが表示されたときにのみ読み込まれます
プレゼンテーション (ドキュメント)	ノート、タイマー、次のスライドを備えた発表者ビュー、描画、レーザー、スポットライト、ブラックアウト、カメラ、録画、ビデオ通話用の共有ウィンドウ、スマートフォンのリモコン、Vimキー
ライブ会場 (ドキュメント)	聴衆はスマートフォンから参加できます。リアクション、高評価機能付きの質問、投票、ワードクラウド、時間制限付きクイズ、ペースダイヤル、挙手機能を利用できます
エクスポート (ドキュメント)	クリックの各ステップを含めるかどうかを選べるPDF、PNG、PPTX、オフラインで動作する静的ビルド

発表者ビューと聴衆のスマートフォン

クリックごとにハイライトされるノート、次のステップ、ペース調整機能付きタイマー、すべてのツールが1つの画面に揃っています。どのデッキでもSを押してください。	QRコードをスキャンするだけです。アプリもアカウントも必要ありません。スライドは発表者に合わせて進み、先に進んだ場合も後から追いつきます。

## テーマ

16 種類のテーマがあり、適しているものにはライトとダークのバリエーションがあります。3 種類は組み込みで、残りはインストールしてフロントマターで名前を指定するパッケージです（theme: ocean）。すべてのテーマは deck.kadal.cc/themesでご覧いただけます。

minimal · 組み込み	rla · 組み込み	stack · 組み込み	ocean
brand	crayon	folio	lecture
neon	swiss	terminal	classic
seriph	crisp	bricks	shibainu

classic、seriph、crisp、bricks、shibainu は、公式 Slidev テーマを移植したもので、MIT ライセンスのもと提供されています。各パッケージには作者へのクレジットが記載されています。npm create @kadal/deck@latest -- --theme <name> で独自のテーマを作成できます。仕様についてはTHEMES.mdをご覧ください。

AI エージェント向け

Kadal Deck は、あなた自身だけでなくエージェントも作成できるように設計されています。フォーマットを教えるスキル、スライドを一行ずつ編集してレンダリングし、作業結果を確認できる MCP サーバー、そしてすべてのコマンドが JSON で応答する CLI が用意されています。ガイド：AI エージェント。

/plugin marketplace add kadalcc/deck          # Claude Code: the skill and the MCP server together
/plugin install kadal-deck@kadal-deck

npx skills add kadalcc/deck                              # the skill alone, for any agent (skills/kadal-deck)
claude mcp add kadal-deck -- npx -y @kadal/deck mcp      # the MCP server alone

Claude Desktop、Cursor、VS Code では、クライアントの接続先に npx -y @kadal/deck mcp を指定してください。サーバーは起動したフォルダー内（または --dir <path> で指定した場所）で動作し、--allow-outside を指定しない限り、その外部を読み書きすることはありません。

MCP ツール
deck_reference, deck_frontmatter_schema	エンジン独自のカタログにあるすべてのコンポーネント、レイアウト、背景、オプション
deck_create, deck_outline, deck_read_slide, deck_check	ひな形の作成、デッキの構造としての読み取り、リント
slide_add, slide_update, slide_remove, slide_move, deck_update_frontmatter, notes_set	該当スライドの行だけを変更する編集。その場でリントします
slide_render, deck_preview	呼び出し間も起動し続ける開発サーバーからのスライドの PNG とライブ URL
deck_build, deck_export, deck_publish	静的サイト、PDF／PNG／PPTX、公開済みデッキ

スクリプトでは、kadal-deck check（エラー時は終了コード 1）、kadal-deck screenshot、kadal-deck info [topic] を使用でき、すべてのコマンドで --json を指定できます。終了コードは、0 が成功、1 が失敗、2 が使用方法の誤り、3 が未サインイン、4 が前提条件の不足です。@kadal/deck/catalog にはデッキで使えるすべてのデータがあり、@kadal/deck/authoring はデッキをテキストとして読み取り、リント、編集します。@kadal/deck/schema/frontmatter.json は frontmatter の JSON Schema です。

エディターで使う

• VS Code 拡張機能（Marketplace）： カーソルに追従するライブプレビュー、ドラッグして並べ替えられるスライド一覧、あらゆる設定とコンポーネントの IntelliSense、デッキのチェック結果の問題表示、フォーマット機能を備えています。
• @kadal/prettier-plugin：Prettier を実行できる任意のエディターで使える、デッキファイル用の Prettier プラグインです。kadal-deck format を使えば、設定なしで同じフォーマッターを実行できます。
• ブラウザーで使う場合：kadal-deck dev で、表示中のスライドのサイドエディターを開くには E を押します。

仕組み

各スライドは独立したモジュールなので、編集時に再レンダリングされるのはデッキ全体ではなく、そのスライドだけです。図はExcalidraw ファイルで、スライドの <Sketch> と同じスケッチ DSL を使って描かれています。

ホスト型またはセルフホスト

作成、プレゼン、プレゼンタービュー、エクスポート、静的ビルドにはこのエンジンだけで十分で、無料のまま利用できます。ライブルームには、デッキごとに WebSocket を保持するサーバーが必要です。

• deck.kadal.cc：npx kadal-deck publish を実行すると、デッキに URL、ライブルーム、分析機能、パスコード、バージョン履歴、チーム機能が追加されます。また、ウェブ上で素早く編集でき、変更内容は kadal-deck pull によってスライドごとにファイルへマージされます。無料プランがあり、有料プランがエンジンを支えています。
• 独自のホスト：kadal-deck build の出力は、あらゆる静的ホストで実行できます（kadal-deck ci は GitHub Pages、Netlify、Vercel、Cloudflare、Docker 用のデプロイファイルを書き出します）。ルームプロトコルは @kadal/deck/protocol で型定義され、エンドポイントごとに文書化されています。また、kadal-deck relay を使うと、静的ビルドにスマートフォン用リモコン機能を追加できます。

パッケージ

パッケージ	バージョン
@kadal/deck		エンジン：MDX コンパイラーと Vite プラグイン、ランタイム、コンポーネント、テーマ、ライブクライアント、エクスポート、kadal-deck CLI、MCP サーバー
@kadal/create-deck		npm create @kadal/deck@latest：新しいデッキ、テーマ、アドオンを作成します
@kadal/deck-vue, -svelte, -solid, -preact, -qwik, -angular, -fresh, -wasm, -python		アイランド向けのフレームワークレンダラー
@kadal/theme-*（13 パッケージ）		上記のテーマ
@kadal/prettier-plugin		デッキファイル用 Prettier
Kadal Deck for VS Code		プレビュー、アウトライン、IntelliSense、チェック、フォーマット
@kadal/deck-shell	まだ npm では公開されていません	ブラウザーでコンパイルされた任意の deck.mdx を実行する、ホストやエディター向けのビルド済みページ

すべての @kadal/* パッケージは同じバージョンでリリースされ、このリポジトリの リリースワークフローを通じて npm の信頼された公開機能で公開されます。各 npm ページには 来歴情報が付与されます。VS Code 拡張機能は専用のワークフローで公開されます。

ドキュメント

はじめに · スライドの作成 · コンポーネント · 設定 · CLI · 公開 · テーマの作成 · Slidev からの移行

すべてのコンポーネントとオプションを網羅したエンジンの完全なリファレンスは packages/deck/README.mdにあります。また、npx kadal-deck infoを実行すると、ターミナルに表示されます。

ライセンス

AGPL-3.0-or-later。Kadal Deck でプレゼンテーションを行うこと、自分のデッキをセルフホストすること、公開するサイトにデッキを埋め込むことによって、何らかの義務が生じることはありません。改変したエンジンをネットワークサービスとして運用する場合は、利用者が改変後のソースを入手できるようにする必要があります。

エンジンを使って、変更を公開せずにホスト型またはプロプライエタリな製品を構築したい場合は、商用ライセンスを利用すると AGPL の義務が免除されます。[email protected] までご連絡ください。詳細は LICENSING.mdをご覧ください。移植された5つのテーマは MIT ライセンスで、第三者ライセンスに関する通知は THIRD_PARTY_NOTICES.mdにあります。

貢献

問題を再現する小さな deck.mdx を添えたバグ報告が、最も役立ちます。プルリクエストも歓迎します。CONTRIBUTING.mdに、セットアップ（Bun 1.3 以降）、テスト、アイランド検証ツールについて記載しています。質問やアイデアは Discussionsへお寄せください。 行動規範を遵守してください。また、セキュリティ上の問題は SECURITY.mdの説明に従って非公開で報告してください。

スポンサー

スポンサーからの支援は、オープンソースエンジンの開発時間に充てられます。課題への対応、ドキュメントの整備、新しい島、皆さまからご要望のあった機能の開発などに活用されます。GitHub で Kadal Deck をスポンサーする。各ティアの内容と特典についてはdeck.kadal.cc/sponsorをご覧ください。支援者はBACKERS.mdに掲載されています。企業は請求書でスポンサーになれます。

ここにロゴを掲載： Kadal Deck の最初の企業スポンサーになりませんか。

_{チェンナイで Kadal が制作 · deck.kadal.cc · [email protected]}