Markdown to PDF

Learn

Custom Template Builder: Create Branded PDF Layouts

Step-by-step guide to building reusable custom templates with your brand's fonts, colors, logo, and page structure.

Published 2026-05-03 · Updated 2026-05-03

Custom Template Builder: Create Branded PDF Layouts

The Custom Template Builder lets you design reusable PDF layouts that match your brand. You control typography, colors, spacing, headers, footers, images, and page structure — then apply them to any Markdown content with one click.

Custom templates are saved to your account and available anywhere you use the converter. Build once, reuse forever.

Opening the Builder

  1. Sign in to your account.
  2. Navigate to Dashboard → Template Builder or click the link in the dashboard.
  3. You’ll see a three-panel layout:
    • Left: Template Library — your saved templates
    • Center: Live Preview + Layout Builder — see changes instantly
    • Right: Template Inspector — all editing controls

Creating Your First Template

Step 1: Name Your Template

In the Inspector panel (right side), give your template a name and optional description. Choose the base template that best matches your starting point — you can change this later.

Step 2: Set Up Branding

Scroll to the Branding section in the Inspector:

  • Brand Name: Appears in the header of your PDF.
  • Subtitle: Secondary text below the brand name.
  • Footer Text: Appears at the bottom of every page.

These text fields use the template’s header and footer blocks. You can customize how they appear by editing those blocks.

Step 3: Configure Page Shell

The Page Shell section controls the outer container of your PDF:

  • Background Color: The page background (default: white).
  • Padding: Top, right, bottom, left padding around all content.

Use padding to create breathing room around your document. For letterhead-style layouts, increase top padding and add a colored background.

Working with Layout Blocks

The Layout Builder (center panel) manages the structure of your template. Each block represents a section of the page:

Block Type Purpose
Header Brand name, logo, and subtitle at the top of the page
Brand Image A logo or hero image below the header
Body Where your Markdown content renders (required)
Divider A horizontal rule to separate sections
Spacer Empty vertical space between blocks
Footer Footer text and copyright at the bottom

Managing Blocks

  • Add: Click any block button (Header, Brand Image, etc.) to insert it.
  • Reorder: Drag blocks using the grip handle to change their order.
  • Hide/Show: Toggle visibility with the eye icon. Hidden blocks don’t appear in the PDF.
  • Delete: Click the trash icon on any block except Body (which is required).

Editing a Block

Click a block in the Layout Builder to select it. The Inspector shows its settings:

  • Label: Internal name for the block (not shown in the PDF).
  • Text: Content that appears in this block (for Header, Footer).
  • Border Color & Radius: Visual styling for the block container.
  • Padding & Margin: Spacing controls for the block.
  • Image Upload (Header and Brand Image only): Upload a PNG, JPEG, WebP, or GIF (max 10 MB).

Customizing Typography

The most powerful feature of the Custom Template Builder is per-element typography control. You can style every Markdown element independently:

Typography Targets

Target Controls
Body Base font, size, weight, color, line height for all text
Headings (h1-h4) Individual font, size, weight, and color for each heading level
Paragraph Body text styling independent of headings
Inline Code & Code Blocks Monospace font selection, background color
Links Link color and decoration
Blockquotes Border color, background, font style
Tables Header background, cell padding, border styling
Lists Bullet/number styling, indentation

Typography Controls

For each element you can set:

  • Font Family: Choose from 33 fonts including Inter, Libre Baskerville, Montserrat, DM Sans, Space Grotesk, and locale-specific options like Noto Sans Arabic and Noto Sans JP.
  • Font Size: In pixels (6-128).
  • Font Weight: 100-900 in increments of 100.
  • Color: Any hex color via the color picker.
  • Background Color: Highlight color behind the text.
  • Alignment: Left, center, or right.
  • Line Height: Control text density.
  • Letter Spacing: Tighten or loosen character spacing.
  • Text Transform: Uppercase, lowercase, or capitalize.
  • Underline / Strikethrough: Toggle decorations.

Typography Tips

  • Set body font first: The body font cascades to other elements. Pick your primary font, then override specific elements.
  • Limit font variety: 1-2 font families create a cohesive look. Use weight and size for hierarchy.
  • Match your brand: Upload your logo, set your brand colors as heading/text colors, and use your company font.

Uploading Images

Header and Brand Image blocks support image uploads:

  1. Select a Header or Brand Image block.
  2. Click Upload Image.
  3. Choose a PNG, JPEG, WebP, or GIF file (max 10 MB).
  4. The image appears in the block and in the live preview.

Images are stored with your template. You can replace or clear them anytime.

Saving and Using Templates

  • Save: Click “Save Template” to store your template. It appears in your Template Library.
  • Set as Default: Check “Set as default template” to auto-select this template when you open the converter.
  • Use in Converter: In the main converter, your saved templates appear under “Saved Templates” — click one to apply it.

Pro Tips

  1. Start simple: Begin with 3-4 blocks (Header, Body, Footer) and add more as needed.
  2. Preview often: The live preview updates as you edit — use it to fine-tune spacing and typography.
  3. Duplicate for variations: Create a base template, then duplicate and customize for different document types (reports, invoices, letters).
  4. Use the Clean template as a base: It has the simplest styling and is easiest to customize.
  5. Test with real content: Load actual Markdown content to see how your template handles long headings, tables, and code blocks.

Next: API Automation

Once your templates are set up, you can generate PDFs programmatically using the API. See the API documentation for details.