PDFMake Template Builder

Explore the pdfMake template builder

This default template walks through each node type so you can see how updates in the editor reflect in the PDF preview. Try selecting items in the sidebar to edit their content, style, or configuration.

Working with text styles

Text nodes map to pdfMake paragraphs. Change the font size, weight, or color in the right-hand panel and watch the preview refresh instantly. You can also use custom styles defined under the Styles tab.

Combining multiple styles lets you layer typography rules. This paragraph uses the built-in quote and small styles so you can see how arrays apply in order.

Adding images

Images accept base64 strings, URLs, or asset references. Adjust width, height, and alignment to experiment with layout. Swap the source from the sidebar to try your own graphic.

Lists and bullet points

Table data overview

Tables bundle rows and columns with metadata. Header rows stay bold, column widths control layout, and the layout property toggles grid lines. Select the table to edit body cells, add columns, or change the styling.

Ready to customize further? Add new nodes from the Elements panel or import your own pdfMake definition to see how everything renders instantly.

Custom node examples

PDFMake lets you create custom structures by combining multiple elements. Below are two simple examples showing how to build reusable components:

These custom structures showcase how columns, stacks, and inline styles combine to create reusable design patterns. Select them in the editor to inspect their properties.

Rich Text & Inline Styling

You can now create rich text with inline styles! Try switching a text node to "Rich Text" mode to mix different styles within a single paragraph.

This paragraph uses bold text, italic text, colored text, and large text all in one line!

You can even combine bold and italic or use style references alongside inline styles.

Interactive Links & Navigation

PDFMake supports interactive elements in your documents. You can create external links, internal page navigation, and document anchors:

• External Links: Visit pdfMake documentation or check out GitHub repository for more examples.

• Internal Navigation: Jump to page 2 or page 1 using page links.

• Document Anchors: Click to go back to the Introduction section or jump to the Images section using destination IDs.

• Mixed Styles: You can combine links with other formatting like bold external links or italic page links.

Test Header/Footer

This content appears on a new page to test the header and footer functionality. The header shows "PDFMake Template Builder" centered at the top, and the footer shows "Left part" on the left and "Right part" on the right.