MDX-based presentation decks (Beta)
npm i -D mdx-deck
- 📝 Write presentations in markdown
- ⚛️ Import and use React components
- 💅 Customizable themes and components
- 0️⃣ Zero-config CLI
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
For a video introduction, see this egghead tutorial by @andrewdelprete.
MDX can use Markdown syntax and render React components with JSX.
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>
mdx-deck uses styled-components for styling.
mdx-deck includes several built-in themes to change the look and feel of the presentation.
Export theme
from your MDX file to enable a theme.
export { dark as theme } from 'mdx-deck/themes'
# Dark Theme
The following themes are available from mdx-deck/themes
:
theme
: default theme with white backgrounddark
: black background dark themefuture
: dark theme with Avenir Nextcondensed
: dark theme with Roboto Condensed
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: [
'0.75em', '1em', '1.5em', '2em', '3em'
],
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',
}
}
}
The following keys are available for theming:
font
: base font familymonospace
: font family for<pre>
and<code>
fontSizes
: array of font sizes from smallest to largestcolors
: object of colors used for MDX componentstext
: root foreground colorbackground
: root background colorlink
heading
blockquote
pre
preBackground
code
codeBackground
css
: root CSS objectheading
: CSS for all headingsh1
: CSS for<h1>
h2
: CSS for<h2>
h3
: CSS for<h3>
paragraph
: CSS for<p>
link
: CSS for<a>
ul
: CSS for<ul>
ol
: CSS for<ol>
li
: CSS for<li>
img
: CSS for<img>
mdx-deck includes default components for MDX, but to provide custom components to the MDXProvider, export a components
object.
export { default as components } from './components'
# Custom Components
Each slide can include a custom layout around its content. This can be used as a substitute for slide templates found in other presentation apps and libraries.
// 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
---
export default Layout
# Custom Layout
The layout component will wrap the MDX elements within that slide, which means you can use a nested ThemeProvider or target elements with CSS-in-JS.
A custom Provider component can be exported to wrap the entire application. This is useful for adding custom context providers in React.
export { default as Provider } from './Provider'
# Hello
Add a build
script to your package.json
to export a presentation as HTML with a JS bundle.
"scripts": {
"build": "mdx-deck build deck.mdx"
}
-p --port Dev server port
--no-open Prevent from opening in default browser
-d --out-dir Output directory for exporting
--title Title for the HTML document
mdx-deck components can also be used in any React application, such as create-react-app or next.js.
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'
]
}
]
}
}
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.