Authoring
Layouts and components
Six layouts compose a small set of React components that emit predictable DOM for reliable conversion.
Choosing a layout
Keep one main idea per slide. Split crowded slides instead of shrinking text.
| layout | Use for |
|---|---|
| cover | Opening slide with a large title and optional author |
| content | An explanation with paragraphs, lists, and images |
| two-columns | Comparisons such as before and after |
| cards | Up to six short parallel ideas |
| table | Compact grids of text |
| chart | Simple nonnegative values, optionally with an explanation column |
Components
Components are exported from the package root. They emit markup only; renderPresentation supplies the stylesheet, theme, font, and fixed canvas.
| Component | Output |
|---|---|
| Slide | Full slide frame with title, content, footer, and notes |
| SlideTitle · SlideSubtitle | Header with heading and subtitle |
| SlideContent · SlideColumns | Content region and equal two-column grid |
| SlideCard | Titled card |
| SlideImage · SlideTable | Image figure with caption, semantic table |
| SlideChart | Horizontal HTML/CSS bars with labels and values |
| SlideFooter | Footer text and slide number |
Custom trusted HTML
Give each slide a fixed 1280 × 720 box marked with data-pptx="slide". Keep text and simple fills as DOM and CSS when editability matters. Mark intentional decorative overlap so the overlap check skips it.
<section data-pptx="slide" style="width:1280px;height:720px">
<h1>Editable title</h1>
<div data-pptx-allow-overlap="true">…decorative layers…</div>
</section>