HTML to PPTX JSX

Turn rendered HTML into an editable PPTX in the browser. The intended workflow is not a build pipeline: copy the original HTML, make the copy an exporter, lay every slide/page out vertically, measure rendered nodes, recreate each page with @artifact-kit/pptxgenjs-jsx JSX, and export from a button.

Required Path

Follow this sequence. Do not substitute a Node script, CLI exporter, server-side renderer, package install, Vite app, webpack build, or screenshot-only pipeline unless the user explicitly asks for that different workflow.

1. Copy the original file. Treat the source HTML as read-only. Create a separate exporter HTML next to it, for example name.pptx-export.html.
2. Flatten the slides in the copy. If the original is a slideshow, carousel, route, tab set, or deck runtime, expand it so every slide/page is visible in one top-to-bottom container. Hidden, virtualized, inactive, or display:none slides must be made measurable in the exporter copy.
3. Add one export button. Put a fixed toolbar/button in the exporter copy only. Keep the original content visible for visual comparison.
4. Use the CDN browser library. Load the CDN IIFE build of @artifact-kit/pptxgenjs-jsx and Babel Standalone directly in the exporter page. Do not run pnpm install, npm install, or create a Node export script just to make a PPTX.
5. Add measurement attributes. Mark each slide root with data-ak-slide, data-ak-width, data-ak-height, and data-ak-px-per-in. Mark each DOM element needed in PPT with data-ak-measure="stable-id".
6. Measure in the click handler. Inside the export button handler, call await measureArtifacts({ document }), then use readSlideLayout(id), readPptBox(id), and readFontPt(id) for slide layout, placement, and text sizing.
7. Recreate each page with inline JSX. Use window.ArtifactKitPptxGenJsx components to build editable PPT content from measured boxes and source geometry. Create one <Slide> per visible HTML slide/page.
8. Validate and export. Run validateDeck(deck). If no errors are present, call renderPptx(deck, { fileName }). Open the downloaded PPTX and compare it against the exporter page when the environment allows.

Required Reading