Skip to main content

Masters and Placeholders

Slide Masters#

Generating sample slides like those shown in the Examples section are great for demonstrating library features, but the reality is most of us will be required to produce presentations that have a certain design or corporate branding.

PptxGenJS allows you to define Slide Master Layouts via objects that can then be used to provide branding functionality. This enables you to easily create a Master Slide using code.

Slide Masters are created by calling the defineSlideMaster() method along with an options object (same style used in Slides). Once defined, you can pass the Master title to addSlide() and that Slide will use the Layout previously defined. See the demo under /examples for several working examples.

The defined Masters become first-class Layouts in the exported PowerPoint presentation and can be changed via View > Slide Master and will affect the Slides created using that layout.

Properties#

Slide Master Props (SlideMasterProps)#

OptionTypeReqd?DescriptionPossible Values
titlestringYLayout title/nameunique name for this Master
backgroundBackgroundPropsbackground props(see Background Props)
marginnumberSlide margins(inches) 0.0 through Slide.width
marginarraySlide margins(inches) array of numbers in TRBL order. Ex: [0.5, 0.75, 0.5, 0.75]
objectsarrayObjects for Slideobject with type and options.
slideNumberSlideNumberPropsSlide numbers(see SlideNumber Props)

Background Props (BackgroundProps)#

OptionTypeDefaultDescriptionPossible Values
colorstring000000colorhex color code or scheme color constant. Ex: {line:'0088CC'}
transparencynumber0transparencyPercentage: 0-100

SlideNumber Props (SlideNumberProps)#

OptionTypeDefaultDescriptionPossible Values
xnumber1.0horizontal location (inches)0-n OR 'n%'. (Ex: {x:'50%'} will place object in the middle of the Slide)
ynumber1.0vertical location (inches)0-n OR 'n%'.
wnumberwidth (inches)0-n OR 'n%'. (Ex: {w:'50%'} will make object 50% width of the Slide)
hnumberheight (inches)0-n OR 'n%'.
alignstringleftalignmentleft or center or right
colorstring000000colorhex color code or scheme color constant. Ex: {line:'0088CC'}

NOTES#

  • Slide Number: more props are available that shown above - SlideNumberProps inherits from TextProps
  • Pre-encode your images (base64) and add the string as the optional data key/val (see bkgd above)

Examples#

Slide Master Example#

let pptx = new PptxGenJS();pptx.layout = "LAYOUT_WIDE";
pptx.defineSlideMaster({ title: "MASTER_SLIDE", background: { color: "FFFFFF" }, objects: [  { line: { x: 3.5, y: 1.0, w: 6.0, line: { color: "0088CC", width: 5 } } },  { rect: { x: 0.0, y: 5.3, w: "100%", h: 0.75, fill: { color: "F1F1F1" } } },  { text: { text: "Status Report", options: { x: 3.0, y: 5.3, w: 5.5, h: 0.75 } } },  { image: { x: 11.3, y: 6.4, w: 1.67, h: 0.75, path: "images/logo.png" } }, ], slideNumber: { x: 0.3, y: "90%" },});
let slide = pptx.addSlide({ masterName: "MASTER_SLIDE" });slide.addText("How To Create PowerPoint Presentations with JavaScript", { x: 0.5, y: 0.7, fontSize: 18 });
pptx.writeFile();

Slide Master Example Output#

Using the 'MASTER_SLIDE' defined above to produce a Slide: Master Slide Demo Presentation

Placeholders#

Placeholders are supported in PptxGenJS.

Add a placeholder object to a Master Slide using a unique name, then reference that placeholder name when adding text or other objects.

Placeholder Types#

TypeDescription
titleslide title
bodybody area
imageimage
chartchart
tabletable
mediaaudio/video

Placeholder Example#

let pptx = new PptxGenJS();pptx.layout = "LAYOUT_WIDE";
pptx.defineSlideMaster({ title: "PLACEHOLDER_SLIDE", background: { color: "FFFFFF" }, objects: [  { rect: { x: 0, y: 0, w: "100%", h: 0.75, fill: { color: "F1F1F1" } } },  { text: { text: "Status Report", options: { x: 0, y: 0, w: 6, h: 0.75 } } },  {   placeholder: {    options: { name: "body", type: "body", x: 0.6, y: 1.5, w: 12, h: 5.25 },    text: "(custom placeholder text!)",   },  }, ], slideNumber: { x: 0.3, y: "95%" },});
let slide = pptx.addSlide({ masterName: "PLACEHOLDER_SLIDE" });
// Add text, charts, etc. to any placeholder using its `name`slide.addText("Body Placeholder here!", { placeholder: "body" });
pptx.writeFile();

Placeholder Example Output#

Using the 'PLACEHOLDER_SLIDE' defined above to produce a Slide: Placeholder Demo Presentation

More Examples and Demos#

There are several Master Slides defined in the Demo: demos/browser/index.html including examples using placeholders. PptxGenJS Master Slide Demo