• Very flexible HTML framework, so can be used with all your favourite web libraries (like React)
• My demos will be using React, but this is optional!
• No-code editor available online

Has lots of plugins built in

• Speaker notes
• Code snippets
• Markdown
• Math
• .. and allows you to build custom ones

Accessibility

Themes!

And of course...

And of course...

Animations!

It's code, so it's re-usable!

Create a boilerplate, set up layouts, make reusable components

Build with all your favourite libraries and knowledge you already have

const AboutRevealSlide = () => (
  <section data-transition="fade">
    <h3>What is Reveal.js?</h3>
    <ul>
      <li>Framework for creating presentations with HTML</li>
      <li>Open source 🥳</li>
    </ul>
    <aside class="notes">What is Reveal.js?</aside>
  </section>
);
export default AboutRevealSlide;

const AboutRevealSlide = () => (
  <SlideWithTitle title="What is Reveal.js?">
  <ul>
    <li>Framework for creating presentations with HTML</li>
    <li>Open source 🥳</li>
  </ul>
  <Note>What is Reveal.js?</Note>
</SlideWithTitle>
);
export default AboutRevealSlide;

Styled Components

const StyledComponentSlide = props => (
    <Slide {...props}>
      <StyledHeader>Styled Components</StyledHeader>
      <JSX code={styledComponents} />
    </Slide>
  );
  
  const StyledHeader = styled.h3'
    &&& {
      color: cyan;
      font-family: 'Comic Sans MS', 'Comic Sans', cursive;
    }
  ';
  
  export default StyledComponentSlide;
  

CSS animations

Potential rabbit hole with repo setup, code quality tools, deployment etc

😱

Sometimes you just don't feel like writing code 🤷‍♀️