August 11, 2023

Create presentation decks using MDX, React, and Next.js with Web3 capabilities


📖 Turbo Slides

Create presentation decks using MDX, React, and Next.js with Web3 capabilities


  • 📽 React-based Slideshow
  • ✍️ Write using Markdown, React components, even HTML!
  • 🎨 Themeable with Tailwind or Styled Components
  • ♻️ Sync slides between browser tabs
  • 👨‍💻 Presentation Mode
  • 📝 Speaker Notes

Getting Started

  1. Clone the project: `git clone
  2. Install dependencies: npm i or yarn
  3. Run the dev server: npm run dev or yarn dev
  4. Edit the first slide in /pages/index.mdx and save to see changes!

When you're done, run npm run build && npm run export or yarn build && yarn export will create a static app you can deploy anywhere (or use locally). See below for more details.


This project is easy to build locally or using a host with build services (like Netlify or Now).

  1. ⚙️ Run the build process: yarn export
  2. 🚀 Upload the static contents of out folder to host/CDN (or run the out/index.html locally)

How to Use

💬 Changing the Title/Date/etc

The default theme includes a title, date, author (and link to the author's website) in of the

component. You can edit this data inside the site.config.js file.

✍️ Writing JSX

You can use JSX in a few ways in your MDX files:

  • You can use the syntax with HTML (
  • You can import React component from other files (import Button from "../components/Button"). Then you can use that component anywhere in that MDX file. The path to the component is relative to the MDX file.
  • You can use any React component imported into the (inside /components/MDXProvider.js). This allows you to use the component without importing it inside each MDX file.
  • You can define React components inside MDX files and then use them. MDX supports the use of JS inside files, like exporting variables, or in this case — defining new functions. const Button = () =>

Check out the MDX docs for more information on the syntax.

📃 Creating Slide Pages

You can create new slide pages by making new .mdx files inside the /pages/ directory. Each slide is separated by a markdown divider (---).

You have to wrap the contents of each .mdx file with a component. This is what breaks up each slide page into individual slides using the markdown dividers.

Slide pages represent real pages - so page-2.mdx == By using the next prop on the component you can control the next page you navigate to (after you go through all the slides).

// Navigates to after all slides complete

🎨 Theming the Slideshow

Theming is accomplished with CSS custom properties and/or Styled Components.

Design tokens are stored as CSS custom properties inside the SlidePage layout (/layouts/SlidePage.jsx), which are injected into the app using Styled Component's global styling utility. There you can change the color of text, background colors, fonts, etc.

The actual CSS styles of the Slideshow are also stored in the SlidePage layout. There you can change the padding of slides, alignment of quotes, etc.

When the Markdown is parsed into HTML, you can replace HTML with React components. These "swaps" are handled by the component. You can import custom components and swap elements (like a