♠️ React MDX-based presentation decks

Overview

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 ---.

# 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 }) => (
  <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.

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

Comments
  • v2 Roadmap

    v2 Roadmap

    This is a placeholder for potential major changes in the next version

    • Split PDF export into a separate, optional package #157
    • Refactor & simplify components codebase
    • Handle focus trapping #93
    • New UI for presenting and modes, including touchscreen UI #6
    • Update layout styles, simplifying custom layout components
    discussion 2.0 
    opened by jxnblk 20
  • mdx-deck start error with 'TypeError: Cannot read property 'internal' of null'

    mdx-deck start error with 'TypeError: Cannot read property 'internal' of null'

    I'm creating a deck using the example from Zeit's now-examples repository.

    I can start a development server correctly and see the success: Building development bundle output from Gatsby, however as soon as I change a file the development server crashes with this error:

      TypeError: Cannot read property 'internal' of null
      
      - gen-mdx.js:48 payloadCacheKey
        [javascript-slides]/[gatsby-plugin-mdx]/utils/gen-mdx.js:48:46
      
      - gen-mdx.js:51 genMDX
        [javascript-slides]/[gatsby-plugin-mdx]/utils/gen-mdx.js:51:43
      
      - source-nodes.js:108 processMDX
        [javascript-slides]/[gatsby-plugin-mdx]/gatsby/source-nodes.js:108:5
      
      - source-nodes.js:158 resolve
        [javascript-slides]/[gatsby-plugin-mdx]/gatsby/source-nodes.js:158:35
      
      - gatsby-node.js:40 
        [javascript-slides]/[gatsby-theme-mdx-deck]/gatsby-node.js:40:24
      
      - gatsby-node.js:47 resolveTitle
        [javascript-slides]/[gatsby-theme-mdx-deck]/gatsby-node.js:47:60
      
    
    not finished createPages - 0.077s
    
    
    ——————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————
    3 pages                                                                    In Progress                                                                    mdx-deck
    Error: Command failed with exit code 1 (EPERM): gatsby develop --host localhost --port 8000 --open
        at makeError (/Users/jackleslie/Desktop/Talks/javascript-slides/node_modules/execa/lib/error.js:59:11)
        at handlePromise (/Users/jackleslie/Desktop/Talks/javascript-slides/node_modules/execa/index.js:112:26)
        at processTicksAndRejections (internal/process/task_queues.js:93:5)
    

    Here's my project for reference, nothing much to see at the moment

    opened by jackleslie 18
  • Enable to step through fragments inside a slide

    Enable to step through fragments inside a slide

    Would be interesting to uncover blocks inside a slide. f.e. bullet points or parts of a code? If interesting, I have time this week and could try to add this feature. Maybe without animations at first, just uncovering fragment for fragment. What would the markup look like to declare blocks as fragments?

    Just an example

    ---
    
    4 reasons to use Reason
    
    -o Based on OCaml
    -o Types
    -o Community
    -o Interop
    
    ---
    
    enhancement 
    opened by busypeoples 16
  • Appear: Missing Props

    Appear: Missing Props

    Hi there – just started with mdx-deck. It's awesome, thanks!

    But having some issues with using Appear. As soon as use the component the following errors occur and the app breaks.

    Warning: Failed prop type: The prop `slide` is marked as required in `Appear`, but its value is `null`.
    
    Warning: Failed prop type: The prop `deck` is marked as required in `Appear`, but its value is `null`.
    

    Haven't found any hint in the docs.


    env npm: 6.2.0
    node: 10.9.0
    @mdx-js/mdx: 0.15.0
    mdx-deck: 1.6.4

    bug 
    opened by felixheck 15
  • Hot reloading is not working

    Hot reloading is not working

    Environment

    Machine: MacBook Pro 15" 2018 Browser: Chrome (version 76.0.3809.132)

    Description

    I was trying this awesome package in order to create some slides for my tech talk. I've followed the instructions on the readme of this repo, so my files are:

    • package.json
    • deck.mdx
    • yarn.lock
    • node_modules which is pretty standard. The start script is mdx-deck deck.mdx.

    What should happen?

    When I run yarn start, I expect the program to start, build the app and serve it in the 8000 port of my browser. Furthermore, I want to see hot-reloaded changes every time I edit my deck.mdx

    What happen instead?

    The program creates the first build form the files and serves it correctly on the port 8000 of my browser. Anyhow, when I change a file I can see from the console that Webpack recompile the code but no changes appear on my browser page. At this point I launch a refresh of the page, expecting the changes to be shown on the page. One again I'm not able to see them.

    In order to actually navigate an updated version of my app I need to stop the program and re-run yarn start, which is painful.

    opened by NicholasPeretti 13
  • Mobile layout & touchscreen UI

    Mobile layout & touchscreen UI

    • [x] Swipe support #91
    • [x] Previous/Next buttons #69
    • [ ] viewport-fit=cover
    • [ ] Prevent vertical scroll
    • [ ] Touchscreen controls for mode/slide/etc
    • [ ] Adjust font sizes/zoom for mobile
    enhancement 
    opened by jxnblk 12
  • Where are the bullets/dots on the bottom?

    Where are the bullets/dots on the bottom?

    Sorry, this might be a noob question, but I'm trying to use mdx-deck and my slides, even with themes, doesn't have the bullets on the bottom. (Neither some transitions when changing the slide)

    Am I missing something? I took a look at the config and found nothing.

    Are these screenshots outdated?

    Thanks!

    opened by ravanscafi 11
  • mdx-deck 3.0.10, node v11.5.0 - Hot updates only render if first slide is modified

    mdx-deck 3.0.10, node v11.5.0 - Hot updates only render if first slide is modified

    Test
    
    ---
    
    Test 2
    

    ->

    Test
    
    ---
    
    Test 2!
    

    = No Update

    Test!
    
    ---
    
    Test 2!
    

    = Both updates appear.

    Really strange one.

    Update

    To fix your mdx-deck v3 project temporarily, run the following commands in your presentation project:

    rm -rf node_modules
    npm install [email protected] -D --save-exact
    npm install
    
    bug 
    opened by jonsherrard 11
  • Custom components in theme broken

    Custom components in theme broken

    Seems like the components field in custom themes isn't respected (perhaps being merged with default/base theme incorrectly? Trying to follow the syntax highlighting docs and am using latest mdx-deck.

    import { syntaxHighlighterPrism, dark } from 'mdx-deck/themes'
    
    export const themes = [syntaxHighlighterPrism, dark]
    
    ` ``
    <div>This has the default theme style for `code`</div>
    ` ``
    
    • Intentionally wrote malformed backticks in code sample.

    Following: https://github.com/jxnblk/mdx-deck/blob/master/docs/theming.md#syntax-highlighting

    bug 
    opened by derekr 11
  • Code zooming transitions

    Code zooming transitions

    Hi! This repo is great, and I'm incredibly looking forward to use it for my next presentation! 😄

    The thing is, I want to achieve the effect I saw in this talk where you are actually showing code, but zooming in some parts and just scrolling from top to bottom. Is there any easy (or maybe built-in) option that I don't know of to do this? I know some people use Spectacle.js for that but I think this is way easier! 😊

    Thanks in advance and keep up the good work! 😎


    EDIT: Added gif for reference 😉 (thanks @trevordmiller)

    code

    enhancement 
    opened by kutyel 11
  • Add Fragments Component

    Add Fragments Component

    This is only a proof of concept. It would enable to skip through fragments. Currently it would listen to key up and key down (to not clash with key left/right inside the main component).

    opened by busypeoples 11
  • [WIP] Add Replay

    [WIP] Add Replay

    👋 Was looking for a fun project to test out Replay's new Cypress recorder and saw MDX Deck on the list!

    Replay + Cypress ❤️

    Replay records the Cypress test runs so that you can debug the failing tests after the fact.

    Screen Shot 2022-07-22 at 5 39 48 PM

    Next Steps

    1. add RECORD_REPLAY_API_KEY=rwk_58mRttSdxx45bkUrC6WoipjkOVryHez76imQ3IYNilP to the circleci environment variables
    2. we'll add you to the MDX Deck Replay team so that you can view the replays, test suite, and add other contributors

    Miscellaneous

    Went ahead and upgraded the Cypress and Node versions.

    opened by jasonLaster 1
  • Bump terser from 4.6.3 to 4.8.1

    Bump terser from 4.6.3 to 4.8.1

    Bumps terser from 4.6.3 to 4.8.1.

    Changelog

    Sourced from terser's changelog.

    v4.8.1 (backport)

    • Security fix for RegExps that should not be evaluated (regexp DDOS)

    v4.8.0

    • Support for numeric separators (million = 1_000_000) was added.
    • Assigning properties to a class is now assumed to be pure.
    • Fixed bug where yield wasn't considered a valid property key in generators.

    v4.7.0

    • A bug was fixed where an arrow function would have the wrong size
    • arguments object is now considered safe to retrieve properties from (useful for length, or 0) even when pure_getters is not set.
    • Fixed erroneous const declarations without value (which is invalid) in some corner cases when using collapse_vars.

    v4.6.13

    • Fixed issue where ES5 object properties were being turned into ES6 object properties due to more lax unicode rules.
    • Fixed parsing of BigInt with lowercase e in them.

    v4.6.12

    • Fixed subtree comparison code, making it see that [1,[2, 3]] is different from [1, 2, [3]]
    • Printing of unicode identifiers has been improved

    v4.6.11

    • Read unused classes' properties and method keys, to figure out if they use other variables.
    • Prevent inlining into block scopes when there are name collisions
    • Functions are no longer inlined into parameter defaults, because they live in their own special scope.
    • When inlining identity functions, take into account the fact they may be used to drop this in function calls.
    • Nullish coalescing operator (x ?? y), plus basic optimization for it.
    • Template literals in binary expressions such as + have been further optimized

    v4.6.10

    • Do not use reduce_vars when classes are present

    v4.6.9

    • Check if block scopes actually exist in blocks

    v4.6.8

    • Take into account "executed bits" of classes like static properties or computed keys, when checking if a class evaluation might throw or have side effects.

    v4.6.7

    • Some new performance gains through a AST_Node.size() method which measures a node's source code length without printing it to a string first.

    ... (truncated)

    Commits

    Dependabot compatibility score

    Dependabot will resolve any conflicts with this PR as long as you don't alter it yourself. You can also trigger a rebase manually by commenting @dependabot rebase.


    Dependabot commands and options

    You can trigger Dependabot actions by commenting on this PR:

    • @dependabot rebase will rebase this PR
    • @dependabot recreate will recreate this PR, overwriting any edits that have been made to it
    • @dependabot merge will merge this PR after your CI passes on it
    • @dependabot squash and merge will squash and merge this PR after your CI passes on it
    • @dependabot cancel merge will cancel a previously requested merge and block automerging
    • @dependabot reopen will reopen this PR if it is closed
    • @dependabot close will close this PR and stop Dependabot recreating it. You can achieve the same result by closing it manually
    • @dependabot ignore this major version will close this PR and stop Dependabot creating any more for this major version (unless you reopen the PR or upgrade to it yourself)
    • @dependabot ignore this minor version will close this PR and stop Dependabot creating any more for this minor version (unless you reopen the PR or upgrade to it yourself)
    • @dependabot ignore this dependency will close this PR and stop Dependabot creating any more for this dependency (unless you reopen the PR or upgrade to it yourself)
    • @dependabot use these labels will set the current labels as the default for future PRs for this repo and language
    • @dependabot use these reviewers will set the current reviewers as the default for future PRs for this repo and language
    • @dependabot use these assignees will set the current assignees as the default for future PRs for this repo and language
    • @dependabot use this milestone will set the current milestone as the default for future PRs for this repo and language

    You can disable automated security fix PRs for this repo from the Security Alerts page.

    dependencies 
    opened by dependabot[bot] 0
  • Bump gatsby-plugin-mdx from 1.0.74 to 2.14.1

    Bump gatsby-plugin-mdx from 1.0.74 to 2.14.1

    Bumps gatsby-plugin-mdx from 1.0.74 to 2.14.1.

    Release notes

    Sourced from gatsby-plugin-mdx's releases.

    New MongoDB source plugin!

    Exciting to see the first source plugin for a database added!

    Added

    Fixed

    New plugin adding support for css-in-js library JSS!

    Added

    Fixed

    1.3.0 — improve cachability of JS bundles + new CSV transformer!

    Added

    ... (truncated)

    Changelog

    Sourced from gatsby-plugin-mdx's changelog.

    2.14.1 (2022-06-02)

    Bug Fixes

    2.13.0 (2021-09-01)

    🧾 Release notes

    Chores

    2.12.0 (2021-08-18)

    🧾 Release notes

    Chores

    2.11.0 (2021-08-04)

    🧾 Release notes

    Bug Fixes

    • generate mdx once when multiple mdx fields requested #32462 (0f8d747)

    2.10.1 (2021-07-26)

    Bug Fixes

    2.10.0 (2021-07-20)

    🧾 Release notes

    Chores

    2.9.0 (2021-07-07)

    🧾 Release notes

    Features

    ... (truncated)

    Commits

    Dependabot compatibility score

    Dependabot will resolve any conflicts with this PR as long as you don't alter it yourself. You can also trigger a rebase manually by commenting @dependabot rebase.


    Dependabot commands and options

    You can trigger Dependabot actions by commenting on this PR:

    • @dependabot rebase will rebase this PR
    • @dependabot recreate will recreate this PR, overwriting any edits that have been made to it
    • @dependabot merge will merge this PR after your CI passes on it
    • @dependabot squash and merge will squash and merge this PR after your CI passes on it
    • @dependabot cancel merge will cancel a previously requested merge and block automerging
    • @dependabot reopen will reopen this PR if it is closed
    • @dependabot close will close this PR and stop Dependabot recreating it. You can achieve the same result by closing it manually
    • @dependabot ignore this major version will close this PR and stop Dependabot creating any more for this major version (unless you reopen the PR or upgrade to it yourself)
    • @dependabot ignore this minor version will close this PR and stop Dependabot creating any more for this minor version (unless you reopen the PR or upgrade to it yourself)
    • @dependabot ignore this dependency will close this PR and stop Dependabot creating any more for this dependency (unless you reopen the PR or upgrade to it yourself)
    • @dependabot use these labels will set the current labels as the default for future PRs for this repo and language
    • @dependabot use these reviewers will set the current reviewers as the default for future PRs for this repo and language
    • @dependabot use these assignees will set the current assignees as the default for future PRs for this repo and language
    • @dependabot use this milestone will set the current milestone as the default for future PRs for this repo and language

    You can disable automated security fix PRs for this repo from the Security Alerts page.

    dependencies 
    opened by dependabot[bot] 0
  • Not running on Gatsbyjs 4

    Not running on Gatsbyjs 4

    Hi @jxnblk ,

    the Plugin gatsby-theme-mdx-deck is not working on the current version (4.14.0) of Gatsbyjs. Can you create an updated version?

    Regards, Jörg

    opened by captainabap 1
  • Add mouse events support for slides navigation

    Add mouse events support for slides navigation

    Mouse Events

    | Key | Description | |-------------| -------------------------------------------- | | Right click | Go to previous slide (or step in [Steps][]) | | Left click | Go to next slide (or step in [Steps][]) |

    In any case you need the default behaviour for right-click (show up the context menu) you can right-click while pressing ALT button.

    opened by ulisesantana 0
  • Need custom shortcuts

    Need custom shortcuts

    Hi @jxnblk !

    I tried to integrate mdx-deck with react live code. When I edited the live code, I will press space, left, right. But it will take me to the next page. How can I focus on the live code editing without triggering the keyboard down event?

    opened by wghglory 0
