A component for mdx-deck for live coding directly in your slides. 🤯
npm install --save-dev mdx-deck-live-code
- ↕️ Supports different sizes out of the box
- 🖼 Start live edits with a blank canvas - or with some code pre-filled
- 🎨 Fully supports custom styles - either directly on the individual components or using the global theme
- 👏 ... and everything else react-live does!
Follow @DrReinhold for updates
⚠️ This library is ONLY intended to work with your mdx-deck slides. It doesn't magically add live coding abilities to your PowerPoint or Keynote slides, even though that would be pretty slick.
The code for demo is located in the
🐣 Getting started
LiveCode component at the top of your
deck.mdx file (or in a slide if you're only using it once).
<LiveCode /> component as a top-level component in a slide
---<LiveCode="How to greet people"="small"="<p>Hello World!</p>"/>---
<LiveCode /> is intended to be used as its own slide.
It supports the following props:
||string||The initial code that is pre-filled in the editor and preview. See Importing code from external files on advanced usage.|
||string||Title of the slide, shown in the top. Is not shown if
||The size of the live code component, relative to the viewport size.|
||Whether the error panel at the bottom should be shown or not on parse errors|
|providerProps||object||Any additional props to pass to the
|editorProps||object||Any additional props to pass to the
|previewProps||object||Any additional props to pass to the
|errorProps||object||Any additional props to pass to the
See the example
deck.mdx for examples on using the different features.
⤴ Importing code from external files
deck.mdx file can become quite a mess if you intend to have large chunks of code in your
code props. Luckily the
raw-loader library is supported out-of-the-box, so you can declare the code in external files, instead of writing it as an inline string.
To do that, first install the raw-loader package.
npm install --save-dev raw-loader
Then, in the
code prop, reference another file using the
<LiveCode = />
⚠️ Current issues
- Editing the code currently doesn't sync between the presenter and observer instances. Therefore you need to edit the code in the observer window, if you want your audience to see it❗️❗️❗️
- The carret often becomes invisible, if it is moved outside the non-scrolled area. Still investigating, help wanted.
🙏 Related / Credits
- mdx-deck by the incredible Brent Jackson
- react-live which this library uses internally, by the astonishing Formidable Labs
- CodeSurfer (React component for scrolling, zooming and highlighting static code) which inspired this library, by the fantastic Rodrigo Pombo
- mdx-code - (Similar to this library it delivers a JS playground using RunKit), by the marvelous Pranay Prakash
- Component Playground in Spectacle which is similar to this library, but for slides built with Spectacle instead of mdx-deck slides. Also by the astonishing Formidable Labs
Ideas and feedback are ALWAYS welcome, just submit an issue.
Pull Requests are also very welcome, but please always make PRs into the
The library is built using TypeScript, bundled with Microbundle, formatted with Prettier, linted with TSLint and markdownlint, packaged with yarn, hosted on Netlify and developed with love ❤️ and sweat 💦.
yarn devstarts the TypeScript building of the library.
yarn examplestarts the demo in the
- I recommend that you use the example to test your changes, as that contains all the relevant use cases of the library. To do that, run
yarn setup-dev, which takes care of installing and linking the necessary dependencies.
- Then run
yarn startto start the development transpiler and the example in watch mode concurrently.
- Submit awesome PRs.
Released under the Do No Harm License (draft)