JS to PPTX

Write JavaScript using the pptxgenjs API and download a PowerPoint file instantly — full API access, runs entirely in your browser.

JavaScript Editor— pptx is pre-initialized

pptx is a ready-made PptxGenJS instance. Add slides to it using the API below. Do not call pptx.writeFile() — the tool handles the download automatically when you click Run.

// pptx is pre-initialized — just add slides below.
// Do NOT call pptx.writeFile() — the tool handles the download.

// ─── Slide 1: Title ───────────────────────────────────────────
const s1 = pptx.addSlide();
s1.background = { color: "FFFFFF" };

// Bottom accent bar
s1.addShape(pptx.ShapeType.rect, {
  x: 0, y: 4.8, w: 10, h: 0.5,
  fill: { color: "3b82f6" }, line: { width: 0 },
});

// Title text
s1.addText("My Custom Presentation", {
  x: 0.5, y: 1.2, w: 9, h: 1.8,
  fontSize: 40, bold: true, color: "1e3a8a",
  align: "center", valign: "middle",
});

// Divider line
s1.addShape(pptx.ShapeType.rect, {
  x: 3.5, y: 3.15, w: 3, h: 0.06,
  fill: { color: "3b82f6" }, line: { width: 0 },
});

// Subtitle
s1.addText("Built with JS to PPTX — Toolsz", {
  x: 0.5, y: 3.35, w: 9, h: 0.9,
  fontSize: 18, color: "6b7280",
  align: "center", italic: true,
});

// ─── Slide 2: Bullets ─────────────────────────────────────────
const s2 = pptx.addSlide();
s2.background = { color: "FFFFFF" };

// Header band
s2.addShape(pptx.ShapeType.rect, {
  x: 0, y: 0, w: 10, h: 1.1,
  fill: { color: "1e3a8a" }, line: { width: 0 },
});
s2.addText("Key Features", {
  x: 0.4, y: 0.12, w: 9.2, h: 0.88,
  fontSize: 24, bold: true, color: "FFFFFF", valign: "middle",
});

// Bullet list
s2.addText([
  { text: "Write pure JavaScript using the pptxgenjs API", options: { bullet: true, fontSize: 18, color: "374151", paraSpaceBefore: 8 } },
  { text: "Full API access: shapes, tables, images, charts", options: { bullet: true, fontSize: 18, color: "374151", paraSpaceBefore: 8 } },
  { text: "Runs 100% in your browser — no server upload", options: { bullet: true, fontSize: 18, color: "374151", paraSpaceBefore: 8 } },
  { text: "No signup, no watermarks, completely free", options: { bullet: true, fontSize: 18, color: "374151", paraSpaceBefore: 8 } },
], { x: 0.5, y: 1.3, w: 9, h: 4.1 });

// ─── Slide 3: Table ───────────────────────────────────────────
const s3 = pptx.addSlide();
s3.background = { color: "FFFFFF" };

s3.addShape(pptx.ShapeType.rect, {
  x: 0, y: 0, w: 10, h: 1.1,
  fill: { color: "1e3a8a" }, line: { width: 0 },
});
s3.addText("Data Table", {
  x: 0.4, y: 0.12, w: 9.2, h: 0.88,
  fontSize: 24, bold: true, color: "FFFFFF", valign: "middle",
});

s3.addTable([
  [
    { text: "Product",  options: { bold: true, color: "FFFFFF", fill: { color: "1e3a8a" }, align: "center" } },
    { text: "Revenue",  options: { bold: true, color: "FFFFFF", fill: { color: "1e3a8a" }, align: "center" } },
    { text: "Growth",   options: { bold: true, color: "FFFFFF", fill: { color: "1e3a8a" }, align: "center" } },
  ],
  [{ text: "Pro Plan" }, { text: "$2.1M" }, { text: "+31%" }],
  [{ text: "Enterprise" }, { text: "$1.6M" }, { text: "+18%" }],
  [{ text: "Starter" }, { text: "$0.5M" }, { text: "+12%" }],
], {
  x: 0.5, y: 1.3, w: 9,
  colW: [3, 3, 3],
  rowH: 0.5,
  fontSize: 15,
  border: { type: "solid", pt: 1, color: "e2e8f0" },
  color: "374151",
});

.pptx

100% Client-Side

Your JavaScript runs locally in the browser — pptxgenjs generates the PPTX file directly without any server upload.

Full pptxgenjs API

Shapes, text boxes, bullet lists, tables, colors, backgrounds — everything pptxgenjs supports is available in your code.