Corespeed PPTX — PowerPoint Generation with JSX

Generate professional .pptx files using TypeScript JSX via @pixel/pptx.

Workflow

1. 1. Write a .tsx file that exports a deck variable
2. Run the generator to produce the INLINECODE4

Usage

CODEBLOCK0

• - First arg: path to your .tsx slide file (must export const deck = ...)
• Second arg: output .pptx filename
• INLINECODE8 — structured JSON output for agent consumption

Design Principles

These rules are distilled from the three masters of presentation design:

• - Edward Tufte (Yale professor, The Visual Display of Quantitative Information) — maximize data-ink ratio, remove chartjunk, every pixel must earn its place
• Nancy Duarte (designed Al Gore's An Inconvenient Truth, author of Slide:ology) — one idea per slide, visual contrast creates meaning, the audience is the hero
• Garr Reynolds (author of Presentation Zen) — restraint, whitespace, signal over noise, simplicity is the ultimate sophistication

Follow these rules for every deck:

1. 1. One idea per slide (Duarte). If you need a second point, make a second slide.
2. Font ≥ 24pt body, ≥ 32pt titles. If the audience can't read it from the back row, it's too small.
3. Max 3 colors (Reynolds). One primary, one accent, one neutral. Derive the rest as tints/shades.
4. Whitespace is design (Reynolds). Generous padding (≥ 0.5in slide margins, ≥ 0.2in element padding). Never fill every inch.
5. Contrast over decoration (Duarte). No drop shadows unless essential. No gradients for ornament. Use contrast (size, weight, color) to create hierarchy.
6. Data-ink ratio (Tufte). Every pixel should convey information. Remove gridlines, borders, and labels that don't add meaning.
7. Visual hierarchy. Title → Key number/chart → Supporting text. The eye should know where to go instantly.
8. Consistent rhythm. Same gaps, same padding, same font sizes across all slides. Use layout defaults on <Presentation>.
9. 16:9 widescreen. Always set slideWidth={u.in(13.33)} slideHeight={u.in(7.5)} on <Presentation>. The library defaults to 4:3 which looks wrong on modern screens.

Preventing Text Overflow (critical)

The library uses fixed-size containers. Text that exceeds the container will overflow and be clipped. Follow these rules strictly:

1. 1. Use grow instead of fixed h whenever possible. Inside <Row> or <Column>, prefer grow={1} over explicit h={u.in(X)}. The layout engine will calculate the correct size.
2. Budget height for text. Each line of 14pt text needs ~0.3in. A card with title + 4 bullet points needs at minimum: 0.3 (title) + 4×0.3 (bullets) + 0.6 (padding) = 1.8in. Always round up.
3. Fewer words, never more containers. If text doesn't fit, shorten the text — don't shrink the font or the container.
4. Max 5 bullet points per card. If you need more, split into two cards or two slides.
5. Test the math. For <Align> with explicit h: count lines × 0.3in + padding × 2. If the result > h, increase h or cut text.
6. Leave 20% headroom. If you calculate 2.0in needed, set h to at least 2.4in.
7. Never nest <Align> with tight heights inside <Stack>. Use <Column> with grow instead — it flexes to fit content.
8. Safe card pattern:

Table Overflow Prevention (critical)

Tables are the most common source of overflow. Follow these rules:

1. 1. Column widths must sum to ≤ content width. For 16:9 slide with 1in padding each side: content width = 11.33in. All cols values must sum to ≤ 11.33in.

1. 2. Give tables grow weight in <Column>. <Column> distributes height equally by default. A table with 5 rows needs more space than a title. Use grow to allocate proportionally:

1. 3. Budget row height. Each row of 12pt text needs ~0.45in (text + padding). Header row: 0.45in. A 5-row table needs: 0.45 + 4×0.45 = 2.25in minimum.

1. 4. Keep cell text short. Max ~40 chars per cell. If text wraps to 2 lines, the row needs 0.65in instead of 0.45in.

1. 5. Prefer fewer rows. Max 5-6 data rows per slide. If you need more, split into two slides.

Color Palettes (reference)

Pick one palette. Don't mix.

Page Numbers

The library has no built-in page numbers. Use <Positioned> on every slide:

CODEBLOCK4

Rules:

• - Always add page numbers. They help the audience track progress and reference slides.
• <Positioned> is relative to content area, NOT the slide origin. Calculate: slideWidth - leftPadding - rightPadding = contentWidth. Position within those bounds.
• Use the main text color (not muted) — at 12pt it must be readable.
• Place <PageNum> as the last child of <Slide> — PPTX has no z-index, rendering order = declaration order. Last element renders on top, so page numbers are never occluded by other content.

Writing Slides

Create a .tsx file. It must export a deck variable:

CODEBLOCK5

Components

Layout

Content

Charts

Units & Colors

CODEBLOCK6

Styling

Style props are plain objects. Use style on any component:

CODEBLOCK7

Backgrounds support solid, linear-gradient, and image.

Example: Professional Multi-Slide Deck (Anthropic-warm style)

CODEBLOCK8

Notes

• - No manual setup required. Deno auto-downloads @pixel/pptx from JSR on first run.
• The .tsx file must export const deck = ... (the JSX Presentation element).
• Use --json for structured output: INLINECODE102
• Output opens in PowerPoint, Google Slides, LibreOffice Impress, and Keynote.
• Use timestamps in filenames: yyyy-mm-dd-hh-mm-ss-name.pptx.

Support

Built by Corespeed. If you need help or run into issues:

• - 💬 Discord: discord.gg/mAfhakVRnJ
• 🐦 X/Twitter: @CoreSpeedio
• 🐙 GitHub: github.com/corespeed-io/skills