──────────────────── STEP 1 — Add the element to your page
────────────────────
Place the PDF Builder element on your page.
Set its width to fill the container and height to at least 600px.
The editor is fully responsive and will fill the available space.

────────────────────
STEP 2 — Create a data field to persist documents
────────────────────
In your Bubble database, add a field of type Text (long) to whichever
data type will own the document (e.g. User, Project, Template).

Suggested field name: pdf_data

This field will store the encoded document state produced by the editor.

────────────────────
STEP 3 — Wire the Save workflow
────────────────────
Trigger: PDF Builder · document_saved
Action:  Make changes to a thing
        → set pdf_data = PDF Builder's document_data

This saves the full document (all pages, elements, and settings)
to your database every time the user clicks the Save button.

────────────────────
STEP 4 — Restore a saved document
────────────────────
Property: data = Current Thing's pdf_data

When the page loads with a saved pdf_data value, the editor
automatically restores the document — pages, elements and all settings
are fully reconstructed. No extra workflow needed.

────────────────────
STEP 5 — Export the PDF
────────────────────
Trigger: PDF Builder · pdf_generated
Action:  Open an external URL
        → URL = PDF Builder's pdf_url
        → Open in new tab: yes

The pdf_url is a blob URL generated client-side. It is only valid
during the current browser session. To persist the file, upload it
to your file storage using a backend workflow before the session ends.

────────────────────
PROPERTIES REFERENCE
────────────────────

id (Text · optional)
 A unique identifier for the document. The editor publishes this value
 back via the document_id state. Useful for tracking which record is
 being edited.
 Example: Current Document's unique id

name (Text · optional)
 Sets the document title displayed in the editor's top bar.
 When the user edits the title manually, the name_changed event fires.
 Example: Current Document's Name

data (Text · optional)
 Encoded document data from a previous save (document_data state).
 When provided, the editor loads and restores the document on startup.
 Example: Current Document's pdf_data

context (Text · optional)
 A JSON string mapping variable names to their display values.
 Variables written as {{variableName}} in text elements are resolved
 in the canvas preview and during PDF export.
 Example: { "name": "Maria Silva", "company": "Acme Corp" }
 Tip: Use Bubble's "Formatted as JSON" or build the string dynamically.

locale (Text · optional)
 Sets the interface language. Accepted values: "pt-BR" or "en-US".
 Defaults to "en-US". Can be changed at runtime.
 Example: Current User's Language

────────────────────
STATES REFERENCE
────────────────────

document_data (Text)
 The full encoded document. Save this to your database on
 the document_saved event to persist the user's work.

document_name (Text)
 The current title of the document as shown in the top bar.

document_id (Text)
 The value passed via the id property, reflected as a state.

pdf_url (Text)
 Blob URL of the generated PDF. Available after pdf_generated fires.
 Use it to open, preview, or upload the file.

is_ready (yes/no)
 Becomes true when a PDF has been generated successfully.

has_error (yes/no)
 Becomes true if PDF generation fails.

error_message (Text)
 Contains the error description when has_error is true.

────────────────────
EVENTS REFERENCE
────────────────────

document_saved
 Fires when the user clicks the Save button in the editor toolbar.
 At this point, document_data contains the latest encoded state.
 → Recommended action: save document_data to your database.

pdf_generated
 Fires when the PDF has been successfully generated and is ready.
 At this point, pdf_url contains a valid blob URL.
 → Recommended action: open pdf_url in a new tab.

pdf_error
 Fires if the PDF generation fails.
 Check error_message for the reason.
 → Recommended action: show an alert to the user.

name_changed
 Fires when the user edits the document title in the top bar.
 document_name reflects the new value.
 → Recommended action: update the record name in your database.

─────────────────────────────────────────
DYNAMIC VARIABLES — HOW THEY WORK
─────────────────────────────────────────

1. In the editor, type {{variableName}} inside any text element.
  The variable appears as a red pill until a value is provided.

2. Pass values via the context property as a JSON string:
  { "variableName": "Actual Value" }

3. Once a value is set, the canvas preview shows the resolved text
  in the element's own color and font — no visual difference from
  regular text, giving a true WYSIWYG preview.

4. When exporting, if variables are present and context is not set,
  the export modal asks the user to fill in each value manually
  before generating the PDF.