react-pptx
Advanced tools
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: "http://www.fillmurray.com/460/300"
}}
style={{
x: "10%", y: "10%", w: "80%", h: "80%"
}}
/>
</Slide>
</Presentation>
).then(buffer => {
fs.writeFile("presentation.pptx", buffer);
});
ReactPPTX.render(<presentation>): Promise<Buffer>Asynchronously renders given presentation JSX.
<Presentation>Wraps the whole presentation.
| name | type | default value | description |
|---|---|---|---|
layout | "16x9", "16x10", "4x3", or "wide" | "16x9" | Slide size |
<Slide>Represents each slide in the presentation.
| 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
| 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 .
| 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.
| 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.
| 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.
Shapes support complex colors for the backgroundColor property. These are the currently supported complex color types:
rgba(255, 127, 0, 0.5) for orange at 50% opacity)<Line>Line layer. Internally uses <Shape> but is separate for convinience.
| 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 |
FAQs
Render JSX to a .pptx file
The npm package react-pptx receives a total of 1,745 weekly downloads. As such, react-pptx popularity was classified as popular.
We found that react-pptx demonstrated a not healthy version release cadence and project activity because the last version was released a year ago. It has 1 open source maintainer collaborating on the project.
Did you know?
Socket for GitHub automatically highlights issues in each pull request and monitors the health of all your open source dependencies. Discover the contents of your packages and block harmful activity before you install or update your dependencies.
Security News
Multiple high-impact npm maintainers confirm they have been targeted in the same social engineering campaign that compromised Axios.
Security News
Axios compromise traced to social engineering, showing how attacks on maintainers can bypass controls and expose the broader software supply chain.
Security News
Node.js has paused its bug bounty program after funding ended, removing payouts for vulnerability reports but keeping its security process unchanged.