Owner
Brent Jackson
Building @system-ui @styled-system, @rebassjs, MDX Deck
Brent Jackson
Personal website and blog made using NextJS, TailwindCSS, GraphCMS, and MDX bundler

This is a Next.js project bootstrapped with create-next-app. Getting Started First, run the development server: npm run dev # or yarn dev Open http://

null 12 Aug 21, 2022
Work in progress: A presentation server for Lisp programs, implemented in Electron

electron-presentation-server mikel evins [email protected] A work in progress: an experimental presentation server for Lisp programs, implemented with E

mikel evins 5 Feb 26, 2022
Free Open Source High Quality Dashboard based on Bootstrap 4 & React 16: http://dashboards.webkom.co/react/airframe

Airframe React High Quality Dashboard / Admin / Analytics template that works great on any smartphone, tablet or desktop. Available as Open Source as

Mustafa Nabavi 6 Jun 5, 2022
Recoil is an experimental state management library for React apps. It provides several capabilities that are difficult to achieve with React alone, while being compatible with the newest features of React.

Recoil · Recoil is an experimental set of utilities for state management with React. Please see the website: https://recoiljs.org Installation The Rec

Facebook Experimental 18k Nov 22, 2022
✌️ A spring physics based React animation library

react-spring is a spring-physics based animation library that should cover most of your UI related animation needs. It gives you tools flexible enough

