mdx-deck-live-code Demonstration 🤯

Live code JSX and Javascript with previews, directly in your slides

Try editing the Hello World example below! 👇🏾

🙋‍♀️ 🌍

<p>🙋‍♀️ 🌍</p>

There's a size for everyone

Small? 👇

<p>Small? 👇</p>

There's a size for everyone

Medium? 👉

<h3>Medium? 👉</h3>

There's a size for everyone

Large? 👆

<h2>Large? 👆</h2>

...or maybe just all in? 🖥

<h1>...or maybe just all in? 🖥</h1>

Customization

You can style your <LiveCode/> individually per slide, targeting each element directly:

<LiveCode
  previewProps={{
    style: {
      textAlign: 'left',
      padding: '0.5em'
      }
    }}
  editorProps={{
    style: {
      fontSize: '0.5em',
      background: '#001628'
    }
  }}
/>

<div>You can style your {"<LiveCode/>"} 
  individually per slide,
  targeting each element directly:
  <pre><code>{`<LiveCode
  previewProps={{
    style: {
      textAlign: 'left',
      padding: '0.5em'
      }
    }}
  editorProps={{
    style: {
      fontSize: '0.5em',
      background: '#001628'
    }
  }}
/>`}</code></pre>
  </div>

Or you can use the global mdx-deck theme:

export default {
  ...theme,
  liveCode: {
    container: {
      // container styles
    },
    editor: {
      // editor styles
    },
    preview: {
      // preview styles
    },
    error: {
      // error styles
    }
  }
};

<div>Or you can use the global <code>mdx-deck</code> theme:
  <pre><code>{`export default {
  ...theme,
  liveCode: {
    container: {
      // container styles
    },
    editor: {
      // editor styles
    },
    preview: {
      // preview styles
    },
    error: {
      // error styles
    }
  }
};`}</code></pre>
  </div>

Smart handling of focus and arrow keys

While in the editor, use either one of the key combos

ESC
CTRL + M (Windows and Linux)
CTRL + SHIFT + M (Mac)

To unfocus the editor, and navigate the deck again


  <div>
  <p>While in the editor, use either one of the key combos</p>
    <ul>
      <li>
        <code>ESC</code>
      </li>
      <li>
        <code>CTRL + M</code> (Windows and Linux)
      </li>
      <li>
        <code>CTRL + SHIFT + M</code> (Mac)
      </li>
    </ul>
  To unfocus the editor, and navigate the deck again
  </div>

It even does React Functional Components, thanks to react-live

Hi, I'm a Functional Component!

() => {
  const componentType = "Functional Component";
  return (<p>Hi, I'm a {componentType}!</p>)
}

... and classes

This is a class component!

class MyComp extends React.Component {
  constructor(){
    this.state = {
    value: 'class'
    };
  }
  render() {
    return (
      <div>
        <p>
          This is a {this.state.value} component!
        </p>
        <input
          onChange={
            (e) => this.setState({value: e.target.value})
          }
          value={this.state.value}
        />
      </div>
    );
  }
}

In fact, it does anything react-live does!

Hello world!

const sayWhaaat = 'Hello';
const toWhooo = 'world!';
const GreetDaPeeps = () => (
    <p>
      {sayWhaaat} {toWhooo}
    </p>
  );
render(GreetDaPeeps);

You can reference external files as code, instead of defining the code inline.

Install the raw-loader package

npm install raw-loader

Use the raw-loader in the LiveCode component

Example:

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

BONUS
- This also makes formatting with Prettier easier
- ... and makes it possible to have empty lines in the code, which usually is not possible when writing the code inline

<div style={{ textAlign: 'left', fontSize: '0.8em', wordWrap: 'break-word' }}>
  You can reference external files as code, instead of defining the code inline.
  <ol>
    <li>
      Install the <code>raw-loader</code> package
    </li>
    <ul>
      <li>
        <code>npm install raw-loader</code>
      </li>
    </ul>
    <li>
      Use the <code>raw-loader</code> in the <code>LiveCode</code> component
    </li>
    <li>
      Example:
      <pre>
        <code>{`<LiveCode
  code={
    require('!raw-loader!./external-file.js')
  }
/>`}</code>
      </pre>
    </li>
    <li>
      BONUS
      <ul>
        <li>This also makes formatting with Prettier easier</li>
        <li>
          ... and makes it possible to have empty lines in the code, which
          usually is not possible when writing the code inline
        </li>
      </ul>
    </li>
  </ol>
</div>;

🙋‍♀️

See more at the mdx-deck-live-code repository

By @DrReinhold