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