A minimal page created by pure TypoScript

TypoScript is the basic configuration language used to configure the frontend output of a page in TYPO3.

You can find detailed information about TypoScript and its syntax in the reference "TYPO3 Explained".

The semantics of TypoScript settings are listed in the TypoScript Reference.

"Hello world" example in TypoScript

To start, in the TYPO3 backend, create a standard page named Minimal example just under (inside) the page tree TYPO3 logo container. Add a basic site configuration for this page.

Create a new TypoScript template record on this page. Give the TypoScript template a title, and make it a root level template, but do not include any static templates.

In the TypoScript template Setup field, add the following three lines:

"Setup" field in the TypoScript record

# Create the frontend output of the page
page = PAGE
page {
    # Show a text with value "Hello world."
    10 = TEXT
    10.value = Hello, world.
}

Is a comment. See the Syntax of comments in TypoScript: Comments.
Assigns a top level object of type PAGE to a variable called page.
The page gets more options in this block. See the Blocks in the TypoScript syntax.
Another comment.
Assigns a content object (also called "cObject") of type TEXT to index number 10 of page. It has the path page.10 if you want to change it later.
Assigns the value Hello, world. to the value property of the TEXT cObject stored in path page.10.

Clear all caches via the following console command or the button in the backend:

ddev typo3 cache:flush

You can now preview the result.

Resulting web page

Here is the resulting web page HTML source for both the TypoScript-only and the Fluid-based implementations. Notice how TYPO3 has added default markup around the single line of content:

Example frontend output

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <!--
       This website is powered by TYPO3 - inspiring people to share!
       TYPO3 is a free open source Content Management Framework initially
       created by Kasper Skaarhoj and licensed under GNU/GPL.
       TYPO3 is copyright 1998-2018 of Kasper Skaarhoj. Extensions are
       copyright of their respective owners.
       Information and contribution at https://typo3.org/
    -->
    <title>Example site - Start page</title>
    <meta name="generator" content="TYPO3 CMS">
</head>
<body>
Hello, world.
</body>
</html>

Debug the TypoScript in the backend module "Active TypoScript"

Open the backend module Web > Template > TypoScript Object Browser. You can find the variable page that you just defined. The other variables have been created by TypoScript loaded globally by the TYPO3 Core and system extensions. They are some of the Reserved top-level objects.

Play around with TypoScript

You can now try out a couple of TypoScript commands to familiarize yourself with TypoScript.

Here are some examples:

Wrap "Hello, world." in p-tags

"Setup" field in the TypoScript record

page = PAGE
page {
    10 = TEXT
    10 {
        value = Hello, world.
        stdWrap.wrap = <p>|</p>
    }
}

As we now have several options for TEXT object with path page.10, we switch to the block syntax here.
Assign the text to the value property of the TEXT object.
We use the stdWrap property of the TEXT object to configure the stdWrap function.

In this function we use the option wrap wrap. It surrounds the current content of the TEXT object as set in line 5 with the value defined here. The pipe | character is replaced by the text that corresponds to the value property.

Note

You may sometimes see that stdWrap functionality is directly applied to a TEXT object like this:

"Setup" field in the TypoScript record

page = PAGE
page {
    10 = TEXT
    10 {
        value = Hello, world.
        wrap = <p>|</p>
    }
}

For backward compatibility reasons it is possible to apply stdWrap properties directly to TEXT object. This is only true for TEXT objects, not any other TypoScript cObject types. So we recommend to always use stdWrap to stay consistent.

Display the title of the current page on top

"Setup" field in the TypoScript record

page = PAGE
page {
    5 = TEXT
    5 {
        stdWrap.field = title
        stdWrap.wrap = <h1>|</h1>
    }
    10 = TEXT
    10 {
        value = Hello, world.
        stdWrap.wrap = <p>|</p>
    }
}

We assign a second content object (also called "cObject") of type TEXT to index number 5 of page. As the index is smaller than the index 10 of the TEXT object containing the text "Hello World", it is displayed before the other object.
Uses the block syntax to apply properties to the TEXT object.
Uses the stdWrap property field to fetch the field title from the database record of the current page.
Uses the stdWrap property wrap to wrap the current string fetched in line 5 in <h1> tags.

Note

The order in which the content objects are defined in the TypoScript file does not matter. They are output from the smallest index to the largest. Therefore the following would give you the same output:

"Setup" field in the TypoScript record

page = PAGE
page {
    10 = TEXT
    10 {
        value = Hello, world.
        stdWrap.wrap = <p>|</p>
    }
    5 = TEXT
    5 {
        stdWrap.field = title
        stdWrap.wrap = <h1>|</h1>
    }
}