Sugar Twig

A Symfony bundle that brings JSX-like component syntax to Twig.

Installation

composer require open-solid/sugar-twig

How it works

Define a component (templates/components/button.html.twig):

<button {{ html_attrs({'class': 'bg-primary text-primary-foreground', ...props}) }}>
    {%- block content %}{% endblock -%}
</button>

Use it with props and customize as needed:

<Button type="submit" className="h-8 px-2.5">Save</Button>

It compiles to native Twig embed/include calls at load time (native Twig cache involved):

{% embed 'components/button.html.twig' with {props: {type: 'submit' className: 'h-8 px-2.5'}} %}
    {% block content %}Save{% endblock %}
{% endembed %}

Zero runtime overhead, no custom tags to learn.

Final output:

<button type="submit" class="bg-primary text-primary-foreground h-8 px-2.5">Save</button>

Go and try it! https://open-solid.github.io/sugar-twig/

Requirements

Interactive components (dialogs, accordions, tabs, dropdowns, etc.) require Alpine.js and a couple of its plugins. See the Alpine.js setup guide for installation instructions.