Daring Designs uses cookies to enhance your experience, analyze site traffic, and improve our services. By clicking dismiss, you agree to our use of cookies.

Privacy Policy
Skip to main content
Daring Designs
Contact Search
About
Projects
Services
Blog

Twig or Antlers?

Twig is widely used in PHP-based frameworks, while Antlers is the template engine built specifically for Statamic. Let's compare the two.

General Syntax

Twig Syntax

Twig, created by the Symfony team and used by Craft CMS, uses brackets like this:

  • {{ }} for outputting variables

  • {% %} for logic like loops and conditions

  • {# #} for comments

Example Loop:

{% for post in posts %}
    <h2>{{ post.title }}</h2>
    <p>{{ post.content }}</p>
{% endfor %}

Antlers Syntax

Antlers, designed for Statamic, is a bit more concise and simplifies the syntax.

  • {{ }} for most everything like rendering variables, loops, conditionals...

  • {{? ?}} and {{$ $}} are special brackets to write, execute, and echo PHP

  • {{# #}} are for code comments

Example Loop:

{{ posts }}
    <h2>{{ title }}</h2>
    <p>{{ content }}</p>
{{ /posts }}

Check it out, you don't have to repeat post a bunch of times to access data inside the loop.

Partials Syntax

Template partials help break down templates into reusable components.

Twig Syntax

Twig uses the {% include %} statement to include partials.

{% include 'partials/header.twig' %}

<div class="content">
    {% block content %}{% endblock %}
</div>

{% include 'partials/footer.twig' %}

Twig also allows passing variables to partials:

{% include 'partials/card.twig' with { 'title': post.title, 'content': post.content } %}

Antlers Syntax

Antlers uses the {{ partial: }} tag to include partials.

{{ partial:header }}

<div class="content">
    {{ template_content }}
</div>

{{ partial:footer }}

Variables can be passed as parameters:

{{ partial:card title=title content=content }}

Slots and Embeds

Antlers Slots

Simply put, slots allow you to pass content into a partial. Check out the example below to see how it works.

This is the partial file:

{{# /resources/views/partials/modal.antlers.html #}}
 
<div class="modal">
    {{ slot }}
</div>

This is the partial being used in a template. Notice how the {{ partial:modal }} tags wrap additional content to be passed into the partial. That's cool!

{{ partial:modal }}
    <h2>50% off everything, today only!</h2>
    <a href="/sale">
        <img src="/img/sale.jpg" alt="Man eating banana on sale." />
    </a>
{{ /partial:modal }}

It's even possible to define multiple slot sections within a partial using Named Slots.

Twig Embeds

There is a way to do this in Twig too! It's just called embeds and has a bit different syntax.
It works by using a block in the partial here:

{# /partials/_card.twig #}

<div class="card">
  <h6>Heading</h6>
  {% block content %}
    <p>{{ text }}</p>
  {% endblock %}
</div>

Then in the parent template 

{% embed '_card.twig' %}
   {% block content %}
     <p>It's a me, new a content!</p>
   {% endblock %}
{% endembed %}

Stacks and Blocks

Both languages offer a method to inject template code back up into parent layouts. Useful for injecting JavaScript libraries into the <head> element needed by child templates.

Twig's Blocks Syntax

In this Twig example, the block headJS is defined and then can be redefined in a child template that extends the parent _layout template.

Parent template:

{# /templates/_layout.twig #}

{% block headJS %}{% endblock %}

Child template:

{% extends '_layout.twig' %}

{% block headJS %}
    <script src="https://js.stripe.com/v3/"></script>
{% endblock %}

Note: It's not possible to call {% block headJS %} again in the template if its already been defined once. So it's kinda a one shot deal.

Antlers Stacks Syntax

Antlers lets you push things to a stack defined here in a parent _layout. Then in a child template (or even in the same template) you can append any thing in between those {{ push:scripts }} tags. You can do it any where and multiple times.

Parent template:

{{# /resources/views/_layout.antlers.twig #}}

{{ stack:headJS }}

Child Template:

{{ push:scripts }}
    <script src="https://js.stripe.com/v3/"></script>
{{ /push:scripts }}

Another child template:

{{ push:scripts }}
    <script src="more.js"></script>
{{ /push:scripts }}

To prepend content to the beginning of a stack, use the {{ prepend }} tag.

{{ prepend:scripts }}
    <script src="firstScript.js"></script>
{{ prepend:scripts }}

Filters and Modifiers

Both languages here have built in functions to modify your data that are accessed using the | character followed by a function name.

Twig Filters

Twig has a standard set of filters here in the docs, but if you are using something like Craft CMS there are more options available to you!

Example:

{{ now | date('d-m-Y') }}

{# Output: 2-20-2025 #}

Antlers Modifiers

Antlers has a whole ton of modifiers. You could spend days in the documentation here.

Example:

{{ now | format('d-m-Y') }}

{{# Output: 2-20-2025 #}}

Dumping Out Data

Twig Syntax

Dumping variables in twig uses the {{ dump() }} function syntax. It's recommended to wrap the dump tag in <pre> </pre> tags to make it easier to read.

<pre>
    {{ dump(user) }}
</pre>

This will render the data out to the template in the location you are dumping. So if you are dumping within a narrow card component's template it might be hard to read.

Antlers Syntax

Dumping in Antlers is done using the modifier | dump and {{ dump }} tag. Results always render at the top of the screen making it a bit easier to find.

Use the dump modifier like this after a variable name:

{{ food | dump }}

Use the dump tag like this within a loop to view the current context:

{{ gallery }}
    {{ dump }}
{{ /gallery }}

Conclusion

Twig and Antlers both offer robust functionality over php as a templating language. That's great, but we like Antlers for its concise syntax, extensive modifiers, and unique stacks feature. The downside, it's only available for Statamic. It shouldn't be the only reason to pick Statamic, but its a good one.

Twig on the other hand is platform agnostic and can be used for broader PHP applications. We've also heard Twig is more performant but haven't confirmed this, and antlers seems plenty fast.

Related Blog Posts