Skip to main content
The Resume Builder uses a flexible JSON-based template system that controls the visual appearance and layout of resumes. Each template defines colors, typography, spacing, layout structure, and section variants.

​
How Templates Work

Templates are JSON configuration files that define:
  • Theme: Colors, typography, and spacing
  • Layout: Single-column or two-column with optional sidebar
  • Structure: Which sections appear in which areas
  • Section Variants: Visual styles for each section
When you select a template, the Resume Renderer reads the configuration and applies it to your resume data, generating a styled PDF output.
All templates are located in /src/templates/ as JSON files. The system currently includes three built-in templates: Modern, Minimal, and Classic.

​
Template JSON Structure

Here’s the complete structure of a template configuration: 
{
  "id": "modern",
  "name": "Modern",
  "description": "A contemporary two-column layout with a vibrant sidebar.",
  "theme": {
    "colors": {
      "primary": "#2563eb",
      "secondary": "#2563eb",
      "background": "#ffffff",
      "text": "#1a1a1a",
      "textMuted": "#666666",
      "border": "#e0e0e0",
      "sidebarText": "#ffffff"
    },
    "typography": {
      "fontFamily": "Inter, sans-serif",
      "headingFamily": "Inter, sans-serif",
      "baseSize": "10pt",
      "lineHeight": "1.5"
    },
    "spacing": {
      "sectionGap": "2rem",
      "itemGap": "1rem",
      "pagePadding": "2rem"
    }
  },
  "layout": {
    "type": "two-column",
    "columns": "35% 1fr",
    "sidebarPosition": "left"
  },
  "structure": {
    "sidebar": [
      "personal-info",
      "skills",
      "education"
    ],
    "main": [
      "summary",
      "experience",
      "projects",
      "customSections"
    ]
  },
  "sectionVariants": {
    "personal-info": "default",
    "summary": "default",
    "experience": "default",
    "education": "default",
    "skills": "sidebar",
    "projects": "default",
    "customSections": "default"
  }
}

​
Theme Configuration

The theme object controls the visual styling of your template.

​
Colors

Define the color palette for your template:
​
primary
string
required
Primary accent color (used for headings, highlights)
​
secondary
string
required
Secondary accent color (used for backgrounds, subtle highlights)
​
background
string
required
Page background color
​
text
string
required
Main text color
​
textMuted
string
required
Muted text color (used for dates, secondary information)
​
border
string
required
Border color for dividers and separators
​
sidebarText
string
Text color for sidebar content (only used in two-column layouts)

​
Typography

Control font styles and sizing:
​
fontFamily
string
required
Primary font family for body text
​
headingFamily
string
Font family for headings (defaults to fontFamily if not specified)
​
baseSize
string
required
Base font size (e.g., “10pt”, “11pt”)
​
lineHeight
string
required
Line height for body text (e.g., “1.5”, “1.6”)
"typography": {
  "fontFamily": "Inter, sans-serif",
  "headingFamily": "Inter, sans-serif",
  "baseSize": "10pt",
  "lineHeight": "1.5"
}

​
Spacing

Define spacing between elements:
​
sectionGap
string
required
Space between sections (e.g., “2rem”, “1.5rem”)
​
itemGap
string
required
Space between items within a section
​
pagePadding
string
required
Page margins/padding (e.g., “2rem”, “3rem 2.5rem”, “2.5cm”)

​
Layout Types

Templates support two layout types:

​
Single-Column Layout

A traditional single-column layout where all sections flow vertically: 
"layout": {
  "type": "single-column"
},
"structure": {
  "main": [
    "personal-info",
    "summary",
    "experience",
    "projects",
    "education",
    "skills",
    "customSections"
  ]
}

​
Two-Column Layout

A two-column layout with a sidebar for specific sections: 
"layout": {
  "type": "two-column",
  "columns": "35% 1fr",
  "sidebarPosition": "left"
},
"structure": {
  "sidebar": ["personal-info", "skills", "education"],
  "main": ["summary", "experience", "projects", "customSections"]
}
​
columns
string
CSS grid column definition (e.g., “30% 70%”, “35% 1fr”)
​
sidebarPosition
'left' | 'right'
Position of the sidebar column

​
Section Variants

Section variants control how individual sections are rendered. Each section can have a different visual style:
​
Available Variants
string
  • default - Standard section styling
  • centered - Center-aligned content (typically for personal info)
  • minimal - Minimalist styling with reduced visual weight
  • timeline - Timeline-style layout with dates
  • grid - Grid-based layout
  • tags - Tag/badge style (good for skills)
  • bubbles - Bubble/pill style
  • bullet-list - Simple bullet list
  • sidebar - Sidebar-optimized styling
  • compact - Dense, space-efficient layout

​
Example: Different Skill Variants

"sectionVariants": {
  "skills": "sidebar"
}

​
Built-in Templates

The system includes three pre-built templates:

Modern

Two-column layout with vibrant sidebar and contemporary styling

Minimal

Clean single-column layout with elegant typography

Classic

Traditional professional layout with serif fonts

​
Next Steps

Creating Templates

Learn how to create your own custom templates

Type Definitions

View the TypeScript types for templates

Build docs developers (and LLMs) love

Get started for freeTalk to us