--- title: "Generate PDF Nunjucks Snippet" slug: "generate-pdf-nunjucks-snippet" updated: 2025-09-25T23:06:18Z published: 2025-09-25T23:06:18Z canonical: "docs.unqork.io/generate-pdf-nunjucks-snippet" --- > ## Documentation Index > Fetch the complete documentation index at: https://docs.unqork.io/llms.txt > Use this file to discover all available pages before exploring further. # Generate PDF Nunjucks Snippet ## Overview You might want to take a snapshot of your module or reference it outside of the Unqork Designer Platform. Or you might want to let your end-users keep a record of what they enter in your application. Exporting a module to a PDF is a simple solution. With the Generate PDF Nunjucks snippet, you or your end-user can create a PDF of your module's front-end. The PDF even includes any information the end-user entered in Express View. With some basic CSS knowledge, you can easily change the appearance of your PDF. This snippet works best for creating PDFs with fairly simple styling. This snippet also works best for applications that don't need a large number of PDFs. A good benchmark to use is one 1-page PDF per submission, and no more than 20 submissions a day. Here's how the Generate PDF Nunjucks snippet looks in Express View: ![](https://cdn.us.document360.io/15548f06-2fba-434c-b0c1-5df88317dbd7/Images/Documentation/templates_generatePDF_01_ExpressView.jpg?sv=2026-02-06&spr=https&st=2026-11-09T16%3A59%3A11Z&se=2026-11-09T17%3A59%3A11Z&sr=c&sp=r&sig=0%2Bptbb6t7DSKPbUt0hzFg0XugQNcSN%2BpX%2B995fABZdw%3D) Here's how the snippet looks in the Module Builder: ![](https://cdn.us.document360.io/15548f06-2fba-434c-b0c1-5df88317dbd7/Images/Documentation/templates_generatePDF_02_editorview2.gif?sv=2026-02-06&spr=https&st=2026-11-09T16%3A59%3A11Z&se=2026-11-09T17%3A59%3A11Z&sr=c&sp=r&sig=0%2Bptbb6t7DSKPbUt0hzFg0XugQNcSN%2BpX%2B995fABZdw%3D) And here's how the generated PDF looks (including some sample data): ![](https://cdn.us.document360.io/15548f06-2fba-434c-b0c1-5df88317dbd7/Images/Documentation/templates_generatePDF_03_pdfpreview.jpg?sv=2026-02-06&spr=https&st=2026-11-09T16%3A59%3A11Z&se=2026-11-09T17%3A59%3A11Z&sr=c&sp=r&sig=0%2Bptbb6t7DSKPbUt0hzFg0XugQNcSN%2BpX%2B995fABZdw%3D) ## How the Snippet Works The Generate PDF Nunjucks snippet has 3 parts: - The module's front end: an Express View interface, where end-users can enter information. - The module's back end: the components that let you create and display the PDF. - A transform that generates a PDF of the module's front end. The PDF includes any data entered by the end-user in Express View. ### The Module's Front End In Express View, the Generate PDF Nunjucks snippet acts as a basic intake module. It includes fields to collect today's date as well as some information about your end-user. End-users can enter their full name, date of birth, phone number, email address, Social Security number, address, and gender. In the [Customizing the Snippet](/v1/docs/generate-pdf-nunjucks-snippet#customizing-the-snippet) section, you'll learn how to add new fields or remove default ones. The module's front end also includes a **Generate PDF** button. When the end-user clicks this button, their information saves as a submission. Clicking the button also triggers the pluginGeneratePDF Plug-In, which executes the transform. ### The Module's Back End The module's back end includes the behind-the-scenes components not visible in Express View. The pluginGeneratePDF Plug-In connects the transform to your module. The Plug-In's Inputs table tells the Plug-In where to find the transform. This includes specifying the name of the transform and what module the transform is in. The Inputs table also gives the transform access to your module's submission data. With this connection, the transform can fill in the PDF with your end-user's information. Once the transform creates the PDF, the Plug-In also helps to display the PDF. When the transform creates a PDF, the Unqork Designer Platform temporarily hosts that PDF in cloud storage at a unique URL. The Plug-In's Outputs table maps this URL to the pdfURL Hidden component. Then, when a URL displays in the pdfURL Hidden component, the ruleOpenPDF Decision fires. The Decision opens a new tab using the URL stored in the pdfURL Hidden component. From your end-user's perspective, the new tab opens as soon as they click the Generate PDF button. From this new tab, your end-user can view, download, or print their prefilled PDF. ### The Transform The Generate PDF Nunjucks snippet uses a transform to take your module and turn it into a PDF. Transforms format data coming out of Unqork Designer Platform and export that data to a specific file type. The Generate PDF Nunjucks snippet uses a Nunjucks PDF type transform. Nunjucks, abbreviated as NJK, is a Javascript templating language. The transform script that you set up in your module maps to the NJK (PDF) transform snippet. The transform script uses HTML to create a basic table-based layout. You can see this by looking through the transform, which contains several tags. If you're familiar with HTML, editing the transform script to change the PDF's layout is easy. The transform also includes a style section, where CSS defines the style of the PDF. In the style section, you can set custom font styles, background colors, and more. (If you're new to editing HTML or CSS, view the [Customizing the Snippet](/v1/docs/generate-pdf-nunjucks-snippet#customizing-the-snippet) section.) The transform can also dynamically populate the PDF with submission data. When creating the PDF, the transform references keys in the submission data. For example, the transform replaces the HTML {{ data.email }} with the value from the email key/value pair. ## Setting Up the Snippet Setting up the Generate PDF Nunjucks snippet is straightforward. You'll learn later how to customize the snippet, where you'll match the snippet to your needs. ### Add the Transform The first step in setting up the Generate PDF Nunjucks snippet is adding the transform to your module. It's best practice to add the transform to the same module where you added the snippet. 1. Hover over the left sidebar menu of the Module Builder. 2. Click the ![](https://cdn.us.document360.io/15548f06-2fba-434c-b0c1-5df88317dbd7/Images/Documentation/AppBuildButton_Transforms.jpg?sv=2026-02-06&spr=https&st=2026-11-09T16%3A59%3A11Z&se=2026-11-09T17%3A59%3A11Z&sr=c&sp=r&sig=0%2Bptbb6t7DSKPbUt0hzFg0XugQNcSN%2BpX%2B995fABZdw%3D) (**Transforms**) button to open the **Transforms** page. 3. In the **Enter transform name** field, enter generatePDF. 4. From the **Direction of transform** options, select **Output**. 5. From the **Type of transform** options, select **NJK (PDF)**. 6. In the **Create new transform below** field, copy and paste the following transform: > [!NOTE] > You can also copy this transform from the second Content component in the snippet. **Transform** ```xml ##NOTE: The below is example content to generate a PDF. Paste the content into an Output NJK(PDF) transform and name it generatePDF. Then, delete this content component##            

