# jxnblk/mdx-deck

**Attribution required: if you use, quote, or summarise this content, you must credit and link back to [awesome-repositories.com](https://awesome-repositories.com/repository/jxnblk-mdx-deck).**

11,493 stars · 597 forks · JavaScript · MIT

## Links

- GitHub: https://github.com/jxnblk/mdx-deck
- Homepage: https://mdx-deck.jxnblk.com
- awesome-repositories: https://awesome-repositories.com/repository/jxnblk-mdx-deck.md

## Topics

`deck` `gatsby` `gatsby-theme` `gatsbyjs` `keynote` `markdown` `mdx` `mdx-deck` `presentation` `presentation-deck` `react` `reactjs` `slides` `theme-ui` `zero-config`

## Description

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.

## Tags

### User Interface & Experience

- [Presentation Decks](https://awesome-repositories.com/f/user-interface-experience/presentation-frameworks/slide-management-configuration/slide-content-authoring/presentation-decks.md) — Combines markdown and interactive React components into a sequence of slides for web-based presentations. ([source](https://github.com/jxnblk/mdx-deck/tree/master/examples))
- [Markdown Slide Renderers](https://awesome-repositories.com/f/user-interface-experience/presentation-frameworks/web-based-presentation-authoring-tools/markdown-slide-renderers.md) — Transforms Markdown and MDX content into interactive slide decks with support for speaker notes and layouts.
- [Presentation Component Frameworks](https://awesome-repositories.com/f/user-interface-experience/presentation-component-frameworks.md) — Integrates interactive React components specifically within a slide-based presentation environment.
- [Presenter View Synchronization](https://awesome-repositories.com/f/user-interface-experience/presentation-frameworks/lifecycle-state-management/presenter-view-synchronization.md) — Coordinates a main presentation view and a separate presenter window featuring notes and timers.
- [Speaker Tools](https://awesome-repositories.com/f/user-interface-experience/presentation-frameworks/speaker-tools.md) — Provides a system for including hidden annotations accessible only to the presenter in a dedicated view. ([source](https://github.com/jxnblk/mdx-deck/blob/master/docs/components.md))
- [Incremental Content Revealers](https://awesome-repositories.com/f/user-interface-experience/component-utilities/ui-frameworks/component-libraries/react-components/incremental-content-revealers.md) — Provides React components that reveal content fragments sequentially on a slide during a presentation. ([source](https://github.com/jxnblk/mdx-deck/tree/master/examples))
- [Higher-Order Components](https://awesome-repositories.com/f/user-interface-experience/functional-components/higher-order-components.md) — Uses higher-order React components to define the visual arrangement and structural boundaries of each slide.
- [Keyboard Navigation](https://awesome-repositories.com/f/user-interface-experience/keyboard-navigation.md) — Implements predefined keyboard shortcuts for controlling slide transitions, stepping, and view modes. ([source](https://github.com/jxnblk/mdx-deck#readme))
- [Slide Transition Engines](https://awesome-repositories.com/f/user-interface-experience/presentation-frameworks/animation-transition-engines/slide-transition-engines.md) — Manages the sequence and visual transition effects between slides and incremental elements. ([source](https://github.com/jxnblk/mdx-deck/blob/master/CHANGELOG.md))
- [Slide State Management](https://awesome-repositories.com/f/user-interface-experience/presentation-frameworks/lifecycle-state-management/slide-state-management.md) — Provides a specialized state hook for tracking the current slide index and the progression of incremental elements. ([source](https://github.com/jxnblk/mdx-deck/blob/master/MIGRATION.md))
- [PDF Exporting](https://awesome-repositories.com/f/user-interface-experience/presentation-frameworks/pdf-exporting.md) — Provides a command-line utility to convert web-based slides into portable PDF documents for offline distribution. ([source](https://github.com/jxnblk/mdx-deck/blob/master/package.json))
- [Slide Layout and Styling](https://awesome-repositories.com/f/user-interface-experience/presentation-frameworks/slide-layout-styling.md) — Allows defining the spatial arrangement and visual appearance of content within individual slides using custom components. ([source](https://github.com/jxnblk/mdx-deck/blob/master/MIGRATION.md))
- [Theme Customization Engines](https://awesome-repositories.com/f/user-interface-experience/presentation-frameworks/slide-layout-styling/theme-customization-engines.md) — Provides a mechanism for creating custom visual themes and layout styling for slide decks.
- [State-Driven UI Controllers](https://awesome-repositories.com/f/user-interface-experience/state-driven-ui-controllers.md) — Tracks current slide and element progression using a centralized state hook to control visibility.
- [CSS-in-JS Implementations](https://awesome-repositories.com/f/user-interface-experience/styling-theming-systems/content-styling/component-styling-tools/component-styling/css-in-js-implementations.md) — Implements a provider pattern to apply global stylistic presets and custom theme objects via CSS-in-JS.
- [Syntax Highlighting](https://awesome-repositories.com/f/user-interface-experience/syntax-highlighting.md) — Integrates syntax highlighting engines to format and render fenced code blocks within slides. ([source](https://github.com/jxnblk/mdx-deck/tree/master/examples))

### Part of an Awesome List

- [Developer Presentation Workflows](https://awesome-repositories.com/f/awesome-lists/productivity/presentations/developer-presentation-workflows.md) — Optimizes the creation of technical presentations with integrated syntax highlighting and PDF export tools.
- [Theming and Styling](https://awesome-repositories.com/f/awesome-lists/devtools/theming-and-styling.md) — Provides a theme provider and predefined stylistic presets for applying global colors and timing functions. ([source](https://github.com/jxnblk/mdx-deck/blob/master/CHANGELOG.md))

### Business & Productivity Software

- [Speaker Tools](https://awesome-repositories.com/f/business-productivity-software/team-collaboration-events/speaker-tools.md) — Provides a dedicated presenter mode with a timer, slide previews, and hidden speaker notes.

### Content Management & Publishing

- [Presentation Static Generation](https://awesome-repositories.com/f/content-management-publishing/static-site-document-generators/static-site-generators/static-site-generation/presentation-static-generation.md) — Exports interactive slide decks into static HTML files for hosting without a live server.