diapos

Diapos

Diapos is a React-based presentation framework.

Write slides in TSX, present in the browser!

Demo

Quick Start

npx create-diapos my-slides
cd my-slides
bun install
bun dev

Open http://localhost:5173 for the presenter view, click "Play" or open http://localhost:5173/#/projector for the projector view. Those two tabs are connected.

Agent Skill

An agent skill that teaches AI coding agents how to create presentations and theme packs also can be used.

Example

import { Deck, Slide, Title, Heading, Text, BulletPoints, Item, Code } from 'diapos'

function MyPresentation() {
  return (
    <Deck>
      <Slide>
        <Title title="Hello, Diapos!" subtitle="Slides as React components" />
      </Slide>
      <Slide notes="Walk through the key points">
        <Heading>Why Diapos?</Heading>
        <BulletPoints>
          <Item pause>Write slides in React</Item>
          <Item pause>Presenter mode with speaker notes</Item>
        </BulletPoints>
      </Slide>
      <Slide>
        <Heading as="h3">Quick Example</Heading>
        <Code code={`const x = 1`} language="ts" />
      </Slide>
      <Slide>
        <Title title="Thank You" />
      </Slide>
    </Deck>
  )
}

Navigation

Key	Action
-> Down Space	Next slide
<- Up	Previous slide
Home	First slide
End	Last slide
F	Toggle fullscreen

Click the left or right half of the screen to navigate.

Documentation

• Getting Started
• Components
• Theming
• Presenting
• Hooks

License

MIT