See editor: https://bubble.io/page?id=testeplugins-85494&tab=Design&name=pdf_canva_demo&type=page&elements=bTJWl
🚀 Quick Start

Step 1: Design your document
Add the PDF Canvas element to a page and use the Visual Builder to create your document layout. Add text, images, tables, columns, boxes, signatures, and more with just a few clicks.
Step 2: Copy the JSON structure
Once you're happy with your design, open the browser's Debugger or Inspector and copy the json_structure output from the element. This JSON represents your entire document.
Step 3: Use dynamic data
Paste the JSON into your workflow and replace static values with dynamic data from your database. For example:
"content": "Invoice #123" → "content": "Invoice #" + Current Order's ID
Step 4: Generate the PDF
Use the Generate PDF from JSON action in your workflow, passing the modified JSON. The action returns the PDF URL, base64 data, and more.

📦 What's Included
Visual Element

PDF Canvas: Drag-and-drop builder with real-time A4 preview

Actions

Generate PDF from JSON: Creates PDF and uploads to Bubble storage
Download PDF: Forces browser download (client-side)

Supported Elements
ElementDescriptionTextFormatted text with alignment, bold, custom line heightImageFrom URL or base64, with alignment optionsTableHeaders + rows with customizable colorsColumnsMulti-column layouts (2+)BoxStyled container with rounded cornersListBullet, numbered, letter, or roman numeralsDividerHorizontal line separatorSpacerVertical spacingSignatureSignature line with name and documentPage BreakForce new page

💡 Pro Tips

Use the Visual Builder for prototyping - Design your layout visually, then copy the JSON for programmatic use.

Use the List_to_Json action to convert lists of data from the Bubble database into dynamic JSON.

Customize margins - Click the ⚙️ Settings button to adjust page margins and default styles.

Dynamic tables - Build your rows array dynamically using Bubble's :format as text on a list.

Hide the toolbar - Set display_toolbar = no to show only the preview (useful for end-user views).

Auto-print - Check "Auto print" to automatically open the print dialog after generating.


📖 Full Documentation
For complete documentation with all properties, examples, and advanced usage, visit our Demo Page.

🆘 Support
Having issues? Contact us through the plugin support channel or leave a review with your question.
Happy PDF generating! 🎉