EnglishNederlandsFrançais Toggle theme

Eleventy Baseline

Start building your site, skip the recurring setup work.
Table of Contents

Filters

Eleventy filters Baseline registers. Some are always available; the rest come on with the module that registers them.


At a glance

Filter Module Registered when
markdownify, relatedPosts, isString core always
inlineESbuild, inlinePostCSS assets always (assets is unconditional)
i18nTranslationsFor, i18nTranslationIn, i18nDefaultTranslation multilang when multilingual is active
_inspect, _json, _keys navigator when navigator is active

Core filters

Registered by the entry point on every build.

markdownify

Render an inline markdown string to HTML. No wrapping <p> tag (uses markdown-it's renderInline). Raw HTML in the input passes through untouched.

{{ "Read the **manual**." | markdownify }}

Use it for short bits of markdown that live in front matter or data files (taglines, descriptions). Block-level markdown belongs in .md files, not in markdownify.

relatedPosts

Filter the current page out of a collection. The page is read from this.ctx.page at render time.

{% asyncEach item in collections.docs | relatedPosts %}
	{% include "partials/related-card.njk" %}
{% endeach %}

If the page has no url (rare), the filter returns the collection unchanged.

isString

A type guard: true when the value is a string, false otherwise. Useful in templates that accept either a scalar or an object.

{% if value | isString %}
	<p>{{ value }}</p>
{% else %}
	<p>{{ value.text }}</p>
{% endif %}

Assets filters

Registered by the assets module, which is always active.

Both inline filters return raw <script> or <style> markup as a string. Nunjucks escapes strings by default, so pipe through | safe (or use {{- value | safe -}} to also strip surrounding whitespace) when you want the markup to render as HTML rather than as literal angle brackets in the page.

inlineESbuild

Async filter. Bundle a JS file through esbuild and return it wrapped in <script> tags, ready to drop into a template.

{% set jsPath = _baseline.paths.assets ~ "js/critical.js" %}
{{ jsPath | inlineESbuild({ minify: true }) | safe }}

Accepts the same options as the assets.esbuild config; per-call options are merged on top of the module-level defaults. Errors are non-fatal: a <script>/* Error processing JS */</script> placeholder is returned instead, and the build continues.

inlinePostCSS

Async filter. Process a CSS file through PostCSS (preset-env + cssnano) and return it wrapped in <style> tags.

{% set cssPath = _baseline.paths.assets ~ "css/critical.css" %}
{{ cssPath | inlinePostCSS | safe }}

Same error semantics as inlineESbuild: failures return a <style>/* Error processing CSS */</style> placeholder and the build continues.


Multilang filters

Registered by the multilang module, available only when multilingual mode is active. All three operate on collections.translations and a page's locale.translationKey.

i18nTranslationsFor(page, collection)

Returns every page in collection that shares the current page's translationKey. Useful for rendering a language switcher.

{% set translations = page | i18nTranslationsFor(collections.translations) %}
{% for variant in translations %}
	<a href="{{ variant.url }}" hreflang="{{ variant.locale.lang }}">{{ variant.locale.lang }}</a>
{% endfor %}

i18nTranslationIn(page, collection, lang)

Returns the page in collection matching the current translationKey and the requested lang, or null if no match exists.

{% set fr = page | i18nTranslationIn(collections.translations, "fr") %}
{% if fr %}
	<a href="{{ fr.url }}">Lire en français</a>
{% endif %}

i18nDefaultTranslation(page, collection)

Returns the page in collection matching the current translationKey in the site's defaultLanguage, or null if none exists. Handy for canonical resolution and fallbacks.

{% set canonical = page | i18nDefaultTranslation(collections.translations) %}

Navigator filters

Registered by the navigator module when active (default in development). All three are debugging helpers; treat them as dev-only.

_inspect

Pretty-print a value using Node's util.inspect. Defaults: depth: 4, maxArrayLength: 10, breakLength: 80, compact: true. Override per-call by passing an options object.

<pre>{{ page | _inspect({ depth: null }) }}</pre>

The navigator template (/navigator-core.html) uses _inspect with depth set from inspectorDepth (default 4; configurable via options.navigator.inspectorDepth).

_json

Serialise a value with JSON.stringify. Second argument is the indentation, default 0 (compact).

<pre>{{ page | _json(2) }}</pre>

_keys

Return an object's own keys, sorted alphabetically.

{{ page | _keys | join(", ") }}

See also

Previous: Internals

Next: Globals