Skip to content
♠️ React MDX-based presentation decks
JavaScript
Branch: master
Clone or download
jxnblk Merge pull request #433 from josefaidt/patch-1
docs: update import to use `mdx-deck`
Latest commit c8b6c5f Aug 12, 2019
Permalink
Type Name Latest commit message Commit time
Failed to load latest commit information.
.circleci Adjust circleci Jul 28, 2019
cypress Add basic cypress test Jul 16, 2019
docs docs: update import to use `mdx-deck` Aug 9, 2019
examples v3.0.9 Aug 5, 2019
packages v3.0.9 Aug 5, 2019
templates/basic v3.0.9 Aug 5, 2019
.gitignore Edit gitignore Jul 17, 2019
.prettierrc Update husky and lint-staged Jul 7, 2019
.travis.yml Add now config Mar 11, 2019
CHANGELOG.md Edit changelog Aug 5, 2019
CONTRIBUTING.md Update contributing docs Apr 13, 2019
LICENSE.md Edit readme Jul 29, 2018
MIGRATION.md Edit docs Jul 17, 2019
README.md Adde symlink for readme Mar 16, 2019
cypress.json Add basic cypress test Jul 16, 2019
lerna.json v3.0.9 Aug 5, 2019
netlify.toml Adjust netlify config Jul 16, 2019
package.json Add basic cypress test Jul 16, 2019
yarn.lock Update dependencies Jul 28, 2019

README.md

MDX Deck

Award-winning React MDX-based presentation decks

Build Status Version Downloads

View demo

Getting Started

npm i -D mdx-deck

Create an MDX file and separate each slide with ---.

# This is the title of my deck

---

# About Me

---

```jsx
<CodeSnippet />
```

---

import Demo from './components/Demo'

## <Demo />

# The end

Add a run script to your package.json with the MDX Deck CLI pointing to the .mdx file to start the dev server:

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

Start the dev server:

npm start

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 'rebass'

<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. See the list of available Themes, or read more about theming in the Theming docs.

Components

MDX Deck includes built-in components to help with creating presentations, including a background Image component, an Appear component that allows stepping through parts of a single slide, and a Notes component for adding speaker notes. 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 }) => (
  <div
    style={{
      width: '100vw',
      height: '100vw',
      backgroundColor: 'tomato',
    }}>
    {children}
  </div>
)
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 layout styles, use a nested ThemeProvider, or style elements with CSS-in-JS.

Built-in Layouts

MDX Deck includes a few built-in layouts for inverting theme colors and changing the layout of a slide.

Presenter Mode

Use Presenter Mode when on stage to show a preview of the next slide, a timer, and speaker notes.

presenter mode screenshot

Keyboard Shortcuts

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

Videos & Articles

Docs

Real-World Examples

See how others have used MDX Deck for their presentations.

Usage Examples

The following examples will open in CodeSandbox.


Related

MIT License

You can’t perform that action at this time.