Hey Bubblers!
I’ve been working on a PDF generation solution that I think many of you will love. It’s built around DMD (Document Markdown), a specialized markdown-like language that converts simple text into professional PDFs.
The ecosystem consists of:
- DMD: The syntax/language itself.
- dmd-to-pdf: The powerful JavaScript library that handles the conversion (NPM | JSDelivr).
- DMD PDF Conjurer Alternative: The Bubble plugin built on top of the library for seamless integration (Plugin page).
Privacy-First PDF Generation
Unlike other PDF plugins that send your data to external servers, DMD PDF Conjurer Alternative generates PDFs locally, either in the user’s browser or on Bubble’s backend. Your sensitive data never leaves your infrastructure.
- No external API calls: PDFs are generated on-device or on Bubble servers.
- No per-PDF fees: Generate unlimited documents without worrying about scaling costs.
- No data exposure: Perfect for invoices, contracts, medical records, and confidential documents.
Simpler Than PDF Conjurer
PDF Conjurer is a powerful plugin with a lot of flexibility, but requires many workflow actions even for simple PDFs. DMD PDF Conjurer Alternative takes a different approach, centered around a single text-based template:
- One action, one PDF: Write your entire document in a single text field using simple DMD markup.
- Fewer workflow steps: No need to chain multiple actions to build up a document piece by piece.
- Dynamic content: Use Bubble’s dynamic data directly in your DMD text blocks.
- Easier maintenance: Edit your document template in one place.
- AI-assisted creation: Use the interactive playground to design your PDF, or pass the llms.txt to an AI to do it for you.
Getting Started: Your First PDF
The simplest DMD document is just text:
# Hello World
This is my first PDF document.
That’s it! This generates a PDF with a heading and a paragraph.
Text Formatting
DMD supports many formatting options:
# Text Formatting Examples
This text is **bold** and this is *italic*.
You can also use __underline__ and --strikethrough--.
For technical docs, use `inline code`.
Scientific notation: H~2~O (subscript) and x^2^ (superscript).
Lists
Create organized content with bullet and numbered lists:
## Unordered List
- First item
- Second item
- Nested item
- Another nested
- Third item
## Ordered List
1. Step one
2. Step two
3. Step three
## Alphabetic List
a. Option A
b. Option B
c. Option C
Lists can be nested up to multiple levels, perfect for outlines and structured content.
Tables
Tables are essential for invoices, reports, and data presentation:
## Simple Table
::table
Product | Quantity | Price
Widget A | 10 | $50.00
Widget B | 5 | $75.00
Service Fee | 1 | $25.00
::
The first row automatically becomes the header, you can change via styles. Columns are separated by the pipe character.
Two-Column Layouts
Perfect for invoices with sender/recipient info, or any side-by-side content:
## Invoice Header
::column
**From:**
Acme Corporation
123 Business Street
New York, NY 10001
|
**To:**
Client Company
456 Customer Avenue
Los Angeles, CA 90001
::
The pipe character separates left and right columns. You can have multiple lines in each column.
Links and Images
Add clickable links and images to your documents:
## Links
Visit our website: [Click Here]{url: https://example.com}
## Images
[Company Logo]{img: logo}
[Product Photo]{img: https://example.com/product.png}
Images can be loaded from URLs or pre-registered with an alias (like “logo” above) using the plugin’s Register Image action.
Document Configuration
Control page size, margins, and metadata with the config block:
:::config
title: Invoice #2024-001
author: Acme Corporation
fileName: invoice-2024-001.pdf
pageSize: A4
pageOrientation: portrait
pageMargins: [40, 60, 40, 60]
:::
# Invoice #2024-001
Invoice content here...
Available page sizes: A4, LETTER, LEGAL, A3, A5, and more.
Headers and Footers
Add consistent branding across all pages:
:::config
title: Company Report
headerHeight: 80
footerHeight: 50
:::
::header
[Logo]{img: company-logo} **Acme Corporation** | Confidential Report
::
::footer
Page {pageNumber} of {pageCount} | Generated on March 2024
::
# Quarterly Report
Your report content here...
===
# Page Two
More content on the second page...
Use {pageNumber} and {pageCount} for automatic page numbering. The triple equals === creates a page break.
Custom Styling (Pro Feature)
Create reusable styles for consistent branding:
:::config
title: Styled Invoice
:::
:::styles
company-header:
fontSize: 24
bold: true
color: #1a365d
highlight-box:
fillColor: #f0f9ff
margin: [0, 10, 0, 10]
total-row:
fontSize: 14
bold: true
fillColor: #e2e8f0
:::
# [Acme Corporation]{::company-header}
::highlight-box
**Invoice Date:** March 19, 2024
**Due Date:** April 19, 2024
**Invoice Number:** INV-2024-0042
::
## Items
::table
Description | Qty | Unit Price | Total
Web Development | 40 hrs | $150.00 | $6,000.00
UI/UX Design | 20 hrs | $125.00 | $2,500.00
[**TOTAL**]{::total-row} | | | [**$8,500.00**]{::total-row}
::
Styles support: fontSize, bold, italics, color, fillColor (background), alignment, margins, and many more properties.
Using Custom Fonts (Pro Feature)
The Pro license includes 120 curated Google Fonts automatically available:
:::styles
elegant-title:
font: Playfair Display
fontSize: 28
bold: true
body-text:
font: Open Sans
fontSize: 11
:::
# [Certificate of Achievement]{::elegant-title}
[This certificate is awarded to...]{::body-text}
Popular fonts included: Inter, Roboto, Open Sans, Lato, Montserrat, Merriweather, and 110+ more.
Complete Invoice Example
Here’s a real-world invoice putting it all together:
:::config
title: Invoice
fileName: invoice-2024-042.pdf
pageSize: A4
headerHeight: 100
footerHeight: 40
:::
:::styles
logo-text:
fontSize: 28
bold: true
color: "#1e40af"
section-title:
fontSize: 14
bold: true
color: "#374151"
margin: [0, 15, 0, 5]
info-label:
bold: true
color: "#6b7280"
total-highlight:
fontSize: 16
bold: true
color: "#1e40af"
:::
::header
::column
[ACME]{::logo-text}
**Corporation**
|
**INVOICE**
INV-2024-042
::
::
::footer
Thank you for your business! | Payment due within 30 days
::
+
::column
**Bill From:**
Acme Corporation
123 Business Avenue
New York, NY 10001
billing@acme.com
|
**Bill To:**
Client Company Inc.
John Smith
456 Customer Street
Los Angeles, CA 90001
::
+
[Invoice Details]{::section-title}
::column
[Invoice Date:]{::info-label} March 19, 2024
[Due Date:]{::info-label} April 19, 2024
|
[Payment Terms:]{::info-label} Net 30
[Currency:]{::info-label} USD
::
++
[Items]{::section-title}
::table
Description | Hours | Rate | Amount
Frontend Development | 32 | $150.00 | $4,800.00
Backend API Development | 24 | $150.00 | $3,600.00
UI/UX Design Services | 16 | $125.00 | $2,000.00
Project Management | 8 | $100.00 | $800.00
::
+
::column
|
**Subtotal:** $11,200.00
**Tax (8%):** $896.00
[**Total Due:** $12,096.00]{::total-highlight}
::
++
---
[Payment Instructions]{::section-title}
Please make payment to:
**Bank:** First National Bank
**Account:** 1234567890
**Routing:** 021000021
Or pay online at: [pay.acme.com/inv-2024-042]{url: https://pay.acme.com}
Bubble Plugin Setup
The DMD plugin has two components:
- Element (for client-side generation):
- Add the PDF element to your page
- Trigger “Create a PDF” action with your DMD content
- The element exposes the generated PDF URL
- Server Actions (for backend generation):
- Use “Create PDF” action in your backend workflows
- Optionally save directly to Bubble storage with the Save to parameter pointing to your Home URL
Note: see full doc at plugin page and DMD site
Pre-registering Assets
For images and custom fonts, use the Register actions before generating:
Register Image:
Name: company-logo
URL: https://your-bucket.s3.amazonaws.com/logo.png
Then reference in DMD as:
[My Logo]{img: company-logo}
Register Font (Pro):
Name: CustomBrand
Normal URL: https://your-bucket.s3.amazonaws.com/brand-regular.ttf
Bold URL: https://your-bucket.s3.amazonaws.com/brand-bold.ttf
Licensing
DMD has a Free tier and a Pro tier:
Free (forever):
- Basic Document Markdown to PDF conversion
- Tables, lists, columns
- Headers and footers with page numbers
- Images (URLs and pre-registered)
- Inline text styling
- Roboto font included
Pro ($49/year):
- Everything in Free
- 120 Google Fonts automatically loaded
- Custom font loading (your own TTF files)
- Block styling (styled tables, columns, lists)
- Watermarks
- Background layers
- Table of contents with bookmarks
- QR code generation
Each Pro license includes both a Server License (for backend generation) and a Browser License (for client-side generation, limited to 5 domains).
Resources
- DMD website: dmdlang.dev
- Try it live: playground
- User Guide and Reference: here
- AI/LLM Context File: “dmdlang.dev/llms.txt” (drop this in your project for AI assistants)
If you’re tired of complex PDF APIs, per-document fees, or sending sensitive data to external services, give DMD a try. The playground lets you test everything before integrating.
Questions? Drop them below or email support@dmdlang.dev
Happy building!