Creating Decks

Learn how to create slide decks from scratch using AI agents and DexCode's MDX format.

Deck Structure

Every DexCode deck is a directory inside decks/ containing MDX slide files and a configuration file:

plaintext

decks/my-deck/
├── deck.config.ts     # Theme, title, overlays
├── a-cover.mdx        # Each file = one slide
├── about.mdx
├── features.mdx
└── assets/            # Static assets (images, etc.)

Slides are ordered alphabetically by filename, or via an optional slide-order.ts file.

The deck.config.ts File

The deck configuration defines your deck's title, theme, and optional overlays:

typescript

import { defineConfig } from "../../src/lib/deck-config";
 
export default defineConfig({
  title: "Q3 Roadmap Review",
  theme: {
    colors: {
      primary: "#e17120",
      background: "#111111",
      text: "#e8e8e8",
    },
    fonts: {
      heading: "Inter, sans-serif",
      body: "Noto Sans JP, sans-serif",
    },
  },
  logo: {
    src: "/my-logo.svg",
    position: "top-right",
  },
  copyright: {
    text: "© 2026 My Company",
    position: "bottom-left",
  },
  transition: "fade",
});

Writing Slides in MDX

Each slide is an MDX file that combines Markdown with React components:

mdx

---
type: content
---
 
# Our Product Roadmap
 
## Q3 Priorities
 
- **Performance**: 2x faster rendering
- **Integrations**: Slack, GitHub, Linear
- **AI Features**: Smart suggestions
 
<Chart
  type="bar"
  data={[
    { name: "Q1", value: 120 },
    { name: "Q2", value: 180 },
    { name: "Q3", value: 250 },
  ]}
/>

AI-Assisted Creation

The most efficient way to create decks is through AI agents:

Single-Prompt Generation

bash

> Create a 12-slide investor pitch deck in decks/investor-pitch.
  Cover: company name "Acme", tagline "Build faster".
  Include: problem, solution, market size, traction, team, financials, ask.

Context-Aware Generation

Point the agent at your project for context-aware slides:

bash

> Create a sprint review deck with 8 slides in decks/sprint-review.
  Summarize the work from ./my-project since last Monday.
  Focus on the API changes and the new dashboard feature.

Slide Types

DexCode includes 12 built-in slide types. Specify a type in the frontmatter:

mdx

---
type: cover
---

Available types: content, cover, section, comparison, stats, timeline, image-left, image-right, image-full, quote, agenda, ending.

Additionally, 100+ Showcase templates provide pre-built designs for common patterns like pricing tables, team grids, FAQ layouts, dashboards, diagrams, and more.

Components

Explore all built-in components for your slides.