Poimandres 24.5k Nov 23, 2022
A React-based UI toolkit for the web

Blueprint Blueprint is a React-based UI toolkit for the web. It is optimized for building complex, data-dense web interfaces for desktop applications

Palantir Technologies 19.4k Nov 29, 2022
Next-gen, highly customizable content editor for the browser - based on React and Redux and written in TypeScript. WYSIWYG on steroids.

ReactPage ReactPage is a smart, extensible and modern editor ("WYSIWYG") for the web written in React. If you are fed up with the limitations of conte

null 9k Nov 20, 2022
Mobile app development framework and SDK using HTML5 and JavaScript. Create beautiful and performant cross-platform mobile apps. Based on Web Components, and provides bindings for Angular 1, 2, React and Vue.js.

Onsen UI - Cross-Platform Hybrid App and PWA Framework Onsen UI is an open source framework that makes it easy to create native-feeling Progressive We

null 8.7k Nov 25, 2022
a react-based framework that provides accessibility, modularity, responsiveness, and theming in a tidy package

Grommet: focus on the essential experience Documentation Visit the Grommet website for more information. Support / Contributing Before opening an issu

grommet 8.1k Nov 17, 2022
🏁 High performance subscription-based form state management for React

You build great forms, but do you know HOW users use your forms? Find out with Form Nerd! Professional analytics from the creator of React Final Form.

