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.

jxnblkmdx-deck

Features

Star history