11ty nunjucks front matter parsing

11ty lets web authors add a tag to a page in the front matter:

tags: cat

Or several tags:

- cat
- dog

Either way, 11ty will include that page in a collection of articles tagged 'cat'.

I wanted to be able to process my own front matter variables the same way, using either format. Let's consider the following front matter variable:

- Syrah
- Chardonnay

Because there's more than one value, wines is an array. I can put each item of the array in a <span> element with a for loop:

{% for grape in wines %}
<span>{{ grape }}</span>
{% endfor %}

The output will be:


But what if there's only one item in the variable?

wines: Syrah

If you're using nunjucks as your 11ty template language as I am, the for loop will treat the string as an array of letters:


Not what I want. I filed an issue in 11ty's GitHub repo asking for help, and got an answer in less than a day: custom filter! Here's what I added to my .eleventy.js configuration file:

eleventyConfig.addFilter("toArray", function(value) {
if (Array.isArray(value)) {
return value;
return [value];

I then apply the filter to my front matter variable:

{% for grape in wines | toArray %}
<span>{{ grape }}</span>
{% endfor %}

Now the output is what I want:


Thanks to GitHub user Peter deHaan for the idea and the filter code.