Skip to content
Open
Show file tree
Hide file tree
Changes from all commits
Commits
File filter

Filter by extension

Filter by extension

Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
10 changes: 10 additions & 0 deletions CHANGELOG.md
Original file line number Diff line number Diff line change
Expand Up @@ -5,6 +5,16 @@ All notable changes to this project will be documented in this file.
The format is based on [Keep a Changelog](https://keepachangelog.com/en/1.1.0/),
and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0.html).

## [Unreleased]

### Added

- Added native PowerPoint review comments for text, shapes, tables, and images using the modern comment format with element-attached markers.

### Changed

- Added a dedicated `demos/node/demo_comments.js` example showing how to generate native element comments.

## [4.0.1](https://github.com/gitbrent/PptxGenJS/releases/tag/v4.0.1) - 2025-06-25

### Fixed
Expand Down
75 changes: 75 additions & 0 deletions README.md
Original file line number Diff line number Diff line change
Expand Up @@ -155,6 +155,81 @@ pres.writeFile();

That's really all there is to it!

### Slide Notes

Syntax

```javascript
slide.addNotes("TEXT");
```

Example: JavaScript

```javascript
let pptx = new PptxGenJS();
let slide = pptx.addSlide();

slide.addText("Hello World!", { x: 1.5, y: 1.5, fontSize: 18, color: "363636" });
slide.addNotes("This is my favorite slide!");

pptx.writeFile({ fileName: "Sample Speaker Notes.pptx" });
```

### Native PowerPoint Comments

Add native PowerPoint review comments directly to supported slide objects. Comment badges stay attached to the element in PowerPoint.

Supported objects: `addText()`, `addShape()`, `addTable()`, and `addImage()`.

Syntax

```javascript
slide.addText("Quarterly Results", {
x: 1.0,
y: 1.0,
w: 3.5,
h: 0.5,
comment: "Confirm the final wording before sending to legal."
});
```

```javascript
slide.addShape(pptx.ShapeType.rect, {
x: 1.0,
y: 2.0,
w: 3.0,
h: 1.0,
comment: {
text: "Use the approved Q4 color palette.",
authorName: "Alex Smith",
authorInitials: "AS"
}
});
```

Example: JavaScript

```javascript
let pptx = new PptxGenJS();
let slide = pptx.addSlide();

slide.addText("Hello World!", {
x: 1.5,
y: 1.5,
fontSize: 18,
color: "363636",
comment: {
text: "This title should match the final cover wording.",
authorName: "Design Review",
authorInitials: "DR"
}
});

slide.addNotes("This is my favorite slide!");

pptx.writeFile({ fileName: "Sample Comments.pptx" });
```

## 💥 HTML-to-PowerPoint Magic

Convert any HTML `<table>` into fully formatted PowerPoint slides - automatically and effortlessly.
Expand Down
54 changes: 27 additions & 27 deletions demos/browser/js/pptxgen.bundle.js

Large diffs are not rendered by default.

2 changes: 1 addition & 1 deletion demos/browser/js/pptxgen.bundle.js.map

Large diffs are not rendered by default.

92 changes: 92 additions & 0 deletions demos/node/demo_comments.js
Original file line number Diff line number Diff line change
@@ -0,0 +1,92 @@
import pptxgen from "../../dist/pptxgen.es.js";

const pptx = new pptxgen();
const exportName = "PptxGenJS_Demo_Comments";

pptx.author = "PptxGenJS Comment Demo";
pptx.company = "PptxGenJS";

const slide = pptx.addSlide();

slide.addText("Element Comments Demo", {
x: 0.5,
y: 0.3,
w: 6.5,
h: 0.5,
fontSize: 24,
bold: true,
color: "1F1F1F",
comment: {
text: "Opening title could be shortened for the executive version.",
authorName: "Design Review",
authorInitials: "DR",
},
});

slide.addShape(pptx.shapes.ROUNDED_RECTANGLE, {
x: 0.6,
y: 1.1,
w: 4.2,
h: 1.0,
fill: { color: "E8F2FF" },
line: { color: "5B9BD5", width: 1 },
comment: "This summary box needs final compliance wording.",
});

slide.addText("Summary callout", {
x: 0.9,
y: 1.38,
w: 3.4,
h: 0.3,
fontSize: 18,
bold: true,
color: "1F1F1F",
});

slide.addTable(
[
[{ text: "Segment", options: { bold: true, fill: { color: "D9EAD3" } } }, { text: "Value", options: { bold: true, fill: { color: "D9EAD3" } } }],
["Commercial", "$4.2M"],
["Private Banking", "$2.8M"],
["Treasury", "$1.1M"],
],
{
x: 0.7,
y: 2.5,
w: 3.8,
border: { type: "solid", color: "8FAADC", pt: 1 },
fontSize: 14,
comment: {
text: "Reconcile these figures against the month-end close before release.",
authorName: "Finance QA",
authorInitials: "FQ",
},
}
);

slide.addImage({
path: "../common/images/cc_logo.jpg",
x: 5.6,
y: 1.4,
w: 3.3,
h: 2.0,
comment: "Replace with the approved 2026 partner logo lockup.",
});

slide.addText("Each commented element should show a native PowerPoint comment marker near its top-right corner.", {
x: 0.7,
y: 5.35,
w: 8.8,
h: 0.6,
fontSize: 12,
color: "555555",
});

pptx.writeFile({ fileName: exportName })
.then((fileName) => {
console.log(`COMMENTS DEMO exported: ${fileName}`);
})
.catch((err) => {
console.error(`ERROR: ${err}`);
process.exitCode = 1;
});
54 changes: 27 additions & 27 deletions dist/pptxgen.bundle.js

Large diffs are not rendered by default.

2 changes: 1 addition & 1 deletion dist/pptxgen.bundle.js.map

Large diffs are not rendered by default.

Loading