Final Form 7.1k Nov 16, 2022
Further split the React Native code based on Metro build to improve performance, providing `Dll` and `Dynamic Imports` features

React-Native Code Splitting Further split the React Native code based on Metro build to improve performance, providing Dll and Dynamic Imports feature

Wuba 118 Nov 18, 2022
null 133 Nov 22, 2022
NodeRPG - Turn-based RPG written in TypeScript along with Ink and React

NodeRPG Role-Playing Game inside the terminal with Ink and React! Running in your machine Requirements NodeJS TypeScript Yarn* Everything can be done

Felipe Silva 6 Jul 31, 2022
Challenge [Frontend Mentor] - In this challenge, JavaScript was used to filter jobs based on the selected categories. Technologies used: HTML5, CSS3 and React.

Frontend Mentor - Job listings with filtering Front-end challenge focused on javascript logic, where a list of fictitious vacancies is presented and t

Rui Neto 11 Apr 13, 2022
Collection of Animated 60 FPS TabBar Component's based on React Navigation.

React Navigation TabBar Collection Collection of Animated 60 FPS TabBar Components based on React Navigation. Features 60 FPS Animation Beautiful TabB

Mikalyh 20 Nov 15, 2022
An easy to use and simple masonry layout for React Js based on flexbox column.

React Masonry An easy to use and simple masonry layout for React Js based on flexbox column. Live Preview / Demo In Here Basic Usage Masonry Layout <M

null 15 Sep 2, 2022
Skia based squircle for React Native. draws with Figma squirce style

react-native-squircle-skia Disclaimer @shopify/react-native-skia is alpha release. Use with caution. This library dependes on figma's blog article. Wh

JB Paul 11 Oct 10, 2022
Boilerplate to get started building React-based interfaces for Crestron using CH5

Getting Started with Crestron UI This project was bootstrapped with Create React App. Example component communicating with the Crestron-CH5 library: i

Mukund Salia 3 Apr 25, 2022
Edvora App is a web application based on an external API, showing data about different types of products and the user can filter these data by choosing a specific state, city or product name. Build with React.js

Edvora App is a web application based on an external API, showing data about different types of products and the user can filter these data by choosing a specific state, city or product name. Build with React.js

Kyrillos Hany 5 Mar 11, 2022