@Designarena: https://x.com/Designarena/status/2069512922230083691
Summary
DesignArena open-sources a Python library that converts HTML/CSS to editable PowerPoint files using headless Chromium, sharing lessons from generating over 50,000 AI slides.
View Cached Full Text
Cached at: 06/24/26, 02:25 PM
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.
Example of the model struggling with spatial reasoning for python-pptx
Example of the model struggling with spatial reasoning for python-pptx
Approach 2: HTML/CSS generation + browser-based conversion
The model writes a self-contained HTML file with
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:
HTML screenshot
HTML screenshot
PPTX conversion with correctly formatted custom bulleted list
PPTX conversion with correctly formatted custom bulleted list
HTML screenshot
HTML screenshot
PPTX conversion with dark translucent background and rounded pills
PPTX conversion with dark translucent background and rounded pills
HTML screenshot
HTML screenshot
PPTX conversion with correctly formatted card, bold text, and rounded image corners
PPTX conversion with correctly formatted card, bold text, and rounded image corners
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
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 (MIT license)
Code
bashpip install html-to-pptx
pythonfrom 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/
Similar Articles
@aiwarts: https://x.com/aiwarts/status/2070137056144019720
Open-sourced Humanize PPT, an HTML PPT skill designed for presentations. It reorganizes outlines using AST (Audience, State, Transfer) logic, combined with downstream rendering skills to produce PPTs truly usable for presentations, addressing issues like uneven information distribution and content emptiness.
HTML AI PPT - Local-first AI Slide Deck Generator & Editor
A local-first AI slide deck generator that works offline with your own model, supporting Chinese AI services and HTML-based presentations.
@NFTCPS: Just discovered an open-source project that lets you create PPTs directly using React — the entire workflow is tailor-made for AI Agents. Bro, this approach is way more reliable than hacking together PPTs with HTML. React components are abundant, scalability blows HTML out of the water, easily plug in any chart library, and your technical PPTs will take off. Comes with a visual editor…
Discovered the open-source project open-slide, which uses the React framework to create PPTs. The workflow is specifically designed for AI Agents, supporting natural language slide generation, a visual editor, and brand logo integration.
@GoSailGlobal: In 2026, You Won't Use PowerPoint for PPTs Anymore. 5 AI-Driven PPT Styles, Covering: · founder pitch · McKinsey Consulting Style · Landscape HTML Deck · Visual Aesthetic Deck · Full-Stack Marketing Slides…
The article compares 25 open-source AI PPT generation skill tools, recommending automated solutions like guizang-ppt-skill that integrate MCP and Claude Code, covering various styles such as Consulting Style, HTML deck, and more.
AI Slide Editor by CubeOne
CubeOne launches an AI-powered slide editor designed to improve upon PowerPoint.