In a modern SaaS application, delivering professional and branded documents is just as important as the functionality behind them. For platforms that generate quotes or proposals, being able to instantly transform structured data into a polished PDF can significantly improve the customer experience and streamline workflows for businesses.

In our case, we integrated CraftMyPDF with WeWeb and Supabase to automatically generate quote PDFs on demand. This article explains the architecture we built, the functions powering it, and the best practices we recommend for building a similar setup.

‍

Architecture Overview

The architecture of this integration follows a clean, serverless-first approach where each component has a clear responsibility. When a user in WeWeb triggers the generation of a PDF, the frontend sends the quote_id to a Supabase Edge Function. 

This function serves as the secure middleware: it queries the Supabase Database to gather all necessary information about the quote, the customer, and the associated services. Once the data is collected, the function prepares a structured payload and sends it to the CraftMyPDF API, which uses a predefined template to generate the final PDF. The generated document can then be stored in Supabase Storage for long-term access, or simply returned directly to the frontend. 

Finally, the resulting URL is passed back to WeWeb, where the user can preview or download the PDF. This seamless flow ensures that the frontend remains lightweight, while the business logic and sensitive API calls are securely handled on the backend.

‍

Use Case: Quotes

With this setup, whenever a quote is created or updated in Supabase, a PDF can be generated instantly.

For example, a landscaping business sends a quote with services like “Lawn Mowing” and “Tree Trimming”. The Edge Function builds the services table dynamically and CraftMyPDF generates a professional PDF with:

• The business logo.

• The customer’s name.

• A detailed breakdown of services and totals.

• Payment terms and notes.

This PDF can then be emailed directly to the customer using another Edge Function (send-quote-email), ensuring the process is fully automated from quote creation to customer delivery

‍

Setting up CraftMyPDF

CraftMyPDF allows you to create templates with placeholders that can be dynamically replaced with data. For example, in a quote template we defined fields like:

• {{quote_number}} → Unique ID of the quote.

• {{customer_name}} → The customer receiving the quote.

• {{services_table}} → A dynamic table listing services, quantities, and totals.

• {{business_logo}} → The branding of the business.
  
  
  

Once the template is designed, CraftMyPDF provides a Template ID and an API key that we use in our Supabase Edge Function.

The Supabase Edge Function

We built a dedicated Edge Function (generate-quote-pdf) that:

1. Receives a quote_id from WeWeb.

2. Queries Supabase for the quote, business, and services.

3. Builds a JSON payload matching the CraftMyPDF template.

4. Calls CraftMyPDF’s API to generate the PDF.

5. Stores the resulting PDF in Supabase Storage or returns the URL to WeWeb.
   
   
   

Here’s a simplified version of the function:

Benefits & Best Practices

• Consistency: All quotes share the same branded template.

• Automation: No manual PDF creation; everything is generated dynamically.

• Scalability: Works across multiple businesses in a multi-tenant setup.

• Security: Business logic stays in Supabase; API keys are never exposed to WeWeb.

• Flexibility: Templates can be updated in CraftMyPDF without changing code.

Conclusion

By integrating CraftMyPDF with WeWeb and Supabase, we built a seamless quote-to-PDF workflow that is secure, automated, and scalable. Businesses can now generate professional documents instantly, reinforcing brand consistency and improving customer experience.

This approach demonstrates how combining serverless functions, no-code frontends, and specialized services can transform routine tasks into polished, automated workflows. For SaaS platforms dealing with quotes, invoices, or reports, this integration pattern is a powerful foundation to build upon.

‍