jxnblk/mdx-deck
Mdx Deck
mdx-deck is a markdown presentation generator and React-based framework used to create interactive slide decks. It functions as a static site presentation engine that converts Markdown and MDX files into structured, stylable browser-based slides.
The framework distinguishes itself by combining structured markdown with interactive React components and a synchronized presenter mode. This presenter mode provides a dedicated second window featuring a timer, slide previews, and hidden speaker notes for live events.
The system covers a broad range of presentation capabilities, including custom CSS-in-JS theme engines, flexible slide layout patterns, and incremental element visibility for sequential content delivery. It also includes tools for keyboard navigation, syntax-highlighted code blocks, and external content embedding.
Presentations can be distributed via static HTML export or converted to PDF using a command-line interface.
Features
- Presentation Decks - Combines markdown and interactive React components into a sequence of slides for web-based presentations.
- Markdown Slide Renderers - Transforms Markdown and MDX content into interactive slide decks with support for speaker notes and layouts.
- Developer Presentation Workflows - Optimizes the creation of technical presentations with integrated syntax highlighting and PDF export tools.
- Speaker Tools - Provides a dedicated presenter mode with a timer, slide previews, and hidden speaker notes.
- Presentation Static Generation - Exports interactive slide decks into static HTML files for hosting without a live server.
- Presentation Component Frameworks - Integrates interactive React components specifically within a slide-based presentation environment.
- Presenter View Synchronization - Coordinates a main presentation view and a separate presenter window featuring notes and timers.
- Speaker Tools - Provides a system for including hidden annotations accessible only to the presenter in a dedicated view.
- Theming and Styling - Provides a theme provider and predefined stylistic presets for applying global colors and timing functions.
- Incremental Content Revealers - Provides React components that reveal content fragments sequentially on a slide during a presentation.
- Higher-Order Components - Uses higher-order React components to define the visual arrangement and structural boundaries of each slide.
- Keyboard Navigation - Implements predefined keyboard shortcuts for controlling slide transitions, stepping, and view modes.
- Slide Transition Engines - Manages the sequence and visual transition effects between slides and incremental elements.
- Slide State Management - Provides a specialized state hook for tracking the current slide index and the progression of incremental elements.
- PDF Exporting - Provides a command-line utility to convert web-based slides into portable PDF documents for offline distribution.
- Slide Layout and Styling - Allows defining the spatial arrangement and visual appearance of content within individual slides using custom components.
- Theme Customization Engines - Provides a mechanism for creating custom visual themes and layout styling for slide decks.
- State-Driven UI Controllers - Tracks current slide and element progression using a centralized state hook to control visibility.
- CSS-in-JS Implementations - Implements a provider pattern to apply global stylistic presets and custom theme objects via CSS-in-JS.
- Syntax Highlighting - Integrates syntax highlighting engines to format and render fenced code blocks within slides.
