What we've learned from 50,000+ AI slides generations… open sourced for you today

DesignArena open-sourced an HTML-to-PPTX conversion library after generating over 50,000 AI slides. The library uses a headless browser to measure DOM elements and maps them to python-pptx shapes, solving the conversion bottleneck that existing tools failed to address. This enables editable PowerPoint exports from AI-generated HTML slides.

What we've learned from 50,000+ AI slides generations… open sourced for you today We've seen a massive uptick in demand for AI-generated slides at DesignArena - it’s become one of our fastest-growing creation categories. The harness-level implementation of slides is nuanced and often overlooked. We’ve generated over 50K slides now and have experimented with every harness possibility… long story short: the perfect Slides generation pipeline doesn’t exist. So we built it… and open-sourced it for you today : Here are the field notes for everything we learned along the way. There have been two main harness-level approaches to generating Slides - Generating Python code directly through the python-pptx library - Generating HTML/CSS code, rendering it in the browser, and mapping the layout to python-pptx via DOM traversal Approach 1: Direct Python-pptx code generation The model writes Python code that calls the python-pptx API directly through add slide , add textbox , add picture , etc. The code is executed, and the output is a .pptx file. Pros: - Full control over every PPTX primitive charts, tables, animations - No browser dependency - The model can reference the Python-PPTX docs directly and iterate on the code Cons: - Models struggle with spatial reasoning in code. Positioning elements at Inches 2.3 from the left and Inches 1.8 from the top is a guess. The model has no visual feedback loop - Text overflow is invisible. A text box that's too small will clip silently in PowerPoint, and the model has no way to know. - Complex layouts multi-column, cards, grids require tedious coordinate math that models get wrong regularly. - Styling is limited to what python-pptx exposes. CSS gradients, border-radius, translucent overlays require manual OOXML XML manipulation. Approach 2: HTML/CSS generation + browser-based conversion The model writes a self-contained HTML file with <section class="slide" elements. A headless browser renders it, and a converter maps the rendered DOM to python-pptx shapes. Pros: - Every frontier model has been trained on billions of web pages specifically for layout, typography, and color. - The browser handles spatial layout with flexbox, grid, gap, border-radius, linear-gradient instead. - Styling is virtually unlimited since anything CSS can do, the HTML can express. Cons: - The conversion step is lossy. Not everything in CSS maps cleanly to PPTX gradients, icon fonts, complex SVGs . - Font availability is an issue as the PPTX references font names, but if the viewer doesn't have them installed, it substitutes. The converter is the bottleneck. The quality of the final PPTX is only as good as the HTML-to-PPTX mapping engine. The main problem: conversion is hard The HTML approach has one hard dependency: something that turns rendered HTML into an editable PPTX.Nothing we found does this cleanly: Slidev, Marp, Reveal.js export slides as images. PptxGenJS handles HTML tables, not full pages. Pandoc does Markdown-to-PPTX via templates. Presenton and ppt-master are full apps, not libraries you can import. deck-to-pptx bakes decorative elements as background images and needs manual per-deck config. dom-to-pptx and html-to-pptx npm are client-side JS converters. html2pptx tools use static HTML parsing rather than a real browser. We wanted a Python library. pip install, call convert , get an editable .pptx. That didn't exist… so we built it. Our HTML-to-PPTX library Our lightweight library has 2 steps: Measure : Load the HTML in headless Chromium. For each slide, inject JS that recursively walks the DOM and records every visible element's position, size, colors, fonts, text, and images. Render : Walk the measurement tree and map each element to the closest python-pptx shape. Text becomes text boxes. Images become picture shapes. Backgrounds become filled rectangles. Gradients, rounded corners, and alpha transparency go through direct OOXML manipulation. CSS pixels map to PPTX inches at a fixed ratio 13.333" / 1920px . What the browser measured is what PowerPoint gets. Here are some examples showcasing some of its capabilities: Limitations Here are some known limitations - we’d love your help with contributions here - Fonts aren't embedded. If the viewer doesn't have the CSS font installed, PowerPoint substitutes. This can cause some text to overflow. - CSS background-image: url ... isn't converted, only <img tags and inline SVGs. - Only linear-gradient, not radial-gradient. - Icon fonts Lucide, Font Awesome show as boxes on machines without the font. We're trying to build the most accurate HTML-to-PPTX converter and will continue to update. If you have ideas to improve the system, please contribute We've been running this across tens of thousands of AI-generated presentations on Design Arena. Hope it's useful. Github github.com/Design-Arena/html-to-pptx http://github.com/Design-Arena/html-to-pptx?ref=notes.designarena.ai MIT license Code pip install html-to-pptx python from html to pptx import convert import asyncio asyncio.run convert "slides.html", "output.pptx" Try it yourself The HTML-to-PPTX library is part of our Slides Arena at https://www.designarena.ai/ https://www.designarena.ai/?ref=notes.designarena.ai