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.

{
  "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 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
  copy

  {{ format_wysiwyg(field.wysiwyg['#text'], field.wysiwyg['#textFormat'], '') }}

• renderInlineStyle(string styles)
  copy

  {% 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)
  copy

  <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

Twig template

{
  "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": []
}

Various twig functions are available to render field type: 

• format_wysiwyg
  copy

  {{ format_wysiwyg(field.wysiwyg['#text'], field.wysiwyg['#textFormat'], '') }}

• renderInlineStyle(string styles)
  copy

  {% 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)
  copy

  <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