A component for mdx-deck for live coding directly in your slides. 🤯
npm install mdx-deck-live-codeA component for mdx-deck for live coding directly in your slides. 🤯
!Build Status
!Dependency Status
``bash`
npm install --save-dev mdx-deck-live-code
- ⚛️ Live edit and render React components or other JavaScript directly in slides - no window switching necessary
- ↕️ 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 /example directory.
Import the LiveCode component at the top of your deck.mdx file (or in a slide if you're only using it once).
`js`
import { LiveCode } from 'mdx-deck-live-code';
Use the component as a top-level component in a slide
` Hello World!jsx`
---
size="small"
code="
/>
---
The is intended to be used as its own slide.
It supports the following props:
| Prop | Type | Default | Description |
| ------------- | ------------------------------------------------------ | ---------- | ---------------------------------------------------------------------------------------------------------------------------------------------------------------- |
| code | string | | The initial code that is pre-filled in the editor and preview. See Importing code from external files on advanced usage. |title
| | string | | Title of the slide, shown in the top. Is not shown if size is set to fullscreen |size
| | 'small' \| 'medium' \| 'large' \| 'fullscreen' | 'medium' | The size of the live code component, relative to the viewport size. |true
| errors | boolean | | Whether the error panel at the bottom should be shown or not on parse errors |
| providerProps | object | | Any additional props to pass to the component |
| editorProps | object | | Any additional props to pass to the component |
| previewProps | object | | Any additional props to pass to the component |
| errorProps | object | | Any additional props to pass to the component |
Under the hood this uses react-live, So if you want to get super fancy, take a look at the react-live API.
See the example deck.mdx for examples on using the different features.
Your 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.
`bash`
npm install --save-dev raw-loader
Then, in the code prop, reference another file using the require('!raw-loader!PATH-TO-FILE')-syntax.
`jsx`
- 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.
- 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 next branch
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 💦.
1. yarn dev starts the TypeScript building of the library.yarn example
2. starts the demo in the example/ folder.yarn setup-dev
3. 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 , which takes care of installing and linking the necessary dependencies.yarn start` to start the development transpiler and the example in watch mode concurrently.
4. Then run
5. Submit awesome PRs.
Released under the Do No Harm License (draft)
By @DrReinhold