HTML Engine

The HTML engine generates clean, web-ready HTML versions of your resume. This is particularly useful for embedding your resume on websites, sharing it online, or creating a web-based portfolio.

Configuration

To use the HTML engine, specify engine: html in your layout configuration.

layouts:
  - engine: html
    template: calm
    # ... other options

Sections

The sections option allows you to customize the section titles and their order. For more information, see the sections documentation.

layouts:
  - engine: html
    sections:
      aliases:
        work: "Professional Experience"
        education: "Education"
        skills: "Skills"
      order:
        - basics
        - work
        - education

Templates

The template option allows you to choose from a variety of templates. Each template has a unique design and layout. You can find a list of available templates in the templates documentation.

layouts:
  - engine: html
    template: calm

Typography

The typography option allows you to customize font styles used in your resume.

Font Family

The fontFamily option allows you to specify a prioritized list of font family names and/or generic family names. This works exactly like the CSS font-family property.

Line Spacing

The lineSpacing option allows you to adjust the line spacing (leading) of the document. YAMLResume uses semantic values that map to engine-specific implementations:

Value	Description
`tight`	Compact spacing for fitting more content
`snug`	Slightly more space than tight
`normal`	Balanced readability (default)
`relaxed`	More breathing room between lines
`loose`	Very spacious layout

layouts:
  - engine: html
    typography:
      fontSize: 16px
      fontFamily: "Merriweather, serif"
      lineSpacing: relaxed

The theme option allows you to customize the visual appearance of your resume without affecting measurable layout geometry (page size, margins, font sizes) or section structure. Currently it supports accent colors, and all HTML templates honor them.

Accent Color

The theme.colors.accent option sets the accent color used for headlines, section titles, links, and highlighted labels. It accepts either one of the named color presets or an arbitrary #RRGGBB hex color string:

Color	Preset	Hex
	`black`	`#000000`
	`blue`	`#3873B3`
	`burgundy`	`#980000`
	`cerulean`	`#0081A7`
	`green`	`#59B24D`
	`grey`	`#737373`
	`orange`	`#F28C26`
	`purple`	`#8054CC`
	`red`	`#F23333`

layouts:
  - engine: html
    theme:
      colors:
        accent: burgundy # or an arbitrary hex color like "#1B365D"

Here is the kami template rendered with four accent presets:

burgundy

cerulean

green

purple

The accent color presets follow the moderncv color scheme palette. If the accent color is not set, each template falls back to its own default palette.

Advanced

The advanced option allows you to configure advanced settings for the HTML engine.

Show Anchors

The showAnchors option controls whether to emit fragment id attributes on sections and entries for anchor navigation. It is enabled by default: with anchors on, every section gets an id like work and every entry gets an id like work-2, so you can link directly to a specific part of the resume.

layouts:
  - engine: html
    advanced:
      # Emit fragment `id` attributes on sections and entries.
      showAnchors: true
      showIcons: true
      # Custom title for the HTML document.
      title: "My Custom Resume Title"
      # Custom footer for the HTML document.
      footer: "Generated by <a href=\"https://yamlresume.dev\">YAMLResume</a>"
      # Meta description for the HTML document.
      description: "A brief description of the resume for SEO."
      # Meta keywords for the HTML document.
      keywords: "resume, cv, yamlresume"