reslide

概要

React + MDXベースの汎用プレゼンテーションフレームワークです。Slidev（Vueベース）の主要機能をReactエコシステムで再実装しています。

開発経緯

普段のスライド作成にSlidevを使っていましたが、ポートフォリオサイト（Next.js）にスライドを埋め込もうとすると、VueベースのSlidevとReactの間でビルドパイプラインが二重になり、ビルド時間が長くなるのが課題でした。

また、Reactコンポーネントをスライド内に直接埋め込みたい場面もあり、slidev-addon-react経由の間接的な統合では限界がありました。それなら、Reactネイティブで動くプレゼンフレームワークを自分で作ってしまおうと思い、開発を始めました。

特徴

• Reactネイティブ — Next.js / Vite / Remix等、Reactが動くあらゆる環境で使えます。Reactコンポーネントをスライド内に直接埋め込めます
• MDXでスライドを記述 — ---区切りでスライドを分割し、remark/rehypeプラグインでディレクティブを変換します
• 段階表示・レイアウト — Slidev同様のクリックアニメーション、組み込みレイアウト（center, two-cols, image-right等）を提供します
• OSSライブラリ — @reslide/core（コンポーネント）、@reslide/mdx（プラグイン）、@reslide/cli（CLI）の3パッケージ構成で、必要な部分だけ使えます

パッケージ構成

• @reslide/core — 純粋Reactコンポーネント（Deck, Slide, Click, Mark, Notes）。フレームワーク非依存
• @reslide/mdx — remark/rehypeプラグイン。スライド分割やディレクティブ変換を担当
• @reslide/cli — Viteベースの開発サーバー・ビルドCLI

技術スタック

React 19 + TypeScriptで構築しています。スタイリングはTailwind CSS v4で、CSS変数によるテーマカスタマイズに対応しています。

MDXの前処理にはremark/rehype + remark-directiveを使い、コードハイライトにはShiki、数式にはKaTeX、図にはMermaidを組み込んでいます。

モノレポ管理はVite+（pnpm）、ライブラリビルドはtsdown、テストはVitestです。

ソースコードは、このサイトのスライドページでのSlidevからのリプレイスが完了し次第、GitHubで公開予定です。