Introduction

Magic PDF is a powerful, high-fidelity PDF generator for your Bubble applications. It works by sending a secure engine to "visit" a specific page of your app, take a perfect snapshot of the layout, and convert it into a fully responsive, pixel-perfect PDF document.

The entire process is automated: you simply design your Bubble page as you normally would, place the Magic PDF visual elements to control the layout (like page breaks or protected groups), and trigger the generation action. The resulting file is automatically saved to your Bubble application.

Getting your API Key

Before using the plugin, you must configure your API Key:

  1. Create an account on magic-pdf.bubbleapps.io.
  2. Subscribe to a plan (the Free plan includes 30 tokens/month, plus a 100-token bonus for your first month).
  3. Generate your API Key from the dashboard.
  4. In your Bubble Editor, go to the Plugins tab, find Magic PDF, and paste your key into the MAGIC PDF API KEY field.

How It Works: Step-by-Step

  1. Design your Page: Create the Bubble page you want to convert to a PDF. This can be an invoice, a report, or a dashboard.
  2. Place Layout Markers: Use elements like Page Break, Don't Split, or PDF Header inside your groups to control exactly how the document is paginated.
  3. Trigger the Action: Use a workflow to call the Generate PDF action. You can do this client-side via the visual element, or server-side via backend workflows.

Visual Elements

1. PDF Generator 🖨️

This is the core visual element required on the page if you want to generate PDFs from the client side. It acts as the bridge between your app and the Magic PDF engine. It manages the generation states, logs, and triggers success or error events.

Exposed States

State Name Type Description
Generating PDF (is_generating) Boolean Returns yes while the PDF engine is actively capturing and processing the document. Useful for showing loading spinners.
Error message (error_message) Text Contains the text of the error if the generation fails (e.g., invalid API key, missing credits).
File URL (file_url) Text The final URL of the generated PDF file, automatically hosted on your Bubble storage.
Logs (logs) Text A detailed history of the generation process. Very useful for debugging timeouts or layout issues.

Triggered Events

Event Name Description
PDF Generated Fires successfully when the PDF has been created, uploaded to Bubble, and is ready to be used or downloaded.
Error Occurred Fires if something goes wrong during the process. You can use this to display an alert to the user reading the Error message state.

Actions

See the Actions (client / server) Chapter below