Corespeed PPTX — PowerPoint Generation with JSX#

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

Workflow#

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

Usage#

bash

deno run --allow-read --allow-write --config {baseDir}/scripts/deno.json {baseDir}/scripts/generate.ts slides.tsx output.pptx [--json]

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

Writing Slides#

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

tsx

/** @jsxImportSource @pixel/pptx */
import { Align, clr, Presentation, Slide, Text, u } from "@pixel/pptx";

export const deck = (
  <Presentation title="My Deck">
    <Slide background={{ kind: "solid", color: clr.hex("F7F4EE") }}>
      <Align x="center" y="center" w={u.in(8)} h={u.in(1.5)}>
        <Text.P style={{ fontSize: u.font(32), bold: true }}>
          Hello, World!
        </Text.P>
      </Align>
    </Slide>
  </Presentation>
);

Components#

Layout#

ComponentPurpose<Presentation>Root container. Props: title, layout``<Slide>Single slide. Props: background, layout``<Row>Horizontal flex layout. Has <Row.Start>, <Row.End>``<Column>Vertical flex layout. Has <Column.Start>, <Column.End>``<Stack>Overlapping layers<Align x y w h>Center/align a single child<Positioned x y w h>Absolute positioning

Content#

ComponentPurpose<Text>Multi-paragraph text body. Props: gap, style``<Text.P>Single paragraph<Text.Span>Inline text run<Text.Bold>, <Text.Italic>, <Text.Underline>Inline formatting<Text.Link href="...">Hyperlink<Shape preset="...">Shape: rect, roundRect, ellipse, etc.<Image src={bytes} w={...} h={...} />Embed image (Uint8Array)<Table cols=[...]>Table with <Table.Row> and <Table.Cell>

Charts#

ComponentPurpose<Chart.Bar data={[...]} category="key" series={[...]} />Bar chart<Chart.Line data={[...]} category="key" series={[...]} />Line chart<Chart.Pie data={[...]} category="key" series={[...]} />Pie chart<Chart.Donut data={[...]} category="key" series={[...]} />Donut chart

Units & Colors#

tsx

import { u, clr } from "@pixel/pptx";

u.in(1)       // inches
u.cm(2.5)     // centimeters
u.pt(12)      // points
u.pct(50)     // percentage
u.font(24)    // font size (hundredths of a point)

clr.hex("1F4E79")  // hex color (no #)

Styling#

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

tsx

const style = {
  fill: { kind: "solid", color: clr.hex("1F4E79") },
  fontSize: u.font(24),
  fontColor: clr.hex("FFFFFF"),
  bold: true,
  italic: false,
  align: "center",
  verticalAlign: "middle",
  padding: u.in(0.2),
  shadow: {
    color: clr.hex("000000"),
    blur: u.emu(12000),
    distance: u.emu(4000),
    angle: 50,
    alpha: u.pct(18),
  },
  bullet: { kind: "char", char: "•" },
};

Backgrounds support solid, linear-gradient, and image.

Example: Multi-Slide Deck#

tsx

/** @jsxImportSource @pixel/pptx */
import {
  Align, Chart, clr, Column, Presentation, Row, Shape, Slide,
  Stack, Table, Text, u, type Style,
} from "@pixel/pptx";

const title: Style = {
  fill: { kind: "solid", color: clr.hex("1F4E79") },
  fontSize: u.font(28), fontColor: clr.hex("FFFFFF"), bold: true,
  verticalAlign: "middle", padding: u.in(0.2),
};

export const deck = (
  <Presentation title="Q2 Report" layout={{ rowGap: u.in(0.3), columnGap: u.in(0.3) }}>
    <Slide background={{ kind: "solid", color: clr.hex("F7F4EE") }}>
      <Column>
        <Shape preset="roundRect" h={u.in(1.2)} style={title}>
          <Text.P>Q2 Report</Text.P>
        </Shape>
        <Row>
          <Stack grow={1}>
            <Shape preset="roundRect" style={{ fill: { kind: "solid", color: clr.hex("FFFFFF") } }} />
            <Align x="center" y="center" w={u.in(4)} h={u.in(3)}>
              <Chart.Bar
                data={[
                  { q: "Q1", rev: 8 }, { q: "Q2", rev: 12 },
                  { q: "Q3", rev: 10 }, { q: "Q4", rev: 15 },
                ]}
                category="q"
                series={[{ name: "Revenue", value: "rev", color: clr.hex("2678B4") }]}
                labels
              />
            </Align>
          </Stack>
          <Table cols={[u.in(1.5), u.in(1)]} grow={1}>
            <Table.Row height={u.in(0.4)}>
              <Table.Cell style={{ bold: true }}>Metric</Table.Cell>
              <Table.Cell style={{ bold: true }}>Value</Table.Cell>
            </Table.Row>
            <Table.Row height={u.in(0.4)}>
              <Table.Cell>Revenue</Table.Cell>
              <Table.Cell>$1.2M</Table.Cell>
            </Table.Row>
          </Table>
        </Row>
      </Column>
    </Slide>
  </Presentation>
);

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: {"ok": true, "file": "...", "size": 1234}
• 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: @CoreSpeed_io
• 🐙 GitHub: github.com/corespeed-io/skills