Indentation and Block Formation in TypoScript

By using indentation and block formation, you can greatly improve the readability of your TypoScript templates.


A central requirement for programming (and thus also for TypoScript) is a legible and maintainable source code. This is above all achieved with a well structured code. Syntax highlighting in the applied editor additionally improves legibility and what is more it generally reduces errors.

Negative Example

This example shows how the "formatting" of TypoScript source code should not look.

Negative example 1: Unstructured TypoScript
temp.a_link = TEXT
temp.a_link.value = This is the anchor text
temp.a_link.wrap = <p>|</p>
temp.a_link.typolink.parameter = 123
temp.a_link.typolink.ATagParams = title="The title attribute"

The element identifier temp.a_link is repeated in every line. Not only does this mean more work, but it also makes the code unnecessarily inflated and confusing. When renaming the identifier there is also the additional danger that a newly made copy may get forgotten or spelt incorrectly.

The disadvantages with missing indentation and syntax highlighting will be made more obvious in the next negative example.

Negative example 2: Unstructured TypoScript
temp.a_menu = HMENU
temp.a_menu.entryLevel = 0
temp.a_menu.wrap = <ul>|</ul>
temp.a_menu.1 = TMENU
temp.a_menu.1.expAll = 0
temp.a_menu.1.noBlur = 1
temp.a_menu.1.NO.allWrap = <li>|</li>
temp.a_menu.1.NO.ATagTitle.field = nav_title // title
temp.a_menu.1.ACT < .NO
temp.a_menu.1.ACT = 1
temp.a_menu.1.ACT.allWrap = <li class="active">|</li>
temp.a_menu.1.ACT.linkWrap = &gt; |
temp.a_menu.2 = TMENU
temp.a_menu.2.expAll = 0
temp.a_menu.2.noBlur = 1
temp.a_menu.2.NO.allWrap = <li class="level2">|</li>

Best Practice

Here you can see how the above demonstrated code can be written in a more readable and structured manner.

Improvement 1: Structured TypoScript with syntax highlighting
temp.a_link = TEXT
temp.a_link {
  value = This is the anchor text
  typolink {
    parameter = 123
    ATagParams = title="The title attribute"
  wrap = <p>|</p>

With indentation and above all with block formation, associated elements (for example typolink) become much clearer. The syntax highlighting contributes significantly to improved legibility.

The improvements are displayed even more clearly in the next example:

Improvement 2: Structured TypoScript with syntax highlighting
temp.a_menu = HMENU
temp.a_menu {
  entryLevel = 0
  1 = TMENU
  1 {
    expAll = 0
    noBlur = 1
    NO {
      allWrap = <li>|</li>
      ATagTitle.field = nav_title // title
    ACT < .NO
    ACT = 1
    ACT {
      allWrap = <li class="active">|</li>
      linkWrap = &gt; |
  2 < .1
  2 {
    NO {
      allWrap = <li class="level2">|</li>
#      ...
#  ...
  wrap = <ul>|</ul>

With both suggested solutions you can see that we have added the enclosed wrap to the end of the relevant element. This is not absolutely necessary, however we have got into the habit of doing this because we think that it is more logical here than at the start of the element definition.

TypoScript Editors and Plug-ins

To support the source code formatting, there are special TypoScript editors or TypoScript plug-ins for IDEs.