Liquid Templates

Stedefast supports Liquid as a first-class template engine alongside React. Liquid is well-suited to simpler pages that don't require client-side interactivity.

Basic template

{% layout "default" %}

<article>
  <h1>{{ page.frontMatter.title }}</h1>
  {% if page.frontMatter.date %}
    <time>{{ page.frontMatter.date | date: "%B %d, %Y" }}</time>
  {% endif %}
  {{ page.content }}
</article>

The {% layout "default" %} tag tells Stedefast to wrap this template in theme/layouts/default.liquid (or default.tsx if no Liquid layout exists).

Available variables

All PageContext fields are available as top-level Liquid variables:

Variable	Type	Description
page.slug	string	URL slug
page.url	string	Canonical URL
page.type	string	Content type name
page.frontMatter	object	Front matter fields
page.content	string	Pre-rendered HTML (use {{ page.content }} — not escaped)
page.excerpt	string	First paragraph
page.readingTimeMinutes	number	Estimated reading time
site.title	string	Site title
site.description	string	Site description
site.baseUrl	string	Base URL
site.nav	array	Nav pages
listing	object	Listing page data (if present)

Template resolution

Template resolution works identically to React — Liquid files use .liquid extension:

1. theme/templates/{slug}.liquid
2. theme/templates/{type}.liquid
3. theme/templates/default.liquid

Template engine priority

If both .tsx and .liquid files exist for a type, the order is determined by templateEngines in your config:

export default defineConfig({
  templateEngines: ["react", "liquid"], // React takes priority
});