Skip to content
Use Twig templates with Fractal.
Branch: master
Clone or download
Chapabu Merge pull request #21 from risker/feature/config-plugins
Add ability to register custom twig.js plugins and add docs
Latest commit a399e25 Feb 5, 2019
Type Name Latest commit message Commit time
Failed to load latest commit information.
src use engine instance to extend twig Feb 4, 2019
.gitignore Initial commit Aug 29, 2016 add docs with usage examples Feb 4, 2019
index.js Initial commit Aug 29, 2016
package-lock.json 1.0.0-beta.5 Oct 15, 2018
package.json 1.0.0-beta.5 Oct 15, 2018

Twig Adapter

An adapter to let you use Twig templates with Fractal.

Requires Fractal v1.1.0 or greater.

To install this adapter run this command:

npm install @frctl/twig

then open your fractal.js file and add following lines:

 * Require the Twig adapter
const twigAdapter = require('@frctl/twig')();
fractal.components.set('ext', '.twig');

Extending with a custom config

 * Require the Twig adapter
const twigAdapter = require('@frctl/twig')({
    // if pristine is set to true, bundled filters, functions, tests
    // and tags are not registered.
    // default is false
    pristine: false,

    // if importContext is set to true, all include calls are passed
    // the component's context
    // default is false
    importContext: false,

    // use custom handle prefix
    // this will change your includes to {% include '%button' %}
    // default is '@'
    handlePrefix: '%',

    // register custom filters
    filters: {
        // usage: {{ label|capitalize }}
        capitalize: function(str) {
            if (!str) return '';

            return str.charAt(0).toUpperCase() + str.slice(1);

    // register custom functions
    functions: {
        // usage: {{ capitalize(label) }}
        capitalize: function(str) {
            if (!str) return '';

            return str.charAt(0).toUpperCase() + str.slice(1);

    // register custom tests
    tests: {
        // usage: {% if label is equalToNull %}
        equalToNull: function(param) {
            return param === null;

    // register custom tags
    tags: {
        flag: function(Twig) {
            // usage: {% flag "ajax" %}
            // all credit to
            return {
                // unique name for tag type
                type: "flag",
                // regex match for tag (flag white-space anything)
                regex: /^flag\s+(.+)$/,
                // this is a standalone tag and doesn't require a following tag
                next: [ ],
                open: true,

                // runs on matched tokens when the template is loaded. (once per template)
                compile: function (token) {
                    var expression = token.match[1];

                    // Compile the expression. (turns the string into tokens)
                    token.stack = Twig.expression.compile.apply(this, [{
                        type:  Twig.expression.type.expression,
                        value: expression

                    delete token.match;
                    return token;

                // Runs when the template is rendered
                parse: function (token, context, chain) {
                    // parse the tokens into a value with the render context
                    var name = Twig.expression.parse.apply(this, [token.stack, context]),
                        output = '';

                    flags[name] = true;

                    return {
                        chain: false,
                        output: output

Using external plugins

An example to use twig-js-markdown:

const twigMarkdown = require('twig-markdown');
const instance = fractal.components.engine(twigAdapter);

// instance.twig refers to the twig.js instance

Included filters


Takes a root-relative path and re-writes it if required to make it work in static HTML exports.

It is strongly recommended to use this filter whenever you need to link to any static assets from your templates.

The path argument should begin with a slash and be relative to the web root. During a static HTML export this path will then be re-written to be relative to the current page.


{{ '/css/my-stylesheet.css'|path }}

Included tags


The render tag renders a component (referenced by its handle) using the context data provided to it. If no data is provided, it will use the context data defined within the component's configuration file, if it has one.


{% render "@component" with {some: 'values'} %}
You can’t perform that action at this time.