Web Development

TypoScript: TYPO3 CMS Configuration Language Guide

Define how TYPO3 CMS renders web content using TypoScript. Explore core syntax, the difference between Frontend and TSconfig, and common fixes.

1.0k
typoscript
Monthly Search Volume
Keyword Research

TypoScript is a declarative configuration language used specifically for the TYPO3 Content Management System. It acts as the "glue" that connects website design with content stored in a database. Developers use it to define how individual elements, such as navigation bars and headlines, appear to visitors.

TypoScript is a domain-specific language used to configure the TYPO3 CMS. While it includes "Script" in its name, it is not a programming language but a configuration method. It allows developers to define website rendering and backend behavior without modifying the system's core PHP code.

What is TypoScript?

TypoScript is an object-based configuration language organized in a tree-like structure. It is strictly used within the TYPO3 ecosystem to manage everything from frontend display to the functional behavior of the administrative backend.

Internally, TYPO3 parses this code into a system-wide PHP array. Objects and properties are defined on the left side of an expression, while the values are assigned on the right. Both objects and properties can contain other objects, which developers navigate using dot notation (e.g., page.10.value).

Why TypoScript matters

TypoScript is central to the TYPO3 philosophy of separating content from layout. Content is stored in a relational database, while design templates are stored on the file system. TypoScript reads that content, prepares it for display, and renders it in the frontend.

How TypoScript works

TypoScript works by defining objects and assigning properties to them. When the frontend renders a page, the system searches up the page tree to find a "main" TypoScript record marked with a rootlevel flag.

  1. Parsing: The system converts the declarative code into a PHP array.
  2. Object Creation: The system creates objects based on the configuration (e.g., a PAGE object or a TEXT object).
  3. Property Evaluation: Each object identifies the properties it knows and ignores those it does not.
  4. Content Retrieval: Data is pulled from the tt_content database table based on fields like CType (content type) and pid (page ID).
  5. Frontend Delivery: The final HTML is generated and sent to the browser.

Types of TypoScript

The corpus identifies two primary applications for TypoScript:

Type Purpose Use Case
Frontend TypoScript Defines website rendering. Managing navigation, content elements, and HTML structure.
Backend TypoScript (TSconfig) Configures the administrative environment. Changing the look or behavior of backend forms for specific users or pages.

Best practices

Understand the logical structure first. Avoid trying arbitrary properties until things work. Understanding the internal PHP array relationship prevents time wasted on trial and error.

Verify object properties. Only use properties that are valid for the specific object type. Adding a property called myFunction to a TEXT object will have no effect because that object does not recognize that parameter.

Locate the main record. Ensure your primary configuration is in a "main" TypoScript record with the rootlevel flag enabled. This tells TYPO3 where the configuration begins for that specific page tree branch.

Common mistakes

Mistake: Forgetting the rootlevel flag. Symptom: You will see a "No TypoScript record found!" error. Fix: Enable the root level flag in the options tab of your template record.

Mistake: Missing the PAGE object. Symptom: You will see an error stating "The page is not configured! [type=0][]". Fix: Define at least one PAGE object with a typeNum = 0.

Mistake: Confusion with TypeScript. Symptom: Attempting to use JavaScript-based syntax or logic. Fix: Remember that TypoScript is a configuration language for TYPO3, not a general-purpose scripting language.

Mistake: Outdated terminology. Symptom: Searching for "TypoScript Template" in newer versions (v12+). Fix: Use the modern terms "TypoScript record" or "TypoScript file."

Examples

Example scenario: Basic Page Output This code creates a basic page that outputs "Hello World" in the frontend.

page = PAGE
page.10 = TEXT
page.10.value = Hello World

Example scenario: Wrapping Content This example uses the stdWrap function to place content inside a header tag.

page.10 = TEXT
page.10.value = Hello World
page.10.stdWrap.wrap = <h2>|</h2>

TypoScript vs. TypeScript

While the names are similar, these are entirely different technologies.

Feature TypoScript TypeScript
Goal Configure TYPO3 CMS Programming/Application logic
Language Type Declarative Configuration Strongly typed JavaScript superset
Environment TYPO3 Backend/Frontend Browser/Node.js
Risk Incorrect rendering or backend errors Logical bugs or syntax errors

FAQ

Is TypoScript a programming language?
No. TypoScript is a configuration language. It is used to set values and properties in a PHP array that TYPO3 uses to build the site. You cannot write programs or complex logic with it.

Where is TypoScript stored?
It is typically stored in "TypoScript records" in the TYPO3 database or in dedicated files within a site package.

What is the difference between Frontend and Backend TypoScript?
Frontend TypoScript controls what a visitor sees on the website. Backend TypoScript, often called TSconfig, changes the appearance and functionality of the TYPO3 administrative interface for editors and admins.

Why does my page say "No TypoScript record found"?
This occurs when the system cannot find a TypoScript record with the "root level" flag enabled in your page tree. TYPO3 needs this to know which configuration to apply.

Can I use TypoScript with other CMS platforms?
No. TypoScript is a domain-specific language unique to the TYPO3 ecosystem.

How does TypoScript handle design?
It acts as the intermediary. Since TYPO3 6, the system has used the Fluid templating engine for design, and TypoScript is used to configure and connect those Fluid templates to the actual content in the database.

Start Your SEO Research in Seconds

5 free searches/day • No credit card needed • Access all features