Unqork, Inc

   

General Survey

   
Application must be completed in full.
   
Personal Information
   
                                                                                                                     
Date:{{ data.trimTodaysDate }}
Full Name:{{ data.fullName }}D.O.B:{{ data.trimDateOfBirth }}
                                               
Mailing Address:{{ data.address.formatted_address }}
                                               
Phone:{{ data.phoneNumber }}
                                               
Email Address:{{ data.email }}
                                               
Social Security Number:{{ data.SSN }}
                                                                         
Gender:Female {% if data.Gender == 'Female' %}☑ {% else %} ☐{% endif %}Male {% if data.Gender == 'Male' %}☑ {% else %} ☐{% endif %}Other {% if data.Gender == 'Other' %}☑ {% else %} ☐{% endif %}
``` ![](https://cdn.us.document360.io/15548f06-2fba-434c-b0c1-5df88317dbd7/Images/Documentation/templates_generatePDF_04_addtransform.jpg?sv=2026-02-06&spr=https&st=2026-11-09T16%3A59%3A11Z&se=2026-11-09T17%3A59%3A11Z&sr=c&sp=r&sig=0%2Bptbb6t7DSKPbUt0hzFg0XugQNcSN%2BpX%2B995fABZdw%3D) 7. Click **Add Transform**. Your transform now displays under the **Active Transforms** list. 8. Return to the Module Builder and **Save** your module. ### Update the Plug-In Component Next, update the pluginGeneratePDF Plug-In, to connect it to the transform. 1. Hover over the pluginGeneratePDF Plug-In component. A 5-button toolbar displays above the component on hover-over. 2. Using the toolbar, click the ![](https://cdn.us.document360.io/15548f06-2fba-434c-b0c1-5df88317dbd7/Images/Documentation/AppBuildButton_Settings(28).jpg?sv=2026-02-06&spr=https&st=2026-11-09T16%3A59%3A11Z&se=2026-11-09T17%3A59%3A11Z&sr=c&sp=r&sig=0%2Bptbb6t7DSKPbUt0hzFg0XugQNcSN%2BpX%2B995fABZdw%3D) (**Settings**) button. 3. In the **Inputs** table, replace 'templategeneratepdfnunjucks' with the Module Path of your module. Be sure to surround the Module Path in single quotes. > [!NOTE] > Use the Module Path of your own module, where you added the transform. You can find a module's Module Path by clicking **More +** next to its title. ![](https://cdn.us.document360.io/15548f06-2fba-434c-b0c1-5df88317dbd7/Images/Documentation/template_generatePDF_05_modulepath.jpg?sv=2026-02-06&spr=https&st=2026-11-09T16%3A59%3A11Z&se=2026-11-09T17%3A59%3A11Z&sr=c&sp=r&sig=0%2Bptbb6t7DSKPbUt0hzFg0XugQNcSN%2BpX%2B995fABZdw%3D) ![](https://cdn.us.document360.io/15548f06-2fba-434c-b0c1-5df88317dbd7/Images/Documentation/template_generatePDF_04_pluginupdate.jpg?sv=2026-02-06&spr=https&st=2026-11-09T16%3A59%3A11Z&se=2026-11-09T17%3A59%3A11Z&sr=c&sp=r&sig=0%2Bptbb6t7DSKPbUt0hzFg0XugQNcSN%2BpX%2B995fABZdw%3D) 4. Click **Save**. ### Delete the Content Components Now that you set up your transform and connected it to the Plug-In, you can delete the snippet's Content components. The first Content component has instructions you don't want to display in Express View. The second Content component contains the transform, which you already added to your module. 1. Hover over the formIdContent Content component. A 5-button toolbar displays above the component on hover-over. 2. Click the ![](https://cdn.us.document360.io/15548f06-2fba-434c-b0c1-5df88317dbd7/Images/Documentation/AppBuildButton_Remove(19).jpg?sv=2026-02-06&spr=https&st=2026-11-09T16%3A59%3A11Z&se=2026-11-09T17%3A59%3A11Z&sr=c&sp=r&sig=0%2Bptbb6t7DSKPbUt0hzFg0XugQNcSN%2BpX%2B995fABZdw%3D) (**Remove**) button. 3. Hover over the contentForTransform Content component. 4. Click the ![](https://cdn.us.document360.io/15548f06-2fba-434c-b0c1-5df88317dbd7/Images/Documentation/AppBuildButton_Remove(19).jpg?sv=2026-02-06&spr=https&st=2026-11-09T16%3A59%3A11Z&se=2026-11-09T17%3A59%3A11Z&sr=c&sp=r&sig=0%2Bptbb6t7DSKPbUt0hzFg0XugQNcSN%2BpX%2B995fABZdw%3D) (**Remove**) button. Now you can preview your module, enter some sample data, and create a test PDF. ## Customizing the Snippet With some knowledge of HTML and CSS, you can easily adjust the layout and styling of your final PDF. In this section, you'll learn how to: - [Change the style of the PDF](/v1/docs/generate-pdf-nunjucks-snippet#changing-the-style-of-the-pdf). - [Add a field to the module and PDF](/v1/docs/generate-pdf-nunjucks-snippet#adding-fields-to-the-module-and-pdf). - [Remove a field from the module and PDF](/v1/docs/generate-pdf-nunjucks-snippet#removing-fields-from-the-module-and-pdf). To make these changes, you'll adjust the transform script. To edit your transform: 1. Hover over the left sidebar menu of the Module Builder. 2. Click the ![](https://cdn.us.document360.io/15548f06-2fba-434c-b0c1-5df88317dbd7/Images/Documentation/AppBuildButton_Transforms.jpg?sv=2026-02-06&spr=https&st=2026-11-09T16%3A59%3A11Z&se=2026-11-09T17%3A59%3A11Z&sr=c&sp=r&sig=0%2Bptbb6t7DSKPbUt0hzFg0XugQNcSN%2BpX%2B995fABZdw%3D) (**Transforms**) button to open the **Transforms** page. 3. In the **Active Transforms** list, click **generatePDF**. 4. Make any changes inside the **Transform** pane. 5. Click **Save Changes** when finished. ### Changing the Style of the PDF In the transform, any code in either tags. Everything inside these tags defines the appearance of your PDF. For example, h1 { } defines the H1 headers, #checkbox { } defines the checkboxes, and table { } defines the tables. Remember that your PDF uses an HTML table-based layout. Even if all the borders of the tables aren't visible, most of your PDF uses this structure. With some basic CSS knowledge, it's easy to adjust your PDF's style. ![](https://cdn.us.document360.io/15548f06-2fba-434c-b0c1-5df88317dbd7/Images/Documentation/templates_generatePDF_05_styleupdate.jpg?sv=2026-02-06&spr=https&st=2026-11-09T16%3A59%3A11Z&se=2026-11-09T17%3A59%3A11Z&sr=c&sp=r&sig=0%2Bptbb6t7DSKPbUt0hzFg0XugQNcSN%2BpX%2B995fABZdw%3D) In this example, you increased font sizes (font-size:) and weights (font-weight:). For example, all the PDF's fields are now size 11 font, instead of size 10. Some font and background colors (color:, background-color:) were adjusted. For example, the Personal Information header is now white against a teal background. There's also increased padding in the Personal Information header (padding:). Adjusting padding gives more space around the words. You can also see that the H1 headers (**Unqork, Inc** and **General Survey**) are now bolded, dark blue, and larger than before. The following code reflects the changes made to the ``` #### Changes Inside a Tag Next, change specific lines or elements, focusing on tags. As an example, use the following line of the transform:
Application must be completed in full.
. adds a yellow background to the phrase "Application must be completed in full." You can change the background color, and even the style of the font itself. These changes are made inside the tag. For example: ```xml 1
Application must be completed in full.
``` > [!NOTE] > The background color uses a Hex color code. Hex codes give you more options for color choices than simply entering a color name. In this case, #97e9e4 is the Hex code for a light shade of aqua. These adjustments change the background color and font size. Along with the changes you made before, you get this outcome: ![](https://cdn.us.document360.io/15548f06-2fba-434c-b0c1-5df88317dbd7/Images/Documentation/templates_generatePDF_06_spanupdates.jpg?sv=2026-02-06&spr=https&st=2026-11-09T16%3A59%3A11Z&se=2026-11-09T17%3A59%3A11Z&sr=c&sp=r&sig=0%2Bptbb6t7DSKPbUt0hzFg0XugQNcSN%2BpX%2B995fABZdw%3D) ### Adding Fields to the Module and PDF In this example, you'll add a field called Occupation. There are 2 steps in this process: - Updating yourmodule. - Updating your transform. #### Updating the Module The first step is adding the Occupation field to your module: 1. In the Module Builder, drag and drop a **Text Field** component onto the canvas. Place it below the **Social Security Number** Text Field. 2. In the **Property ID** field, enter occupation. 3. In the **Label Text** field, enter Occupation. 4. Click **Save**. 5. **Save** your module. #### Updating the Transform Next, add the Occupation field to your PDF by adjusting the transform. As mentioned earlier, the PDF uses an HTML table-based layout. So, when adding new fields to your PDF you have a few options. You can create another row () or column () in an existing table, or add a new table. Here, add a new table below the Social Security Number table. 1. In the **Transforms** tab, open the **generatePDF** transform. 2. **Paste** the following code into the transform below the Social Security Number table (after the tag). ```xml                        
Occupation:{{ data.occupation }}
``` > [!NOTE] > The HTML {{ data.occupation }} lets the transform dynamically populate the Occupation field from the submission data. occupation is the Property ID of the Occupation Text Field component. ![](https://cdn.us.document360.io/15548f06-2fba-434c-b0c1-5df88317dbd7/Images/Documentation/templates_generatePDF_07_addoccupation.jpg?sv=2026-02-06&spr=https&st=2026-11-09T16%3A59%3A11Z&se=2026-11-09T17%3A59%3A11Z&sr=c&sp=r&sig=0%2Bptbb6t7DSKPbUt0hzFg0XugQNcSN%2BpX%2B995fABZdw%3D) 3. Click **Save Changes**. 4. Return to the Module Builder. 5. **Save** your module. The updated PDF, including the style changes made earlier, looks like this. You can see the new Occupation field below the Social Security Number field. ![](https://cdn.us.document360.io/15548f06-2fba-434c-b0c1-5df88317dbd7/Images/Documentation/templates_generatePDF_08_pdfoccupation.jpg?sv=2026-02-06&spr=https&st=2026-11-09T16%3A59%3A11Z&se=2026-11-09T17%3A59%3A11Z&sr=c&sp=r&sig=0%2Bptbb6t7DSKPbUt0hzFg0XugQNcSN%2BpX%2B995fABZdw%3D) ### Removing Fields from the Module and PDF In this example, you'll remove the Social Security Number Field. There are 2 steps in this process: - Updating yourmodule. - Updating your transform. #### Updating the Module The first step is removing the Social Security Number field from your module: 1. Hover over the **Social Security Number** Text Field component. A 5-button toolbar displays above the component on hover-over. 2. Click the ![](https://cdn.us.document360.io/15548f06-2fba-434c-b0c1-5df88317dbd7/Images/Documentation/AppBuildButton_Remove(19).jpg?sv=2026-02-06&spr=https&st=2026-11-09T16%3A59%3A11Z&se=2026-11-09T17%3A59%3A11Z&sr=c&sp=r&sig=0%2Bptbb6t7DSKPbUt0hzFg0XugQNcSN%2BpX%2B995fABZdw%3D) (**Remove**) button. 3. **Save** your module. #### Updating the Transform For this example, you'll remove the Social Security Number field from the transform by removing the entire Social Security Number table. > [!NOTE] > For fields that are part of a larger table, you might need to remove only the row ( to ) or data cell ( to ). 1. In the **Transforms** tab, open the **generatePDF** transform. 2. **Delete** the following code from the transform: ```xml                        
Social Security Number:{{ data.SSN }}
``` ![](https://cdn.us.document360.io/15548f06-2fba-434c-b0c1-5df88317dbd7/Images/Documentation/templates_generatePDF_09_removeSSN.jpg?sv=2026-02-06&spr=https&st=2026-11-09T16%3A59%3A11Z&se=2026-11-09T17%3A59%3A11Z&sr=c&sp=r&sig=0%2Bptbb6t7DSKPbUt0hzFg0XugQNcSN%2BpX%2B995fABZdw%3D) 3. Click **Save Changes**. 4. Return to the Module Builder and **Save** your module. Your updated PDF, including the previous style changes and new Occupation field, looks like this. Notice that the Social Security Number field no longer displays above the Occupation field. ![](https://cdn.us.document360.io/15548f06-2fba-434c-b0c1-5df88317dbd7/Images/Documentation/templates_generatePDF_10_PDFwoSSN.jpg?sv=2026-02-06&spr=https&st=2026-11-09T16%3A59%3A11Z&se=2026-11-09T17%3A59%3A11Z&sr=c&sp=r&sig=0%2Bptbb6t7DSKPbUt0hzFg0XugQNcSN%2BpX%2B995fABZdw%3D) You've seen a few PDF customization options. Feel free to play around with the transform script and try out different styles and layouts!