[{"data":1,"prerenderedAt":-1},["ShallowReactive",2],{"project-70630":3},{"id":4,"name":5,"fullName":6,"owner":7,"repo":5,"description":8,"homepage":9,"htmlUrl":10,"language":11,"languages":10,"totalLinesOfCode":10,"stars":12,"forks":13,"watchers":14,"openIssues":15,"contributorsCount":16,"subscribersCount":16,"size":16,"stars1d":17,"stars7d":18,"stars30d":19,"stars90d":16,"forks30d":16,"starsTrendScore":20,"compositeScore":21,"rankGlobal":10,"rankLanguage":10,"license":22,"archived":23,"fork":23,"defaultBranch":24,"hasWiki":23,"hasPages":25,"topics":26,"createdAt":10,"pushedAt":10,"updatedAt":41,"readmeContent":42,"aiSummary":43,"trendingCount":16,"starSnapshotCount":16,"syncStatus":44,"lastSyncTime":45,"discoverSource":46},70630,"mdx-deck","jxnblk\u002Fmdx-deck","jxnblk","♠️ React MDX-based presentation decks","https:\u002F\u002Fmdx-deck.jxnblk.com",null,"JavaScript",11492,598,77,95,0,5,9,10,15,83.83,"MIT License",false,"master",true,[27,28,29,30,31,32,33,5,34,35,36,37,38,39,40],"deck","gatsby","gatsby-theme","gatsbyjs","keynote","markdown","mdx","presentation","presentation-deck","react","reactjs","slides","theme-ui","zero-config","2026-06-12 04:00:56","![](https:\u002F\u002Fs3.amazonaws.com\u002Fjxnblk\u002Fmdx-deck-2.gif)\n\n# MDX Deck \u003Cimg src='docs\u002Face.png' width='24' height='24' \u002F>\n\nAward-winning React [MDX][]-based presentation decks\n\n[![Build Status][badge]][circleci]\n[![Version][]][npm]\n[![Downloads][]][npm]\n\n[badge]: https:\u002F\u002Fflat.badgen.net\u002Fgithub\u002Fstatus\u002Fjxnblk\u002Fmdx-deck\u002Fmaster\u002Fci\u002Fcircleci\n[circleci]: https:\u002F\u002Fcircleci.com\u002Fgh\u002Fjxnblk\u002Fmdx-deck\n[version]: https:\u002F\u002Fflat.badgen.net\u002Fnpm\u002Fv\u002Fmdx-deck\n[downloads]: https:\u002F\u002Fflat.badgen.net\u002Fnpm\u002Fdm\u002Fmdx-deck\n[npm]: https:\u002F\u002Fnpmjs.com\u002Fpackage\u002Fmdx-deck\n\n- :memo: Write presentations in markdown\n- :atom_symbol: Import and use [React components](#imports)\n- :nail_care: Customizable [themes](#theming) and components\n- :zero: Zero-config CLI\n- :tipping_hand_woman: [Presenter mode](#presenter-mode)\n- :notebook: [Speaker notes](#speaker-notes)\n\n[View demo](https:\u002F\u002Fmdx-deck.jxnblk.com)\n\n- [Getting Started](#getting-started)\n- [Using MDX](#using-mdx)\n- [Theming](#theming)\n- [Components](#components)\n- [Layouts](#layouts)\n- [Presenter Mode](#presenter-mode)\n- [Keyboard Shortcuts](#keyboard-shortcuts)\n- [CLI Options](#cli-options)\n- [Videos & Articles](#videos-articles)\n- [Examples](#examples)\n\n## Getting Started\n\n```sh\nnpm i -D mdx-deck\n```\n\nCreate an [MDX][] file and separate each slide with `---`.\n\n````mdx\n\n# Hello\n\n---\n\n## This is my deck\n\n---\n\n## The End\n\n````\n\nAdd a run script to your `package.json` with the MDX Deck CLI\npointing to the `.mdx` file to start the development server:\n\n```json\n\"scripts\": {\n  \"start\": \"mdx-deck deck.mdx\"\n}\n```\n\nStart the development server:\n\n```sh\nnpm start\n```\n\nUse the left and right arrow keys to navigate through the presentation.\n\n## Using MDX\n\nMDX uses Markdown syntax and can render React components inline with JSX.\n\n### Imports\n\nTo import components, use ES import syntax separated with empty lines between any markdown or JSX syntax.\n\n```mdx\nimport { Box } from 'theme-ui'\n\n\u003CBox color=\"tomato\">Hello\u003C\u002FBox>\n```\n\nRead more about MDX syntax in the [MDX Docs][mdx].\n\n## Theming\n\n\u003Cdiv>\n  \u003Cimg src='docs\u002Fimages\u002Ffuture.png' width='256' \u002F>\n  \u003Cimg src='docs\u002Fimages\u002Fcomic.png' width='256' \u002F>\n  \u003Cimg src='docs\u002Fimages\u002Fyellow.png' width='256' \u002F>\n\u003C\u002Fdiv>\n\nMDX Deck uses [Theme UI][] and [Emotion][] for styling, making practically any part of the presentation themeable.\nIt also includes several built-in themes to change the look and feel of the presentation.\n\n- See the list of available [Themes](docs\u002Fthemes.md)\n- Read more about theming in the [Theming docs](docs\u002Ftheming.md).\n\n## Components\n\nMDX Deck includes built-in components to help with creating presentations,\na `Notes` component for adding speaker notes,\na `Head` component for the document head,\n`Header` and `Footer` components for persistent header and footer content,\nand a `Steps` component for adding multiple intermediate steps in a single slide.\n\nRead more in the [Components](docs\u002Fcomponents.md) docs.\n\n### Third-Party Components\n\nThese optional libraries are intended for use with MDX Deck.\n\n- [CodeSurfer][]: React component for scrolling, zooming and highlighting code.\n- [mdx-code][]: Runnable code playgrounds for MDX Deck.\n- [mdx-deck-live-code][]: Live React and JS coding in slides.\n\n_Note: please check with version compatibility when using these libraries._\n\n[codesurfer]: https:\u002F\u002Fgithub.com\u002Fpomber\u002Fcode-surfer\n[mdx-code]: https:\u002F\u002Fgithub.com\u002Fpranaygp\u002Fmdx-code\n[mdx-deck-live-code]: https:\u002F\u002Fgithub.com\u002FJReinhold\u002Fmdx-deck-live-code\n\n## Layouts\n\nEach slide can include a custom layout around its content,\nwhich can be used as a *template* for visually differentiating slides.\n\n```js\n\u002F\u002F example Layout.js\nimport React from 'react'\n\nexport default ({ children }) => (\n  \u003Cdiv\n    style={{\n      width: '100vw',\n      height: '100vh',\n      backgroundColor: 'tomato',\n    }}>\n    {children}\n  \u003C\u002Fdiv>\n)\n```\n\n```mdx\nimport Layout from '.\u002FLayout'\n\n# No Layout\n\n---\n\n\u003CLayout>\n\n# Custom Layout\n\n\u003C\u002FLayout>\n```\n\nThe layout component will wrap the MDX elements within that slide,\nwhich means you can add custom layout styles\nor style child elements with CSS-in-JS.\n\n## Presenter Mode\n\nPress `Option + P` to toggle *Presenter Mode*,\nwhich will show a preview of the next slide, a timer, and speaker notes.\n\n![presenter mode screenshot](docs\u002Fimages\u002Fpresenter-mode.png)\n\nThe presentation can be opened in two separate windows at the same time,\nand it will stay in sync with the other window.\n\n## Keyboard Shortcuts\n\n| Key         | Description                                  |\n| ----------- | -------------------------------------------- |\n| Left Arrow, Page Up, Shift + Space  | Go to previous slide (or step in [Steps][]) |\n| Right Arrow, Page Down, Space | Go to next slide (or step in [Steps][])     |\n| Option + P  | Toggle [Presenter Mode](#presenter-mode)     |\n| Option + O  | Toggle Overview Mode\n| Option + G  | Toggle Grid Mode\n\n[steps]: docs\u002Fcomponents.md#steps\n\n## CLI Options\n\n```\n-p --port     Dev server port\n-h --host     Host the dev server listens to\n--no-open     Prevent from opening in default browser\n```\n\n## Videos & Articles\n\n- [Egghead Tutorial][egghead] by [Andrew Del Prete](https:\u002F\u002Fgithub.com\u002Fandrewdelprete).\n- [mdx-deck: slide decks powered by markdown and react][kcd-blog] by [Kent C. Dodds][]\n- [Make Fast & Beautiful Presentations with MDX-Deck][hw-video] by [Harry Wolff][] ([Demo][hw-demo])\n- [What is MDX][kcd-video] by [Kent C. Dodds][]\n- [Build a Custom Provider Component for MDX-Deck][ks-egghead] by [Kyle Shevlin][]\n\n[egghead]: https:\u002F\u002Fegghead.io\u002Flessons\u002Freact-build-a-slide-deck-with-mdx-deck-using-markdown-react\n[kent c. dodds]: https:\u002F\u002Fmobile.twitter.com\u002Fkentcdodds\n[kcd-video]: http:\u002F\u002Fyoutu.be\u002Fd2sQiI5NFAM?a\n[kcd-blog]: https:\u002F\u002Fkentcdodds.com\u002Fblog\u002Fmdx-deck-slide-decks-powered-by-markdown-and-react\n[hw-video]: https:\u002F\u002Fwww.youtube.com\u002Fwatch?v=LvP2EqCiQMg&feature=youtu.be\n[hw-demo]: https:\u002F\u002Fgithub.com\u002Fhswolff\u002Fmdx-deck-demo\n[harry wolff]: https:\u002F\u002Fmobile.twitter.com\u002Fhswolff\n[ks-egghead]: https:\u002F\u002Fegghead.io\u002Flessons\u002Fjavascript-build-a-custom-provider-component-for-mdx-deck\n[kyle shevlin]: https:\u002F\u002Ftwitter.com\u002Fkyleshevlin\n\n\n## Examples\n\nSee how others have used MDX Deck for their presentations.\n\n- [Design Systems & React][design-systems-react] by [Diana Mounter](https:\u002F\u002Fmobile.twitter.com\u002Fbroccolini)\n- [Bringing Brazil to the Cloud, Now][brazil-now] by [Guillermo Rauch](https:\u002F\u002Fmobile.twitter.com\u002Frauchg\u002F)\n- [Simplify React][simplify-react] by [Kent C. Dodds](https:\u002F\u002Fmobile.twitter.com\u002Fkentcdodds)\n- [I Got 99 Problems but GraphQL Ain't One][99-problems] by [Sara Vieira](https:\u002F\u002Fmobile.twitter.com\u002FNikkitaFTW)\n- [Stop de #divFest][stop-div-fest] by [Sara Vieira](https:\u002F\u002Fmobile.twitter.com\u002FNikkitaFTW)\n- [MDX, authors and richer JAMstack content][mdx-talk] by [Josh Dzielak](https:\u002F\u002Fmobile.twitter.com\u002Fdzello)\n- [Components as Data: A Cross Platform GraphQL Powered Component API][components-as-data] by [Luke Herrington](https:\u002F\u002Fmobile.twitter.com\u002Flukeherrington)\n- [A short history of webdevs future 🔮][webdev-intro] by [Hendrik Wallbaum](https:\u002F\u002Fgithub.com\u002Fhoverbaum)\n\n### Usage Examples\n\nThe following examples will open in CodeSandbox.\n\n- [Basic Example](https:\u002F\u002Fcodesandbox.io\u002Fs\u002Fgithub\u002Fjxnblk\u002Fmdx-deck\u002Ftree\u002Fmaster\u002Fexamples\u002Fbasic)\n- [Syntax Highlighting](https:\u002F\u002Fcodesandbox.io\u002Fs\u002Fgithub\u002Fjxnblk\u002Fmdx-deck\u002Ftree\u002Fmaster\u002Fexamples\u002Fsyntax-highlighting)\n- [Steps](https:\u002F\u002Fcodesandbox.io\u002Fs\u002Fgithub\u002Fjxnblk\u002Fmdx-deck\u002Ftree\u002Fmaster\u002Fexamples\u002Fsteps)\n- [Head](https:\u002F\u002Fcodesandbox.io\u002Fs\u002Fgithub\u002Fjxnblk\u002Fmdx-deck\u002Ftree\u002Fmaster\u002Fexamples\u002Fhead)\n- [Header & Footer](https:\u002F\u002Fcodesandbox.io\u002Fs\u002Fgithub\u002Fjxnblk\u002Fmdx-deck\u002Ftree\u002Fmaster\u002Fexamples\u002Fheader-footer)\n\n---\n\n### Related\n\n- [MDX][]\n- [Gatsby][]\n- [Theme UI][]\n- [Emotion][]\n- [Spectacle][]\n\n[MIT License](LICENSE.md)\n\n[mdx]: https:\u002F\u002Fmdxjs.com\u002F\n[gatsby]: https:\u002F\u002Fgatsbyjs.org\n[spectacle]: https:\u002F\u002Fgithub.com\u002FFormidableLabs\u002Fspectacle\n[emotion]: https:\u002F\u002Femotion.sh\n[theme ui]: https:\u002F\u002Ftheme-ui.com\n\n\u003C!-- examples -->\n[design-systems-react]: https:\u002F\u002Fgithub-ds.now.sh\u002F#0\n[brazil-now]: https:\u002F\u002Fbraziljs.now.sh\n[simplify-react]: https:\u002F\u002Fsimply-react.netlify.com\u002F#0\n[99-problems]: https:\u002F\u002F99-problems-graphql-aint-one.now.sh\u002F#0\n[stop-div-fest]: https:\u002F\u002Fstop-div-fest.now.sh\u002F\n[mdx-talk]: https:\u002F\u002Fmdx-talk.developermode.com\u002F\n[components-as-data]: https:\u002F\u002Fcomponentsasdata.lukeherrington.com\n[webdev-intro]: https:\u002F\u002Fwebdev-intro.talks.hoverbaum.net\u002F\n","MDX Deck 是一个基于 React 和 MDX 的演示文稿工具，允许用户使用 Markdown 语法编写幻灯片。其核心功能包括通过 Markdown 编写内容、直接导入和使用 React 组件、自定义主题及组件、零配置 CLI 启动以及提供演讲者模式和备注支持等。项目采用了 Theme UI 和 Emotion 进行样式管理，提供了丰富的内置主题和组件来增强演示效果。MDX Deck 适合需要快速创建美观且功能丰富的技术分享或教学材料的场景，特别是对于熟悉 React 生态的开发者来说更加友好。",2,"2026-06-11 03:33:06","high_star"]