react-pptx

React wrapper for PptxGenJS. Works both in browser and node. Try at https://wyozi.github.io/react-pptx/

import {
  Presentation, Slide, Text,
  Shape, Image, render
} from "react-pptx";
import fs from "fs";

render(
  <Presentation>
    <Slide>
      <Text style={{
        x: 3, y: 1, w: 3, h: 0.5,
        fontSize: 32
      }}>
        Hello there!
      </Text>
      <Shape
        type="rect"
        style={{
          x: 3, y: 1.55, w: 3, h: 0.1,
          backgroundColor: "#FF0000"
        }}
      />
    </Slide>
    <Slide>
      <Image
        src={{
          kind: "path",
          path: "https://picsum.photos/id/237/460/300"
        }}
        style={{
          x: "10%", y: "10%", w: "80%", h: "80%"
        }}
      />
    </Slide>
  </Presentation>
).then(buffer => {
  fs.writeFile("presentation.pptx", buffer);
});

Api

ReactPPTX.render(<presentation>): Promise<Buffer>

Asynchronously renders given presentation JSX.

<Preview>

Takes a Presentation component as a child and renders a preview of the presentation. (Used for displaying slides on the client).

Props

| name | type | default value | description | | -- | -- | -- | -- | | children | React.ReactElement<PresentationProps> | | The Presentation component to preview. | | slideStyle | React.CSSProperties | | Optional styles to apply to each slide in the preview. | | drawBoundingBoxes | boolean | false | Whether to draw bounding boxes around each slide object in the preview. |

<Presentation>

Wraps the whole presentation.

Props

| name | type | default value | description | | -- | -- | -- | -- | | layout | "16x9", "16x10", "4x3", or "wide" | "16x9" | Slide size |

<Slide>

Represents each slide in the presentation.

Props

| name | type | default value | description | | -- | -- | -- | -- | | hidden | boolean | false | Whether this slide is hidden during presenting | | style.backgroundColor | color | | Slide background color | | style.backgroundImage | {kind: "path", path: ""} \| {kind: "data", data: ""} | | Background image url |

<Text>

Text layer

Props

| name | type | default value | description | | -- | -- | -- | -- | | style.x | number (inches) or string (percentage) | | Absolute x coordinate | | style.y | number (inches) or string (percentage) | | Absolute y coordinate | | style.w | number (inches) or string (percentage) | | Absolute width | | style.h | number (inches) or string (percentage) | | Absolute height | | style.color | color | | Text color | | style.fontFace | string | Arial | Font family. Try to stick to web-safe fonts | | style.fontSize | number (points) | 18 | Font size. Defined in points (96 dpi by default) | | style.bold | boolean | false | Whether text is bold or not | | style.italic | boolean | false | Whether text is italic or not | | style.underline | boolean | false | Whether text is underlined or not | | style.subscript | boolean | false | Whether text is subscript or not | | style.superscript | boolean | false | Whether text is superscript or not | | style.strike | boolean | false | Whether text has a strikeout or not | | style.inset | boolean | false | Whether text is inset or not | | style.align | "left" or "center" or "right" | undefined | Horizontal text alignment within the text box | | style.verticalAlign | "top" or "middle" or "bottom" | undefined | Vertical text alignment within the text box | | style.paraSpaceAfter | number (points) | | Paragraph spacing after the text | | style.paraSpaceBefore | number (points) | | Paragraph spacing before the text | | style.charSpacing | number (points) | | The amount of spacing between characters, between 1-256 | | style.lineSpacing | number (points) | | Space between each line | | style.margin | number (points) or [number, number, number, number] | | Similar to CSS padding, 0-99 | | style.rotate | integer | | Degrees of text rotation, between 0-360 | | rtlMode | boolean | false | Whether text is displayed in right-to-left or not | | lang | string | en-US | Setting for language, useful for non-English fonts |

To see examples of the text formatting, see the underlying PptxGenJS documentation.

<Text.Link>

Link to somewhere. Only usable inside <Text>. You must specify either url or slide.

<Text.Bullet>

Bullet or numbered list item. Only usable inside <Text>.

| name | type | default value | description | | -- | -- | -- | -- | | type | "bullet" or "number" | "bullet" | Whether to use a bulleted list or numbered list | | characterCode | string | undefined | Bullet character code (unicode) | | indent | number | 27 | Indentation (space between bullet and text) (points) | | numberType | string | undefined | The numbering type to use (Number type, see below) | | numberStartAt | number | undefined | Number bullets start at | | rtlMode | boolean | false | Whether text is displayed in right-to-left or not | | lang | string | en-US | Setting for language, useful for non-English fonts |

To find out how these look, easiest to just Google .

• 'alphaLcParenBoth'
• 'alphaLcParenR'
• 'alphaLcPeriod'
• 'alphaUcParenBoth'
• 'alphaUcParenR'
• 'alphaUcPeriod'
• 'arabicParenBoth'
• 'arabicParenR'
• 'arabicPeriod'
• 'arabicPlain'
• 'romanLcParenBoth'
• 'romanLcParenR'
• 'romanLcPeriod'
• 'romanUcParenBoth'
• 'romanUcParenR'
• 'romanUcPeriod'

Props

| name | type | default value | description | | -- | -- | -- | -- | | url | string | | URL to open | | slide | number | | Slide to open | | tooltip | string | | Tooltip on hover | | rtlMode | boolean | false | Whether text is displayed in right-to-left or not | | lang | string | en-US | Setting for language, useful for non-English fonts |

<Image>

