mdx-deck README

The project's README from github.com/jxnblk/mdx-deck. As one markdown file: README.md.

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.

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.

MIT License

mdx-deck (jxnblk/mdx-deck)

Searching Database…

11.5K ·GitHub
Mdx-deck
Что это такое?MDX Deck — это инструмент на основе React для создания презентаций: слайды пишутся в Markdown с вставками JSX-компонентов (MDX), а не в обычном приложении для слайдов.
Это приложение для дизайна или я пишу слайды в коде?Это инструмент на основе кода: слайды пишутся в файле .mdx (Markdown со встроенными компонентами React) и запускаются через CLI и сервер разработки, а не собираются перетаскиванием элементов в графическом интерфейсе.
Как создать и запустить презентацию?Создайте файл .mdx, отделите каждый слайд символами '---', добавьте в package.json скрипт запуска, который передаёт MDX Deck CLI путь к этому файлу, затем запустите сервер разработки и переключайте слайды стрелками на клавиатуре.
Нужно ли знать React или JSX, чтобы пользоваться этим?Да: MDX Deck построен на MDX, поэтому вы пишете в Markdown, но можете импортировать компоненты React и выводить их прямо в тексте с помощью синтаксиса JSX.
Презентация работает в браузере или в нативном приложении?Она работает как веб-приложение через локальный сервер разработки (построенный на Gatsby), а презентации можно экспортировать, например, в PDF.
Как менять тему оформления или стили презентации?MDX Deck использует Theme UI и Emotion для стилей, поэтому почти любую часть презентации можно настроить через тему. Также есть несколько встроенных тем, между которыми можно переключаться.
Какие встроенные компоненты есть для презентаций?Есть компонент Notes для заметок докладчика, компонент Head для тегов в заголовке документа, компоненты Header и Footer для постоянного содержимого и компонент Steps для поэтапного показа содержимого на слайде.
Есть ли режим докладчика?Да: нажатие Option+P включает Presenter Mode, который показывает превью следующего слайда, таймер и заметки докладчика. Презентацию можно открыть сразу в двух синхронизированных окнах.
Могут ли у слайдов быть собственные макеты?Да, каждый слайд может использовать собственный компонент макета, который оборачивает его MDX-содержимое. Так можно по-разному оформлять или шаблонизировать слайды с помощью CSS-in-JS.
What are similar projects?spectacle, marp, nodeppt, docz, bolt-slides, styled-components, tamagui, reveal.js
Which topics is it in?presentations, css-in-js, mdx, slides, jsx, presentation, reactjs, markdown, productivity, react, npm, frontend
Creator
jxnblk
Size
10.2 MB
Stars
11.5K
Updated
CommitAug 03
Age
8y
Commits · 90 Days