{"id":13567133,"url":"https://github.com/wyozi/react-pptx","last_synced_at":"2025-10-11T18:33:44.746Z","repository":{"id":36981143,"uuid":"222521475","full_name":"wyozi/react-pptx","owner":"wyozi","description":"Create PowerPoint presentations with React","archived":false,"fork":false,"pushed_at":"2025-02-24T08:44:06.000Z","size":4202,"stargazers_count":146,"open_issues_count":13,"forks_count":32,"subscribers_count":5,"default_branch":"master","last_synced_at":"2025-03-26T08:16:31.193Z","etag":null,"topics":["hacktoberfest"],"latest_commit_sha":null,"homepage":"https://wyozi.github.io/react-pptx/","language":"TypeScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/wyozi.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null}},"created_at":"2019-11-18T18:55:54.000Z","updated_at":"2025-03-23T15:26:47.000Z","dependencies_parsed_at":"2024-01-12T12:47:22.688Z","dependency_job_id":"be6288fc-f44b-4d87-a131-5678dc6a7fdd","html_url":"https://github.com/wyozi/react-pptx","commit_stats":{"total_commits":607,"total_committers":11,"mean_commits":55.18181818181818,"dds":"0.29983525535420097","last_synced_commit":"36e114de2e6e2bebcf4928f084c8b55f2ec2c3e9"},"previous_names":[],"tags_count":37,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/wyozi%2Freact-pptx","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/wyozi%2Freact-pptx/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/wyozi%2Freact-pptx/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/wyozi%2Freact-pptx/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/wyozi","download_url":"https://codeload.github.com/wyozi/react-pptx/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":247107816,"owners_count":20884793,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["hacktoberfest"],"created_at":"2024-08-01T13:02:24.510Z","updated_at":"2025-10-11T18:33:39.709Z","avatar_url":"https://github.com/wyozi.png","language":"TypeScript","readme":"# react-pptx\n\n[![npm](https://img.shields.io/npm/v/react-pptx?label=%22react-pptx%22%20%40%20npm)](https://www.npmjs.com/package/react-pptx)\n\nReact wrapper for [PptxGenJS](https://gitbrent.github.io/PptxGenJS/). Works both in browser and node. Try at https://wyozi.github.io/react-pptx/\n\n\u003cimg align=\"right\" width=\"400\" height=\"450\" src=\"./README_Slides.jpg\"\u003e\n\n```jsx\nimport {\n  Presentation, Slide, Text,\n  Shape, Image, render\n} from \"react-pptx\";\nimport fs from \"fs\";\n\nrender(\n  \u003cPresentation\u003e\n    \u003cSlide\u003e\n      \u003cText style={{\n        x: 3, y: 1, w: 3, h: 0.5,\n        fontSize: 32\n      }}\u003e\n        Hello there!\n      \u003c/Text\u003e\n      \u003cShape\n        type=\"rect\"\n        style={{\n          x: 3, y: 1.55, w: 3, h: 0.1,\n          backgroundColor: \"#FF0000\"\n        }}\n      /\u003e\n    \u003c/Slide\u003e\n    \u003cSlide\u003e\n      \u003cImage\n        src={{\n          kind: \"path\",\n          path: \"https://picsum.photos/id/237/460/300\"\n        }}\n        style={{\n          x: \"10%\", y: \"10%\", w: \"80%\", h: \"80%\"\n        }}\n      /\u003e\n    \u003c/Slide\u003e\n  \u003c/Presentation\u003e\n).then(buffer =\u003e {\n  fs.writeFile(\"presentation.pptx\", buffer);\n});\n```\n\n## Api\n\n### `ReactPPTX.render(\u003cpresentation\u003e): Promise\u003cBuffer\u003e`\n\nAsynchronously renders given presentation JSX.\n\n### `\u003cPreview\u003e`\n\nTakes a `Presentation` component as a child and renders a preview of the presentation. (Used for displaying slides on the client).\n\n#### Props\n\n| name | type | default value | description |\n| -- | -- | -- | -- |\n| `children` | `React.ReactElement\u003cPresentationProps\u003e` |  | The `Presentation` component to preview. |\n| `slideStyle` | `React.CSSProperties` |  | Optional styles to apply to each slide in the preview. |\n| `drawBoundingBoxes` | `boolean` | `false` | Whether to draw bounding boxes around each slide object in the preview. |\n\n\n### `\u003cPresentation\u003e`\n\nWraps the whole presentation.\n\n#### Props\n\n| name | type | default value | description |\n| -- | -- | -- | -- |\n| `layout` | \"16x9\", \"16x10\", \"4x3\", or \"wide\" | \"16x9\" | [Slide size](https://gitbrent.github.io/PptxGenJS/docs/usage-pres-options.html#slide-layouts-sizes) |\n\n### `\u003cSlide\u003e`\n\nRepresents each slide in the presentation.\n\n#### Props\n\n| name | type | default value | description |\n| -- | -- | -- | -- |\n| `hidden` | boolean | false | Whether this slide is hidden during presenting |\n| `style.backgroundColor` | color |  | Slide background color |\n| `style.backgroundImage` | `{kind: \"path\", path: \"\"} \\| {kind: \"data\", data: \"\"}` |  | Background image url |\n\n### `\u003cText\u003e`\n\nText layer\n\n#### Props\n\n| name | type | default value | description |\n| -- | -- | -- | -- |\n| `style.x` | number (inches) or string (percentage) |  | Absolute `x` coordinate |\n| `style.y` | number (inches) or string (percentage) |  | Absolute `y` coordinate |\n| `style.w` | number (inches) or string (percentage) |  | Absolute width |\n| `style.h` | number (inches) or string (percentage) |  | Absolute height |\n| `style.color` | color | | Text color |\n| `style.fontFace` | string | Arial | Font family. Try to stick to [web-safe fonts](https://www.cssfontstack.com/) |\n| `style.fontSize` | number (points) | 18 | Font size. Defined in points (96 dpi by default) |\n| `style.bold` | boolean | false | Whether text is bold or not |\n| `style.italic` | boolean | false | Whether text is italic or not |\n| `style.underline` | boolean | false | Whether text is underlined or not |\n| `style.subscript` | boolean | false | Whether text is subscript or not |\n| `style.superscript` | boolean | false | Whether text is superscript or not |\n| `style.strike` | boolean | false | Whether text has a strikeout or not |\n| `style.inset` | boolean | false | Whether text is inset or not |\n| `style.align` | \"left\" or \"center\" or \"right\" | undefined | Horizontal text alignment within the text box |\n| `style.verticalAlign` | \"top\" or \"middle\" or \"bottom\" | undefined | Vertical text alignment within the text box |\n| `style.paraSpaceAfter` | number (points) |  | Paragraph spacing after the text |\n| `style.paraSpaceBefore` | number (points) |  | Paragraph spacing before the text |\n| `style.charSpacing` | number (points) |  | The amount of spacing between characters, between 1-256 |\n| `style.lineSpacing` | number (points) |  | Space between each line |\n| `style.margin` | number (points) or \\[number, number, number, number\\] |  | Similar to CSS `padding`, 0-99 |\n| `style.rotate` | integer |  | Degrees of text rotation, between 0-360 |\n| `rtlMode` | boolean | false | Whether text is displayed in right-to-left or not |\n| `lang` | string | en-US | Setting for language, useful for non-English fonts |\n\nTo see examples of the text formatting, see the underlying [PptxGenJS documentation](https://gitbrent.github.io/PptxGenJS/docs/api-text#text-formatting).\n\n### `\u003cText.Link\u003e`\n\nLink to somewhere. Only usable inside `\u003cText\u003e`. You must specify either `url` or `slide`.\n\n### `\u003cText.Bullet\u003e`\n\nBullet or numbered list item. Only usable inside `\u003cText\u003e`.\n\n| name | type | default value | description |\n| -- | -- | -- | -- |\n| `type` | \"bullet\" or \"number\" | \"bullet\" | Whether to use a bulleted list or numbered list |\n| `characterCode` | string | undefined | Bullet character code (unicode) |\n| `indent` | number | 27 | Indentation (space between bullet and text) (points) |\n| `numberType` | string | undefined | The numbering type to use (Number type, see below) |\n| `numberStartAt` | number | undefined | Number bullets start at |\n| `rtlMode` | boolean | false | Whether text is displayed in right-to-left or not |\n| `lang` | string | en-US | Setting for language, useful for non-English fonts |\n\n\u003cdetails\u003e\n  \u003csummary\u003e\u003cb\u003eNumber types\u003c/b\u003e\u003c/summary\u003e\n\n  To find out how these look, easiest to just Google .\n\n - 'alphaLcParenBoth'\n - 'alphaLcParenR'\n - 'alphaLcPeriod'\n - 'alphaUcParenBoth'\n - 'alphaUcParenR'\n - 'alphaUcPeriod'\n - 'arabicParenBoth'\n - 'arabicParenR'\n - 'arabicPeriod'\n - 'arabicPlain'\n - 'romanLcParenBoth'\n - 'romanLcParenR'\n - 'romanLcPeriod'\n - 'romanUcParenBoth'\n - 'romanUcParenR'\n - 'romanUcPeriod'\n\u003c/details\u003e\n\n#### Props\n\n| name | type | default value | description |\n| -- | -- | -- | -- |\n| `url` | string |  | URL to open |\n| `slide` | number |  | Slide to open |\n| `tooltip` | string |  | Tooltip on hover |\n| `rtlMode` | boolean | false | Whether text is displayed in right-to-left or not |\n| `lang` | string | en-US | Setting for language, useful for non-English fonts |\n\n### `\u003cImage\u003e`\n\nImage layer. Images are automatically fetched and embedded into the .pptx files during the rendering phase.\n\nSupports png, jpg, svg, gif and animated gif.\n\n#### Props\n\n| name | type | default value | description |\n| -- | -- | -- | -- |\n| `src` | `{kind: \"path\", path: \"\"} \\| {kind: \"data\", data: \"\"}` |  | Image URL |\n| `style.x` | number (inches) or string (percentage) | | Absolute `x` coordinate |\n| `style.y` | number (inches) or string (percentage) | | Absolute `y` coordinate |\n| `style.w` | number (inches) or string (percentage) | | Absolute width |\n| `style.h` | number (inches) or string (percentage) | | Absolute height |\n\n### `\u003cShape\u003e`\n\nShape layer.\n\n#### Props\n\n| name | type | default value | description |\n| -- | -- | -- | -- |\n| `type` | shape types |  | Shape type |\n| `style.x` | number (inches) or string (percentage) | | Absolute `x` coordinate |\n| `style.y` | number (inches) or string (percentage) | | Absolute `y` coordinate |\n| `style.w` | number (inches) or string (percentage) | | Absolute width |\n| `style.h` | number (inches) or string (percentage) | | Absolute height |\n| `style.backgroundColor` | complex color |  | Shape background color |\n\n\n\u003cdetails\u003e\n  \u003csummary\u003e\u003cb\u003eShape types\u003c/b\u003e\u003c/summary\u003e\n\n  To find out how these look, easiest to just Google.\n\n- accentBorderCallout1\n- accentBorderCallout2\n- accentBorderCallout3\n- accentCallout1\n- accentCallout2\n- accentCallout3\n- actionButtonBackPrevious\n- actionButtonBeginning\n- actionButtonBlank\n- actionButtonDocument\n- actionButtonEnd\n- actionButtonForwardNext\n- actionButtonHelp\n- actionButtonHome\n- actionButtonInformation\n- actionButtonMovie\n- actionButtonReturn\n- actionButtonSound\n- arc\n- bentArrow\n- bentUpArrow\n- bevel\n- blockArc\n- borderCallout1\n- borderCallout2\n- borderCallout3\n- bracePair\n- bracketPair\n- callout1\n- callout2\n- callout3\n- can\n- chartPlus\n- chartStar\n- chartX\n- chevron\n- chord\n- circularArrow\n- cloud\n- cloudCallout\n- corner\n- cornerTabs\n- cube\n- curvedDownArrow\n- curvedLeftArrow\n- curvedRightArrow\n- curvedUpArrow\n- decagon\n- diagStripe\n- diamond\n- dodecagon\n- donut\n- doubleWave\n- downArrow\n- downArrowCallout\n- ellipse\n- ellipseRibbon\n- ellipseRibbon2\n- flowChartAlternateProcess\n- flowChartCollate\n- flowChartConnector\n- flowChartDecision\n- flowChartDelay\n- flowChartDisplay\n- flowChartDocument\n- flowChartExtract\n- flowChartInputOutput\n- flowChartInternalStorage\n- flowChartMagneticDisk\n- flowChartMagneticDrum\n- flowChartMagneticTape\n- flowChartManualInput\n- flowChartManualOperation\n- flowChartMerge\n- flowChartMultidocument\n- flowChartOfflineStorage\n- flowChartOffpageConnector\n- flowChartOnlineStorage\n- flowChartOr\n- flowChartPredefinedProces'flowChartPredefinedProcess',\n- flowChartPreparation\n- flowChartProcess\n- flowChartPunchedCard\n- flowChartPunchedTape\n- flowChartSort\n- flowChartSummingJunction\n- flowChartTerminator\n- folderCorner\n- frame\n- funnel\n- gear6\n- gear9\n- halfFrame\n- heart\n- heptagon\n- hexagon\n- homePlate\n- horizontalScroll\n- irregularSeal1\n- irregularSeal2\n- leftArrow\n- leftArrowCallout\n- leftBrace\n- leftBracket\n- leftCircularArrow\n- leftRightArrow\n- leftRightArrowCallout\n- leftRightCircularArrow\n- leftRightRibbon\n- leftRightUpArrow\n- leftUpArrow\n- lightningBolt\n- line\n- lineInv\n- mathDivide\n- mathEqual\n- mathMinus\n- mathMultiply\n- mathNotEqual\n- mathPlus\n- moon\n- nonIsoscelesTrapezoid\n- noSmoking\n- notchedRightArrow\n- octagon\n- parallelogram\n- pentagon\n- pie\n- pieWedge\n- plaque\n- plaqueTabs\n- plus\n- quadArrow\n- quadArrowCallout\n- rect\n- ribbon\n- ribbon2\n- rightArrow\n- rightArrowCallout\n- rightBrace\n- rightBracket\n- round1Rect\n- round2DiagRect\n- round2SameRect\n- roundRect\n- rtTriangle\n- smileyFace\n- snip1Rect\n- snip2DiagRect\n- snip2SameRect\n- snipRoundRect\n- squareTabs\n- star10\n- star12\n- star16\n- star24\n- star32\n- star4\n- star5\n- star6\n- star7\n- star8\n- stripedRightArrow\n- sun\n- swooshArrow\n- teardrop\n- trapezoid\n- triangle\n- upArrow\n- upArrowCallout\n- upDownArrow\n- upDownArrowCallout\n- uturnArrow\n- verticalScroll\n- wave\n- wedgeEllipseCallout\n- wedgeRectCallout\n- wedgeRoundRectCallout\n\u003c/details\u003e\n\n\u003cdetails\u003e\n  \u003csummary\u003e\u003cb\u003eComplex colors\u003c/b\u003e\u003c/summary\u003e\n\n  Shapes support complex colors for the backgroundColor property.\n  These are the currently supported complex color types:\n  - Translucent colors (e.g. `rgba(255, 127, 0, 0.5)` for orange at 50% opacity)\n\u003c/details\u003e\n\n### `\u003cLine\u003e`\n\nLine layer. Internally uses `\u003cShape\u003e` but is separate for convinience.\n\n#### Props\n\n| name | type | default value | description |\n| -- | -- | -- | -- |\n| `x1` | number (inches) or string (percentage) | | Line start `x` coordinate |\n| `y1` | number (inches) or string (percentage) | | Line start `y` coordinate |\n| `x2` | number (inches) or string (percentage) | | Line end `x` coordinate |\n| `y2` | number (inches) or string (percentage) | | Line end `y` coordinate |\n| `style.color` | hex color |  | Line color |\n| `style.width` | number (inches) or string (percentage) |  | Line width |\n\n\n## Credits / Shoutouts\n\n- All the hard work is done in [pptxgenjs](https://github.com/gitbrent/PptxGenJS) by Brent Ely \n- [react-pdf](https://react-pdf.org/) for REPL code\n- [react-keyed-flatten-children](https://github.com/grrowl/react-keyed-flatten-children)\n","funding_links":[],"categories":["TypeScript"],"sub_categories":[],"project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fwyozi%2Freact-pptx","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fwyozi%2Freact-pptx","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fwyozi%2Freact-pptx/lists"}