Github url

mdx-deck

by jxnblk

jxnblk /mdx-deck

♠️ React MDX-based presentation decks

9.3K Stars 538 Forks Last release: Not found MIT License 1.5K Commits 144 Releases

Available items

No Items, yet!

The developer of this repository has not created any items for sale yet. Need a bug fixed? Help with integration? A different license? Create a request here:

MDX Deck

Award-winning React MDX-based presentation decks

Build StatusVersionDownloads

View demo

Getting Started

npm i -D mdx-deck

Create an MDX file and separate each slide with

---

.

# Hello --- ## This is my deck --- ## The End

Add a run script to your

package.json

with the MDX Deck CLI pointing to the

.mdx

file to start the development server:

"scripts": { "start": "mdx-deck deck.mdx" }

Start the development server:

npm start

Use the left and right arrow keys to navigate through the presentation.

Using MDX

MDX uses Markdown syntax and can render React components inline with JSX.

Imports

To import components, use ES import syntax separated with empty lines between any markdown or JSX syntax.

import { Box } from 'theme-ui'<box color="tomato">Hello</box>

Read more about MDX syntax in the MDX Docs.

Theming

MDX Deck uses Theme UI and Emotion for styling, making practically any part of the presentation themeable. It also includes several built-in themes to change the look and feel of the presentation.

Components

MDX Deck includes built-in components to help with creating presentations, a

Notes

component for adding speaker notes, a

Head

component for the document head,

Header

and

Footer

components for persistent header and footer content, and a

Steps

component for adding multiple intermediate steps in a single slide.

Read more in the Components docs.

Third-Party Components

These optional libraries are intended for use with MDX Deck.

  • CodeSurfer: React component for scrolling, zooming and highlighting code.
  • mdx-code: Runnable code playgrounds for MDX Deck.
  • mdx-deck-live-code: Live React and JS coding in slides.

Note: please check with version compatibility when using these libraries.

Layouts

Each slide can include a custom layout around its content, which can be used as a template for visually differentiating slides.

// example Layout.js import React from 'react' export default ({ children }) =\> ( 
 {children} 
)
import Layout from './Layout' # No Layout ---<layout>

# Custom Layout

</layout>

The layout component will wrap the MDX elements within that slide, which means you can add custom layout styles or style child elements with CSS-in-JS.

Presenter Mode

Press

Option + P

to toggle Presenter Mode, which will show a preview of the next slide, a timer, and speaker notes.

presenter mode screenshot

The presentation can be opened in two separate windows at the same time, and it will stay in sync with the other window.

Keyboard Shortcuts

| Key | Description | | ----------- | -------------------------------------------- | | Left Arrow, Page Up, Shift + Space | Go to previous slide (or step in Steps) | | Right Arrow, Page Down, Space | Go to next slide (or step in Steps) | | Option + P | Toggle Presenter Mode | | Option + O | Toggle Overview Mode | Option + G | Toggle Grid Mode

CLI Options

-p --port Dev server port -h --host Host the dev server listens to --no-open Prevent from opening in default browser

Videos & Articles

Examples

See how others have used MDX Deck for their presentations.

Usage Examples

The following examples will open in CodeSandbox.


Related

MIT License

We use cookies. If you continue to browse the site, you agree to the use of cookies. For more information on our use of cookies please see our Privacy Policy.