html-to-composition

Convert HTML slide references into AIPPT SlideCompositionDocument JSON.

The importer is designed for editable-first slide recovery, with fidelity safeguards for generic templates:

• CSS transform-aware text sizing for PPT HTML that scales a 960x540 canvas to 1280x720.
• Browser line-box text extraction so auto-wrapped HTML text is frozen into one single-line text element per rendered line.
• AI replacement metadata on text elements, including original text, grouped line ids, length bounds, and rendered size limits.
• SVG image mask normalization so clipPath coordinates match the target slide frame.
• Multi-layer CSS slide backgrounds preserve a native linear-gradient base, approximate supported radial overlays as editable shapes, and emit warnings for partial fidelity.
• Images can inherit matching parent overflow:hidden/clip plus uniform border-radius as native borderRadius metadata.
• Filled SVG path pills are imported as editable rounded-rectangle shapes when possible.
• Imported layer order keeps media below structure and content, matching common PPT draw order.
• Unsupported complex visuals should be represented with hybrid/raster policies or warnings rather than silently claiming full editability.

npm install
npm run build
npm run example

CLI:

aippt-html-import --html ./slide.html --out ./slide-composition.json --pretty

Batch CLI:

aippt-html-import --html-dir ./slides --out ./deck-composition.json --slide-id-prefix deck --pretty

aippt-html-import \
  --html ./slides/slide_01.html \
  --html ./slides/slide_02.html \
  --out ./deck-composition.json \
  --image https://example.com/slide-1-image.jpg \
  --image https://example.com/slide-2-image.jpg

Batch imports sort --html-dir files by filename. Repeated --image values are consumed in slide order, then image appearance order within each slide.

Programmatic API:

import { importHtmlFilesToComposition, importHtmlToComposition } from "html-to-composition";

const result = await importHtmlToComposition({
  htmlPath: "/absolute/path/slide.html",
  imageOverrides: ["https://example.com/image.jpg"],
});

console.log(result.document);

const deck = await importHtmlFilesToComposition({
  htmlDir: "/absolute/path/slides",
  slideIdPrefix: "deck",
});

console.log(deck.document.slides.length);