open-solid/sugar-twig

Syntactic sugar for Twig templates

This package's canonical repository appears to be gone and the package has been frozen as a result. Email us for help if needed.

dev-main 2026-04-15 12:18 UTC

Requires

• php: >=8.4
• symfony/console: ^7.4|^8.0
• twig/html-extra: ^2.16|^3.24

Requires (Dev)

• friendsofphp/php-cs-fixer: ^3.94
• phpunit/phpunit: ^13.0
• tales-from-a-dev/twig-tailwind-extra: ^1.1

MIT

README

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.