One of the most common requests from Bubble developers and their clients is PDF generation. Invoices, proposals, reports, certificates — almost every serious web app needs to produce documents at some point. The existing solutions on the Bubble marketplace were either slow, limited to plain text, or required expensive third-party subscriptions. I decided to build a better solution from scratch.

Bubble developers had three options for PDF generation before this plugin. They could use screenshot-based plugins that produce low quality output. They could integrate expensive external APIs that add monthly costs to every project. Or they could skip PDF entirely and lose a critical feature their clients needed.

None of these options were good enough. Clients expect professional, styled documents — not screenshots or plain text exports.

I built the AI PDF Generator — a Bubble plugin with two powerful modes in one.

In AI mode, the user passes a plain text prompt describing the document they want. The plugin calls OpenRouter, which routes the request to any of 100+ AI models including Claude, GPT-4, and Gemini. The AI returns a complete, professionally styled HTML document. The plugin then renders it invisibly in an iframe, captures it with html2canvas, converts it to PDF using jsPDF, and triggers an automatic download. The entire process happens client-side with no external service required beyond the OpenRouter API call.

In manual mode, developers pass their own custom HTML and the plugin converts it to a pixel-perfect PDF preserving all colors, tables, gradients, and typography exactly as designed.

The biggest challenge was page breaks. Early versions would cut through table rows and headings at page boundaries, making the output look unprofessional. I solved this by cropping the rendered canvas per page rather than repositioning a single image across pages. Each page gets its own clean canvas slice, eliminating content cutoff entirely.

The second challenge was dynamic content height. Fixed height iframes were causing content to be clipped. I switched to auto height detection using scrollHeight so the iframe always captures the full document regardless of length.

I also added a built-in loading overlay with a progress bar and status updates so end users always have feedback during the generation process. This was important because AI generation plus PDF rendering can take 5-10 seconds and a blank screen creates confusion.

The plugin was submitted and accepted to the Bubble marketplace within 24 hours of being built. It supports any Bubble app that needs document generation — SaaS platforms, agency tools, e-commerce systems, HR platforms, and legal tools. Developers install it once and use it across unlimited projects with no monthly fees beyond their own OpenRouter API usage, which costs fractions of a cent per document.

This project shows my ability to identify real gaps in the no-code ecosystem, design practical solutions, handle complex frontend rendering challenges, and ship production-ready tools quickly. It combines Bubble plugin architecture, JavaScript, AI API integration, and UX thinking in a single deliverable.

Available on the Bubble marketplace: https://bubble.io/plugin/ai-pdf-generator---prompt-to-pdf-1773228940351x275079274832592900