v1.0.0 2021-11-14 13:56 UTC

This package is auto-updated.

Last update: 2022-11-14 15:56:17 UTC


This library allows you to define custom elements for usage in (Twig) templates.

Think of it as light-weight SSR (Server Side Rendererd) Web Components.

For example, you can create a new element such as <Avatar username="alice" imageUrl="https://example.web/alice.webp" bio="Hello world" />

Then you define a twig template elements/Avatar.html.twig such as the following:

<div class="card avatar">
  <div class="card-body">
    {% if imageUrl is defined %}
      <img src="{{ imageUrl }}" class="avatar-image" />
    {% endif %}
    {% if bio is defined %}
      <small>{{ bio }}</small>
    {% endif %}

Your custom element can now be rendered using your custom element template. The template receives a variable for every specified attribute.

Custom elements will only be rendered if they start with an upper-case character (to distinguish standard from custom elements)



Add the following to your services.yaml to register the renderer and the twig extension:

        tags: ['twig.extension']
    LinkORB\Component\CustomElement\CustomElementRenderer: ~

The renderer

You can turn any raw HTML with custom elements into a rendered HTML output like this:

$renderer = new Renderer($twig);
$html = $renderer->render($htmlWithCustomElements);

The Twig extension

You can render custom elements from any Twig template using the filter:

{{ html|custom_element_render|raw }}


MIT. Please refer to the license file for details.

Brought to you by the LinkORB Engineering team

Check out our other projects at

Btw, we're hiring!