Skip to main content
This guide walks you through creating a custom resume template from scratch. You’ll learn the template JSON schema, required fields, and best practices.

​
Quick Start

To create a new template:
1

Create a JSON file

Create a new file in /src/templates/ with a descriptive name (e.g., creative.json)
2

Define the template structure

Add the required fields: id, name, description, theme, layout, structure, and sectionVariants
3

Configure the theme

Set up colors, typography, and spacing to match your design vision
4

Test the template

Load your template in the application and verify it renders correctly

​
Template JSON Schema

Here’s the TypeScript definition for a template configuration:
/src/types/template.ts
export type TemplateConfig = {
  id: string;
  name: string;
  description: string;
  theme: ThemeConfig;
  layout: {
    type: 'single-column' | 'two-column';
    columns?: string;
    sidebarPosition?: 'left' | 'right';
  };
  structure: {
    sidebar?: SectionId[];
    main: SectionId[];
  };
  sectionVariants: Record<SectionId, SectionVariant>;
};

​
Required Fields

​
Basic Information

​
id
string
required
Unique identifier for the template (lowercase, kebab-case recommended)
​
name
string
required
Display name shown in the UI
​
description
string
required
Brief description of the template’s style and use case

​
Theme Configuration

The theme object defines all visual styling:
/src/types/template.ts
export type ThemeConfig = {
  colors: {
    primary: string;
    secondary: string;
    background: string;
    text: string;
    textMuted: string;
    border: string;
    sidebarText?: string;
  };
  typography: {
    fontFamily: string;
    headingFamily?: string;
    baseSize: string;
    lineHeight: string;
  };
  spacing: {
    sectionGap: string;
    itemGap: string;
    pagePadding: string;
  };
};
  • Use hex color codes (e.g., "#2563eb")
  • Ensure sufficient contrast between text and background (WCAG AA minimum)
  • primary is typically used for headings and key highlights
  • textMuted should be readable but less prominent than main text
  • sidebarText is only needed for two-column layouts with colored sidebars
  • Include fallback fonts (e.g., "Inter, sans-serif")
  • Common base sizes: "10pt" (compact), "11pt" (standard)
  • Line height between 1.4 and 1.6 works well for most resumes
  • Consider using the same font for body and headings for consistency
  • Use consistent units (rem or cm recommended)
  • Typical section gaps: "1.5rem" to "2.5rem"
  • Keep page padding generous enough for printing (minimum "2rem" or "2cm")
  • Ensure spacing works well when printed on A4 or Letter paper

​
Layout Configuration

Choose between single-column and two-column layouts: 
{
  "layout": {
    "type": "single-column"
  },
  "structure": {
    "main": [
      "personal-info",
      "summary",
      "experience",
      "projects",
      "education",
      "skills",
      "customSections"
    ]
  }
}
For two-column layouts, the columns field uses CSS grid syntax. A 35/65 split ("35% 1fr") or 30/70 split ("30% 70%") works well for most resumes.

​
Section IDs

All sections must use these predefined IDs:
/src/types.ts
export type SectionId = 
  | 'personal-info'
  | 'summary'
  | 'experience'
  | 'projects'
  | 'education'
  | 'skills'
  | 'customSections';
Every section ID must appear exactly once in either structure.main or structure.sidebar.

​
Section Variants

Section variants control how each section is visually rendered:
/src/types/template.ts
export type SectionVariant = 
  | 'default' 
  | 'centered' 
  | 'minimal' 
  | 'timeline' 
  | 'grid' 
  | 'tags' 
  | 'bubbles' 
  | 'bullet-list'
  | 'sidebar'
  | 'compact';

​
Variant Usage Recommendations

  • centered - Center-aligned name and contact info (common for single-column)
  • default - Left-aligned layout (common for two-column)
  • default - Standard paragraph format
  • minimal - Reduced visual weight
  • default - Full-featured with company, position, dates, and description
  • minimal - Simplified layout with less spacing
  • timeline - Visual timeline representation
  • default - Standard layout with school, degree, and dates
  • minimal - Compact format
  • bullet-list - Simple bulleted list
  • tags - Tag/badge style
  • sidebar - Optimized for sidebar display
  • grid - Multi-column grid layout
  • default - Full project cards with description and links
  • compact - Condensed format
  • default - Standard section formatting

​
Complete Example Template

Here’s a complete example of a custom “Creative” template:
/src/templates/creative.json
{
  "id": "creative",
  "name": "Creative",
  "description": "A bold, colorful template for creative professionals.",
  "theme": {
    "colors": {
      "primary": "#8b5cf6",
      "secondary": "#f3f4f6",
      "background": "#ffffff",
      "text": "#1f2937",
      "textMuted": "#6b7280",
      "border": "#e5e7eb",
      "sidebarText": "#ffffff"
    },
    "typography": {
      "fontFamily": "Inter, -apple-system, sans-serif",
      "headingFamily": "Inter, -apple-system, sans-serif",
      "baseSize": "10pt",
      "lineHeight": "1.5"
    },
    "spacing": {
      "sectionGap": "2rem",
      "itemGap": "1.25rem",
      "pagePadding": "2rem"
    }
  },
  "layout": {
    "type": "two-column",
    "columns": "30% 1fr",
    "sidebarPosition": "left"
  },
  "structure": {
    "sidebar": [
      "personal-info",
      "skills",
      "education"
    ],
    "main": [
      "summary",
      "experience",
      "projects",
      "customSections"
    ]
  },
  "sectionVariants": {
    "personal-info": "default",
    "summary": "default",
    "experience": "default",
    "education": "minimal",
    "skills": "tags",
    "projects": "default",
    "customSections": "default"
  }
}

​
Best Practices

Design for Print

Test your template with actual printing. Ensure margins are adequate and colors print well in grayscale.

Maintain Readability

Use readable font sizes (minimum 10pt) and sufficient contrast ratios for accessibility.

Be Consistent

Use spacing and styling consistently throughout the template for a professional appearance.

Consider Content Length

Design layouts that work well with varying amounts of content in each section.

​
Testing Checklist

1

Visual rendering

Verify the template renders correctly in the preview
2

All sections

Test with content in every section type
3

Varying content lengths

Check with minimal content and maximum content
4

PDF export

Generate a PDF and verify formatting is preserved
5

Print test

Print the PDF on actual paper to check margins and colors
Always include all seven section IDs in your sectionVariants object, even if some sections won’t typically contain content. This prevents rendering errors.

​
Troubleshooting

  • Verify the JSON file is in /src/templates/
  • Check that the JSON syntax is valid (no trailing commas, proper quotes)
  • Ensure the template ID matches the filename
  • Restart the development server
  • Verify all section IDs are spelled correctly
  • Ensure each section appears exactly once in structure
  • Check that all section IDs have a corresponding entry in sectionVariants
  • Use consistent units throughout (don’t mix rem, px, and cm)
  • Test with different content lengths
  • Check that pagePadding provides enough margin for printing
  • Ensure hex codes include the # symbol
  • Verify color values are valid hex codes
  • Check that there’s sufficient contrast for readability

​
Next Steps

Template Overview

Learn more about how the template system works

Resume Renderer

Understand how templates are rendered

Build docs developers (and LLMs) love

Get started for freeTalk to us