---
title: "Twig template"
date: "2022-06-20T11:37:28+00:00"
summary: "Discover how to use Twig templates for custom components in Site Studio. Learn to access field values, render dropzones, and utilize Twig functions for enhanced flexibility in your Drupal development workflow."
image:
type: "page"
url: "/drupal-starter-kits/add-ons/site-studio/twig-template"
id: "f435bfd6-e0bb-4eb8-8a05-c41ff7c84c11"
---

A twig file can be used to render a custom component. All field values defined in the custom component form are accessible via the **field** variable and all dropzones via the **dropzones** variable.

Important

Field names will be converted to all **underscore** to be compatible with Twig. Ex: plain-text-area will be  
`{{ field.plain_text_area }}`  
  
Dropzones names will follow the pattern **dropzone\_\[uuid-of-the-dropzone\]**. You can find the UUID of a dropzone in the **canvas** property of the form json.  
For the example bellow, to render to dropzone, use  
`{{ dropzones['dropzone_f05eff15_335f_4a16_8cdf_e84c8601e345'] }}`

    {
      "canvas": [
         {
          "type": "item",
          "uid": "component-drop-zone-placeholder",
          "title": "Component drop zone",
          "status": {
              "collapsed": true
          },
          "iconColor": "content",
          "uuid": "f05eff15-335f-4a16-8cdf-e84c8601e345",
          "parentUid": "root"
        }
      ],
      "disabledNodes": []
    }

To add a [Twig template](https://sitestudiodocs.acquia.com/6.9/node/3046#custom-component-template) to your custom component, add a \`template\` property to the YAML file and specify the path to the Twig file.

**Only one Twig template is allowed per custom component.   
Twig template cannot be used in conjunction with the html property.**

Various twig functions are available to render field type: 

*   format\_wysiwyg
    
        {{ format_wysiwyg(field.wysiwyg['#text'], field.wysiwyg['#textFormat'], '') }}
    
*   renderInlineStyle(**string** styles)
    
        {% set styles %}
          <style>
            .twig-component .inline-style {
              color: {{ field.color_picker }};
            }
          </style>
        {% endset %}
        
        {{ renderInlineStyle(styles) }}
    
*   renderContent(**string** entity\_type, **string** view\_mode, **string** entity\_id)
    
        <div class="twig-entity-reference">
          {{  renderContent(field.entity_reference['#entity_type'], field.entity_reference['#view_mode'], field.entity_reference['#entity']) }}
        </div>
    

You can find the complete list of all twig functions defined by Site Studio in `modules/cohesion_templates/src/TwigExtension/TwigExtension.php`