mdx-deck

MDX-based presention decks

Beta

npm i mdx-deck

Getting Started

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

Run the CLI pointing to the .mdx file to start the dev server:

mdx-deck deck.mdx

Usage

MDX can use Markdown syntax and render React components with JSX.

Imports

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

import { Box } from 'grid-styled'

<Box color='tomato'>
  Hello
</Box>

Theming

mdx-deck uses styled-components for styling.

Built-in Themes

TK

Custom Themes

A custom theme can be provided by exporting theme from the MDX file.

export { default as theme } from './theme'

# Hello

The theme should be an object based on styled-system's theme schema.

// example theme.js
export default {
  font: 'Georgia',
  monospace: 'Menlo, monospace',
  fontSizes: [
    16, 24, 32, 48, 64, 96, 128
  ],
  colors: {
    text: '#000',
    background: 'transparent',
    link: '#07c',
    heading: '#000',
    quote: '#000',
    pre: '#f0f',
    preBackground: '#333',
    code: '#f0f',
    codeBackground: 'transparent',
  },
  css: {
    // apply any styles to the root element
  },
  // custom CSS can be provided to any of the default components:
  heading: {
    fontWeight: 400
  },
  link: {
    textDecoration: 'none',
    '&:hover': {
      textDecoration: 'underline',
    }
  }
}

Custom Components

mdx-deck includes default components for MDX, but to provide custom components to the MDXProvider, export a components object from your MDX file.

export { default as components } from './components'

# Custom Components

Layouts

Each slide can include a custom layout around its content.

import Layout from './Layout'

# No Layout

---
export default Layout

# Custom Layout

Custom Provider

A custom Provider component can be exported to wrap the entire application. This is useful for adding custom context providers, such as a ThemeProvider.

export { default as Provider } from './Provider'

# Hello

Exporting

Run the build command to export a presentation as HTML with a JS bundle.

mdx-deck build deck.mdx

React API

mdx-deck components can be used in any React application, such as create-react-app or next.js.

Webpack Loader

mdx-deck uses a custom webpack loader to split MDX files into an array of slides. Use this loader to import mdx files in a webpack application.

// example webpack.config.js
module.exports = {
  module: {
    rules: [
      {
        test: /\.mdx$/,
        ignore: /node_modules/,
        use: [
          'babel-loader',
          'mdx-deck/loader'
        ]
      }
    ]
  }
}

SlideDeck Component

import React from 'react'
import { SlideDeck } from 'mdx-deck'
import slides from './deck.mdx'
import theme from './theme'
import components from './components'

export default () =>
  <SlideDeck
    slides={slides}
    theme={theme}
    components={components}
    width='100vw'
    height='100vh'
  />

View the source for other components available for use.

---

• add default themes
• theme docs
• exporting docs
• components docs
• Provider docs

[MIT License][LICENSE.md]