Overview
Custom templates give you complete control over the HTML and CSS of your changelog pages. Using Liquid templating, you can create a fully custom design that perfectly matches your brand.
Getting Started
To create a custom template, go to the Templates page and click the "Build Your Own" card at the end of the template list. You'll be taken to the template editor where you can write your HTML and CSS.
Liquid Templating
Custom templates use Liquid, a safe templating language. Liquid uses double curly braces for outputting variables ({{ variable }}) and curly brace-percent for logic ({% if condition %}). This keeps your templates secure while giving you flexibility.
Main Page Variables
These variables are available on your main changelog listing page:
{{ project_name }}- Your repository name{{ changelog_title }}- Custom title for your changelog{{ logo }}- URL to your light mode logo{{ logo_dark }}- URL to your dark mode logo{{ favicon }}- URL to your favicon{{ rss_url }}- RSS feed URL{{ subscribe_form }}- Email subscription form HTML{{ pagination }}- Pagination controls{{ autochangelog_branding }}- Powered by AutoChangelog footer
Looping Through Entries
Use a for loop to display your changelog entries:
{% for entry in entries %}
<article>
<h2>{{ entry.title }}</h2>
<time>{{ entry.published_at | date: "%B %d, %Y" }}</time>
<p>{{ entry.summary }}</p>
<a href="{{ entry.url }}">Read more</a>
</article>
{% endfor %}
Each entry has these properties:
{{ entry.title }}- Entry title{{ entry.slug }}- URL-friendly identifier{{ entry.url }}- Full URL to the entry{{ entry.published_at }}- Publication date{{ entry.version }}- Version number if set{{ entry.tags }}- Array of tags{{ entry.summary }}- Entry summary
Entry Page Variables
The entry page template has access to additional variables for the single entry:
{{ entry.content }}- Full entry content (HTML){{ changelog_url }}- URL back to the main changelog{{ prev_entry }}- Previous entry (has title, slug, url){{ next_entry }}- Next entry (has title, slug, url)
Conditionals
Use conditionals to show content only when certain data exists:
{% if entry.version %}
<span class="version">{{ entry.version }}</span>
{% endif %}
{% if prev_entry %}
<a href="{{ prev_entry.url }}">Previous: {{ prev_entry.title }}</a>
{% endif %}
Date Formatting
Format dates using Liquid filters:
{{ entry.published_at | date: "%B %d, %Y" }}
// Output: December 4, 2025
{{ entry.published_at | date: "%Y-%m-%d" }}
// Output: 2025-12-04
{{ entry.published_at | date: "%b %d" }}
// Output: Dec 04
Adding CSS
Your custom CSS goes in the dedicated CSS field. It will be injected into both your main page and entry page templates. Write standard CSS to style your elements. Note: SCSS, SASS, and other CSS preprocessors are not supported—use plain CSS only.
body {
font-family: system-ui, sans-serif;
max-width: 800px;
margin: 0 auto;
padding: 2rem;
}
.entry {
border-bottom: 1px solid #eee;
padding: 2rem 0;
}
.version {
background: #10b981;
color: white;
padding: 0.25rem 0.5rem;
border-radius: 4px;
}
Using Tailwind CSS
If you prefer Tailwind CSS, enable the "Use Tailwind CSS" option. Write your templates using Tailwind utility classes and they'll be compiled automatically when you save.
<article class="bg-white rounded-lg shadow-md p-6 mb-4">
<h2 class="text-2xl font-bold text-gray-900">{{ entry.title }}</h2>
<time class="text-sm text-gray-500">{{ entry.published_at | date: "%B %d, %Y" }}</time>
</article>
Google Fonts
Select a Google Font from the dropdown and it will be automatically loaded in your template's <head>. Choose from over 60 popular fonts including Roboto, Inter, Poppins, Playfair Display, and more. Then apply the font in your CSS:
body {
font-family: 'Inter', sans-serif;
}
h1, h2, h3 {
font-family: 'Playfair Display', serif;
}
Complete Example
Here's a minimal but complete template to get you started:
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>{{ changelog_title }}</title>
{% if favicon %}
<link rel="icon" href="{{ favicon }}">
{% endif %}
</head>
<body>
<header>
{% if logo %}
<img src="{{ logo }}" alt="{{ project_name }}" width="{{ logo_width }}">
{% endif %}
<h1>{{ changelog_title }}</h1>
</header>
<main>
{% for entry in entries %}
<article>
{% if entry.version %}
<span class="version">{{ entry.version }}</span>
{% endif %}
<h2><a href="{{ entry.url }}">{{ entry.title }}</a></h2>
<time>{{ entry.published_at | date: "%B %d, %Y" }}</time>
<p>{{ entry.summary }}</p>
</article>
{% endfor %}
</main>
{{ pagination }}
{{ subscribe_form }}
{{ autochangelog_branding }}
</body>
</html>
Applying to a Repository
After creating your custom template, go to the Templates page. Your custom templates appear alongside the built-in ones. Click "Select" on your template, then choose which repository to apply it to. Your changelog will immediately start using the new design.
Preview
Use the Preview button in the template editor to see how your template looks with real or sample data. If you have 10 or more changelog entries, the preview uses your real data. Otherwise, it shows sample entries.
Tips
- Start simple and add complexity gradually
- Test with both light and dark mode if you're supporting both
- Include responsive styles for mobile devices
- Use the variable reference panel while editing for quick access to available variables
- Template errors will show a helpful message. Check your Liquid syntax if something doesn't look right