Generic Slide Deck

A data-driven presentation framework built with React + Vite. Design your slide layouts once as React components, then generate presentations by editing a single data file (src/slides.js).

Built to be driven by an AI agent — give it context about a customer/prospect and it generates slides.js with tailored content.

Quick Start

npm install
npm run dev

Open the URL shown in terminal. Navigate with arrow keys or click (left third = back, right two-thirds = forward).

How It Works

src/slides.js          ← THE ONLY FILE YOU EDIT PER PRESENTATION
src/slides/*.jsx       ← Slide layout components (edit once, reuse forever)
src/theme.js           ← Colors and fonts (your brand)
src/DeckApp.jsx        ← Navigation, scaling, keyboard/click handlers
src/SlideRenderer.jsx  ← Maps slide type → component

All slides render at 1920×1080 and scale to fit any viewport.

Slide Types

title

Full-screen headline with subtitle.

{
  type: 'title',
  headline: 'Line One\nLine Two',  // \n for line breaks
  subtitle: 'Optional subtitle',
}

section

Accent-colored divider slide.

{
  type: 'section',
  headline: 'Section Title',
  subtitle: 'Optional subtitle',
}

twoColumn

Headline with two side-by-side columns.

{
  type: 'twoColumn',
  headline: 'Comparison',
  left: { title: 'Column A', body: 'Left column content.' },
  right: { title: 'Column B', body: 'Right column content.' },
}

cardGrid

Headline with a grid of cards (auto-sizes 1-3 columns).

{
  type: 'cardGrid',
  headline: 'Key Points',
  body: 'Optional intro text.',
  cards: [
    { label: '01', title: 'Card Title', description: 'Card body.' },
    // ... up to 6 cards
  ],
  footnote: 'Optional footnote.',
}

bullets

Numbered list. Items can be strings or { title, description } objects.

{
  type: 'bullets',
  headline: 'Steps',
  items: [
    'Simple string item',
    { title: 'Rich item', description: 'With a description.' },
  ],
}

discussion

Pill/chip seeds for brainstorming or Q&A.

{
  type: 'discussion',
  headline: 'Discussion',
  seeds: ['Topic one', 'Topic two', 'Topic three'],
}

image

Centered image with optional headline and caption. Place images in public/.

{
  type: 'image',
  headline: 'Architecture',
  src: '/diagram.png',
  alt: 'System architecture',
  caption: 'Optional caption text.',
}

quote

Large pull quote with attribution.

{
  type: 'quote',
  quote: 'The quote text.',
  attribution: 'Person Name',
  role: 'Title, Company',
}

Customization

Brand / Theme

Edit src/theme.js to set your colors and fonts:

const theme = {
  colors: {
    bg: '#FFFFFF',
    text: '#1a1a1a',
    textMuted: '#666666',
    textLight: '#999999',
    accent: '#2563eb',       // your brand color
    accentLight: '#dbeafe',  // light variant for pills/badges
    border: '#e5e5e5',
    cardBg: '#f9f9f9',
  },
  fonts: {
    heading: "Georgia, serif",
    body: "system-ui, sans-serif",
    mono: "ui-monospace, monospace",
  },
};

Custom Fonts

1. Add .woff2 files to public/fonts/
2. Add @font-face declarations in index.html
3. Reference them in theme.js

Adding a New Slide Type

1. Create src/slides/MySlide.jsx — receives { slide } prop
2. Register it in src/SlideRenderer.jsx:

   import MySlide from './slides/MySlide';
   const RENDERERS = { ..., myType: MySlide };

3. Use { type: 'myType', ... } in slides.js

AI Agent Integration

The design separates data from presentation so an AI agent can generate slides programmatically:

1. Agent gathers context (CRM data, call transcripts, account info)
2. Agent writes src/slides.js with tailored content
3. npm run dev serves the deck
4. User iterates with the agent ("change the title", "add a use case")

The agent only needs to know the slide type schemas above — it never touches the React components.

Dependencies

• react + react-dom — UI rendering
• vite + @vitejs/plugin-react — dev server and build

No slide framework (no reveal.js, no slidev). Pure React.