[Plugin] PDF Builder — Visual Editor | Drag & Drop PDF Editor for Bubble

Showcase Plugins
1

Hey Bubblers! :waving_hand:

I’d like to share a plugin I’ve been working on for the past few weeks — PDF Builder, a fully visual, drag-and-drop PDF editor that runs 100% inside your Bubble app.

No iframes. No external SaaS. No monthly fees. Everything runs client-side.

:link: View demo page
:link: View demo in editor
:link: Plugin Page

:framed_picture: What it looks like

(Screenshot: the editor in action with the Variables example template — Certificate of Completion)

example
example3420×1794 556 KB

:sparkles: What it does

PDF Builder gives your users a real document editor right inside your Bubble app. Think of it as a lightweight Google Docs / Canva for PDFs — but wired directly into your Bubble data.

Core features:

| Feature | Details |

|—|—|

| :triangular_ruler: Visual canvas | Drag, resize, reposition elements freely |

| :memo: Text blocks | Full typography: font, size, weight, color, alignment, line-height, letter-spacing, underline, strikethrough |

| :blue_square: Shapes & Lines | Rectangles with fill, border, border-radius; lines with custom stroke |

| :framed_picture: Images | Upload from local file, choose object-fit mode |

| :page_facing_up: Multi-page | Page thumbnails, add/remove pages |

| :magnifying_glass_tilted_left: Zoom + Grid | Zoom controls and snap-to-grid alignment guides |

:bookmark: Dynamic Variables — the killer feature

The thing I’m most excited about: {{variables}}.

Type {{name}} or {{company}} anywhere inside a text element. The variable shows up as a red dashed pill — a visual cue that it needs a value.

You have two ways to fill them:

1. Pass values from Bubble (no modal, instant export):


context property = { "name": "Current User's Name", "company": "Current User's Company" }

The canvas preview resolves the variables live. When you export, the PDF is generated instantly with the real values — no interruption for the user.

2. Let the user fill them in at export time:

If context is not set, clicking “Export PDF” triggers a modal that lists every detected variable and asks the user to fill in each value before generating the file.

This makes PDF Builder a great fit for:

  • :graduation_cap: Certificates of completion

  • :clipboard: Contracts with dynamic fields

  • :bookmark_tabs: Invoices and quotes

  • :label: Personalized letters

:floppy_disk: Save & Restore

The editor serializes the entire document (all pages, elements, settings) into an encoded string you can save to any Bubble text field.


On document_saved → Save document_data to your DB

On page load → Pass saved value to the data property

The editor reconstructs the document automatically — no extra workflow needed.

:outbox_tray: PDF Export

When the user clicks Export PDF:

  1. Variables are resolved (from context or the fill-in modal)

  2. jsPDF renders every element pixel-perfectly

  3. A pdf_generated event fires with a blob URL ready to open or upload


On pdf_generated → Open pdf_url in a new tab

:gear: Quick Setup (4 steps)

  1. Add the PDF Builder element to your page (full-width recommended, min 600px height)

  2. Create a pdf_data field (Long Text) on your data type

  3. Wire document_saved → save document_data to pdf_data

  4. Set property data = Current Thing's pdf_data to restore on load

That’s it. Your users have a full PDF editor.

:globe_with_meridians: Bilingual

The interface supports English (en-US) and Portuguese (pt-BR), switchable at runtime via the locale property.

:person_raising_hand: I’d love your feedback!

This is my first visual editor plugin for Bubble and I’d love to hear from the community:

  • What document types would you use this for?

  • Any features you’d love to see added? (comments? rich text? QR codes?)

  • Any bugs or edge cases you run into?

Drop a reply below or DM me — all feedback is welcome. Thanks for checking it out! :folded_hands: