@Designarena: https://x.com/Designarena/status/2069512922230083691

X AI KOLs Timeline Tools

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.

https://t.co/nFtYoXfkMp
Original Article
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

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:

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

X AI KOLs Timeline

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.

@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…

X AI KOLs Timeline

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.