Image layer. Images are automatically fetched and embedded into the .pptx files during the rendering phase.

Supports png, jpg, svg, gif and animated gif.

Props

| name | type | default value | description | | -- | -- | -- | -- | | src | {kind: "path", path: ""} \| {kind: "data", data: ""} | | Image URL | | style.x | number (inches) or string (percentage) | | Absolute x coordinate | | style.y | number (inches) or string (percentage) | | Absolute y coordinate | | style.w | number (inches) or string (percentage) | | Absolute width | | style.h | number (inches) or string (percentage) | | Absolute height |

<Shape>

Shape layer.

Props

| name | type | default value | description | | -- | -- | -- | -- | | type | shape types | | Shape type | | style.x | number (inches) or string (percentage) | | Absolute x coordinate | | style.y | number (inches) or string (percentage) | | Absolute y coordinate | | style.w | number (inches) or string (percentage) | | Absolute width | | style.h | number (inches) or string (percentage) | | Absolute height | | style.backgroundColor | complex color | | Shape background color |

To find out how these look, easiest to just Google.

• accentBorderCallout1
• accentBorderCallout2
• accentBorderCallout3
• accentCallout1
• accentCallout2
• accentCallout3
• actionButtonBackPrevious
• actionButtonBeginning
• actionButtonBlank
• actionButtonDocument
• actionButtonEnd
• actionButtonForwardNext
• actionButtonHelp
• actionButtonHome
• actionButtonInformation
• actionButtonMovie
• actionButtonReturn
• actionButtonSound
• arc
• bentArrow
• bentUpArrow
• bevel
• blockArc
• borderCallout1
• borderCallout2
• borderCallout3
• bracePair
• bracketPair
• callout1
• callout2
• callout3
• can
• chartPlus
• chartStar
• chartX
• chevron
• chord
• circularArrow
• cloud
• cloudCallout
• corner
• cornerTabs
• cube
• curvedDownArrow
• curvedLeftArrow
• curvedRightArrow
• curvedUpArrow
• decagon
• diagStripe
• diamond
• dodecagon
• donut
• doubleWave
• downArrow
• downArrowCallout
• ellipse
• ellipseRibbon
• ellipseRibbon2
• flowChartAlternateProcess
• flowChartCollate
• flowChartConnector
• flowChartDecision
• flowChartDelay
• flowChartDisplay
• flowChartDocument
• flowChartExtract
• flowChartInputOutput
• flowChartInternalStorage
• flowChartMagneticDisk
• flowChartMagneticDrum
• flowChartMagneticTape
• flowChartManualInput
• flowChartManualOperation
• flowChartMerge
• flowChartMultidocument
• flowChartOfflineStorage
• flowChartOffpageConnector
• flowChartOnlineStorage
• flowChartOr
• flowChartPredefinedProces'flowChartPredefinedProcess',
• flowChartPreparation
• flowChartProcess
• flowChartPunchedCard
• flowChartPunchedTape
• flowChartSort
• flowChartSummingJunction
• flowChartTerminator
• folderCorner
• frame
• funnel
• gear6
• gear9
• halfFrame
• heart
• heptagon
• hexagon
• homePlate
• horizontalScroll
• irregularSeal1
• irregularSeal2
• leftArrow
• leftArrowCallout
• leftBrace
• leftBracket
• leftCircularArrow
• leftRightArrow
• leftRightArrowCallout
• leftRightCircularArrow
• leftRightRibbon
• leftRightUpArrow
• leftUpArrow
• lightningBolt
• line
• lineInv
• mathDivide
• mathEqual
• mathMinus
• mathMultiply
• mathNotEqual
• mathPlus
• moon
• nonIsoscelesTrapezoid
• noSmoking
• notchedRightArrow
• octagon
• parallelogram
• pentagon
• pie
• pieWedge
• plaque
• plaqueTabs
• plus
• quadArrow
• quadArrowCallout
• rect
• ribbon
• ribbon2
• rightArrow
• rightArrowCallout
• rightBrace
• rightBracket
• round1Rect
• round2DiagRect
• round2SameRect
• roundRect
• rtTriangle
• smileyFace
• snip1Rect
• snip2DiagRect
• snip2SameRect
• snipRoundRect
• squareTabs
• star10
• star12
• star16
• star24
• star32
• star4
• star5
• star6
• star7
• star8
• stripedRightArrow
• sun
• swooshArrow
• teardrop
• trapezoid
• triangle
• upArrow
• upArrowCallout
• upDownArrow
• upDownArrowCallout
• uturnArrow
• verticalScroll
• wave
• wedgeEllipseCallout
• wedgeRectCallout
• wedgeRoundRectCallout

Shapes support complex colors for the backgroundColor property. These are the currently supported complex color types:

• Translucent colors (e.g. rgba(255, 127, 0, 0.5) for orange at 50% opacity)

<Line>

Line layer. Internally uses <Shape> but is separate for convinience.

Props

| name | type | default value | description | | -- | -- | -- | -- | | x1 | number (inches) or string (percentage) | | Line start x coordinate | | y1 | number (inches) or string (percentage) | | Line start y coordinate | | x2 | number (inches) or string (percentage) | | Line end x coordinate | | y2 | number (inches) or string (percentage) | | Line end y coordinate | | style.color | hex color | | Line color | | style.width | number (inches) or string (percentage) | | Line width |

Credits / Shoutouts

• All the hard work is done in pptxgenjs by Brent Ely
• react-pdf for REPL code
• react-keyed-flatten-children