mdx-deck-live-code 🤯 reinhold.is/live-coding-in-slides

A component for mdx-deck for live coding directly in your slides. 🤯

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.

🎭 Check out a live demo here

The code for demo is located in the /example directory.

🐣 Getting started

Import the LiveCode component at the top of your deck.mdx file (or in a slide if you're only using it once).

import { LiveCode } from 'mdx-deck-live-code';

Use the <LiveCode /> component as a top-level component in a slide

---
<LiveCode
  title="How to greet people"
  size="small"
  code="<p>Hello World!</p>"
/>
---

🐓 Usage

The <LiveCode /> 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.
errors	boolean	`true`	Whether the error panel at the bottom should be shown or not on parse errors
providerProps	object		Any additional props to pass to the `<LiveProvider />` component
editorProps	object		Any additional props to pass to the `<LiveEditor />` component
previewProps	object		Any additional props to pass to the `<LivePreview />` component
errorProps	object		Any additional props to pass to the `<LiveError />` component

Under the hood this <LiveCode /> 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.

⤴ Importing code from external files

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.

npm install --save-dev raw-loader

Then, in the code prop, reference another file using the require('!raw-loader!PATH-TO-FILE')-syntax.

<LiveCode code={require('!raw-loader!./external-file.js')} />

⚠️ 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

🤝 Contributing

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 💦.

yarn dev starts the TypeScript building of the library.
yarn example starts the demo in the example/ folder.
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 start to start the development transpiler and the example in watch mode concurrently.
Submit awesome PRs.

📝 License

Released under the Do No Harm License (draft)

By @DrReinhold

JReinhold/mdx-deck-live-code

JReinhold

Reviews

Repository Details