Project Name | Stars | Downloads | Repos Using This | Packages Using This | Most Recent Commit | Total Releases | Latest Release | Open Issues | License | Language |
---|---|---|---|---|---|---|---|---|---|---|
Mdx Deck | 11,040 | 5 months ago | 144 | mit | JavaScript | |||||
♠️ React MDX-based presentation decks | ||||||||||
Code Surfer | 6,160 | 70 | 9 | a month ago | 13 | January 21, 2019 | 42 | mit | JavaScript | |
Rad code slides <🏄/> | ||||||||||
Gatsby Starter Deck | 498 | 3 years ago | mit | JavaScript | ||||||
🗣 Create presentations using Gatsby, React & Markdown. | ||||||||||
Presa | 156 | 5 years ago | 19 | March 15, 2021 | 3 | JavaScript | ||||
🎞 Make stylish presentations in React, powered by styled-components | ||||||||||
Arkhamcards | 73 | 6 days ago | 22 | TypeScript | ||||||
react-native based deck and campaign management app for ArkhamDB | ||||||||||
Mdxp | 53 | a year ago | 14 | October 08, 2020 | 2 | mit | JavaScript | |||
Web Slides Made Easy | ||||||||||
Referee | 51 | a year ago | 54 | apache-2.0 | TypeScript | |||||
Referee is a UI for using Spinnaker Kayenta as a standalone service. | ||||||||||
The React Way | 48 | 8 years ago | 1 | JavaScript | ||||||
An isomorphic React slide deck, about React. | ||||||||||
Deck | 45 | 7 years ago | mit | JavaScript | ||||||
A tiny Github client powered by React Native | ||||||||||
React Poker | 45 | 3 | 4 years ago | 15 | March 23, 2018 | JavaScript | ||||
A React Library For Poker Card Game Animations |
Award-winning React MDX-based presentation decks
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.
MDX uses Markdown syntax and can render React components inline with JSX.
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.
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.
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.
These optional libraries are intended for use with MDX Deck.
Note: please check with version compatibility when using these libraries.
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: '100vh',
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 custom layout styles or style child elements with CSS-in-JS.
Press Option + P
to toggle Presenter Mode,
which will show a preview of the next slide, a timer, and speaker notes.
The presentation can be opened in two separate windows at the same time, and it will stay in sync with the other window.
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 |
-p --port Dev server port
-h --host Host the dev server listens to
--no-open Prevent from opening in default browser
See how others have used MDX Deck for their presentations.
The following examples will open in CodeSandbox.