--- title: "Using TYPO3 Mask: Easily Create Custom Content Elements" url: "https://nitsantech.de/en/blog/typo3-mask" description: "Learn to use TYPO3 Mask: from installation & module access to field creation, TCA customization, & element metadata for an optimized content workflow." image: "https://nitsantech.de/fileadmin/_processed_/9/3/csm_Benutzerdefinierte_Inhaltselemente_mit_der_TYPO3_Mask_ExtensionBanner_470b21e446.jpg" date: 2024-09-20 modified: 2026-01-29 lastUpdated: 2026-02-25 categories: - TYPO3 CMS --- # Using TYPO3 Mask: Easily Create Custom Content Elements Custom content elements with TYPO3 Mask Extension ================================================= 31 Jan 2025 [![](https://nitsantech.de/fileadmin/ns_theme_nitsan/Team_Slider/Sven_Thelemann.png)](https://nitsantech.de/en/blog/author/sven-thelemann) [Sven Thelemann](https://nitsantech.de/en/blog/author/sven-thelemann) [ TYPO3 CMS ](https://nitsantech.de/en/categories/typo3-cms) Tired of going through the tedious process of creating custom content elements in TYPO3? Say goodbye to the complexities of coding and welcome Mask, the innovative solution that simplifies content creation in TYPO3; a tool widely adopted by TYPO3 Agency. ![Custom content elements with TYPO3 Mask Extension](https://nitsantech.de/fileadmin/ns_theme_ns2019/blog/_live/Creating_Custom_Content_Elements_with_Mask/Benutzerdefinierte_Inhaltselemente_mit_der_TYPO3_Mask_ExtensionFeature.jpg) Table of content In this blog post, we'll explore how Mask revolutionizes the way you create and manage custom content elements, making TYPO3 development more efficient and user-friendly. Once you have followed the simple [**TYPO3 installation**](https://nitsantech.de/en/blog/installing-typo3) steps, you can start using Mask immediately. ### Installation guide This comprehensive guide will take you through the installation and configuration steps to get you started with Mask without any problems. **Preparations**: Before delving into TYPO3 Mask, make sure you have set up your site package. This is crucial for seamless integration and customization. **Adding Mask as a dependency**: Adding Mask as a dependency in the **ext\_emconf.php** of your site package is crucial to ensure that TYPO3 Mask is loaded before your theme [**TYPO3 extension**](https://nitsantech.de/en/blog/typo3-extensions). This order allows you to effectively override Mask's generated TCA in your "Overrides" folder. Check your current [**TYPO3 version**](https://nitsantech.de/en/blog/check-typo3-version) now with our free [**TYPO3 Version Checker**](https://nitsantech.de/en/typo3-version-checker). ```php $EM_CONF[$_EXTKEY] = [ 'constraints' => [ 'depends' => [ 'mask' => '8.1' // Add the minimum version here or leave blank for any version. ] ] ]; ``` Conveniently access the [**TYPO3 backend**](https://nitsantech.de/en/blog/typo3-backend) module, which is located directly below the extension manager module. With just a few clicks, you are ready to create personalized content elements tailored to your specific requirements. For Composer installations, you should also not forget the request in the **composer.json** file of your extension. It's worth noting that in TYPO3 v11, the **ext\_emconf.php** file is no longer required in Composer mode. **{ "require": { "mask/mask": "^8.1" } }** **Note:** If you add the dependency after [**TYPO3 Mask**](https://nitsantech.de/en/blog/typo3-mask) has already been installed and activated, it is necessary to rebuild the loading order by reinstalling your extension. Not sure of your TYPO3 version? Check it now and take action. ------------------------------------------------------------- Your TYPO3 Version:13.4 Congratulations, your TYPO3 system is up to date with version 13! We would be happy to take care of the maintenance and installation of regular system and security updates for you. [Contact us](https://nitsantech.de/en/inquire) now for a non-binding, customized quote! Your TYPO3 Version: With TYPO3 version 12, you still have some time before support expires at the end of April 2029. Nevertheless, we recommend upgrading to the latest version 13 to keep your system up to date. You will also benefit from the latest TYPO3 features. We would be happy to check your system for upgrade possibilities. [Contact us](https://nitsantech.de/en/inquire) now for a non-binding, customized quote! You do not have a TYPO3 system, or we are unable to identify your version. Please contact us for an individual review of your system and a non-binding initial consultation regarding your TYPO3 upgrade. The upgrade is particularly critical for TYPO3 systems older than version 8, as the lack of further development and support can lead to acute security vulnerabilities. Let us plan your next [TYPO3 upgrade](https://nitsantech.de/en/services/typo3-upgrade-service) together! Please enter a valid domain - Download TYPO3 Mask with [**TYPO3 Composer**](https://nitsantech.de/en/blog/typo3-composer) by executing the command composer require mask/mask or install it via the extension manager. - Activate Mask in the extension manager. (Not required in Composer mode of TYPO3 v11) - Mask requires fluid\_styled\_content, so make sure it is included in your static bindings in the [**TYPO3 template**](https://nitsantech.de/en/blog/typo3-templates) module. - You can install fluid\_styled\_content in composer mode with the command: composer require typo3/cms-fluid-styled-content. - Also add the static [**TypoScript**](https://nitsantech.de/en/typoscript-conditions-with-symfony-expression-language) from TYPO3 Mask. - Switch to the Mask module and enter the key of your page package extension for automatic configuration (your extension must be loaded). - Start creating your own content elements with ease! ### Manual configuration: If you want to customize the folder structure that is created by the automatic configuration, you can customize each path in the extension configuration of TYPO3 Mask. **Tip**: It is recommended to have the LocalConfiguration.php file (where the extension configuration is stored) in the version management to facilitate sharing and collaboration. To create your first content element, simply click on the "Create new content element" button. This action will trigger a wizard that will guide you through filling in some mandatory fields. Name: Enter a descriptive name for this content item that will be visible to editors when the content item is created. Key (unique, lower case): Assign a unique key to your element. This key is crucial for defining the CType (content type) and generating the Fluid HTML templates associated with this content element. Make sure that the key is unique and in lower case. ![New content element wizard](https://nitsantech.de/fileadmin/ns_theme_ns2019/blog/_live/Creating_Custom_Content_Elements_with_Mask/Neuer_Inhalts_element_Assistent.jpg "New content element wizard") Once you have defined the name and the key, click on "Finish" and the mask builder will open. The "Fields" tab is opened by default so that you can continue with further adjustments. ![Form Configuration Screen](https://nitsantech.de/fileadmin/ns_theme_ns2019/blog/_live/Creating_Custom_Content_Elements_with_Mask/Formular-Konfigurationsbildschirm.jpg "Form Configuration Screen") You can now equip your element with various fields. Take a look at the "Field types" page for detailed information on all available field types. Simply drag the desired field into the drag & drop area in the middle of the screen. Alternatively, you can click on a field and it will be inserted below the currently active field. Once inserted, a form will appear on the right-hand side, allowing you to configure the field according to your requirements. ![How do I create fields in Mask](https://nitsantech.de/fileadmin/ns_theme_ns2019/blog/_live/Creating_Custom_Content_Elements_with_Mask/Mask_Field_Creation.jpg "How do I create fields in Mask") Similar to the element key, you must develop a unique key for your field. User-defined fields always start with the prefix "tx\_mask\_", which cannot be removed. This prefix is crucial to avoid conflicts with existing fields. In addition, you have the option to choose from existing TYPO3 core fields or TYPO3 mask fields in the drop-down menu. Most fields share the following options: - **Field key:** This is the unique key for the field, as described previously. It determines the name of the new column in the database table tt\_content. - **Label:** The label is what editors see when they edit the content item. It can be a localized string. - **Description:** This provides additional information for editors and appears below the label. It is helpful to guide editors when using the field. - **Reset to default:** This option resets all TCA (Table Configuration Array) options to their default values, except for the label and description. The Table Configuration Array (TCA) is important for Mask in [**TYPO3 development**](https://nitsantech.de/en/services/typo3-development). The TCA defines the structure and behavior of database tables used by [**TYPO3**](https://nitsantech.de/en/blog/typo3) to store content items, including custom content items created with TYPO3 Mask. Here's why the TCA is important for Mask: #### **Database structure:** The TCA defines the structure of the database tables in which content items are stored. When you create custom content items with Mask, the TCA defines how the data for these items is stored in the database. #### **Field configuration:** The TCA allows you to configure various properties of fields within content items, such as their type, label, description and validation rules. This configuration ensures consistency and integrity of the data stored in the database. #### **Integration with TYPO3 Core:** The TCA provides integration with TYPO3's core features, allowing content elements generated by TYPO3 Mask to interact seamlessly with other TYPO3 features and extensions. #### **Customization and extensibility:** The TCA offers extensive customization options that allow you to adjust the behavior and appearance of content elements according to your specific requirements. This flexibility allows developers to create rich and dynamic user experiences within TYPO3. The "Element metadata" tab provides essential details about your content element in TYPO3. Here you will find general information such as the name and key that you may have defined during creation. You will also find the following fields: - **Short title**: this field provides a concise title for your element, which is visible when you select the element type. If it is left blank, the default title will be used. - **Description**: By adding a description, editors can better understand the purpose of the element. It appears next to the title and the preview image in the creation wizard. - **Icon**: Quickly add a preview icon to your element by selecting from a range of FontAwesome icons. Choose from different categories or search by keyword. If no symbol is specified, a fallback symbol will be generated using the first letter of your label. - **Color**: Adjust the color of the icon to improve visual distinction. TYPO3 Mask revolutionizes content creation in TYPO3, providing a user-friendly solution for easy creation of custom content elements. With its intuitive user interface, flexible customization options and seamless integration with TYPO3, Mask enables developers to create dynamic and engaging websites efficiently. Say goodbye to tedious coding and say hello to TYPO3 Mask - your ultimate tool for custom content creation in TYPO3. Get in touch with **NITSAN** - [**Typo3 agency**](https://nitsantech.de/en/typo3-agency) for expert support and guidance. #### Contact for Internet agency and TYPO3 projects #### Sven Thelemann Service Partner - Germany [ st@nitsantech.de ](mailto:st@nitsantech.de) [ +49 351 48196661 ](tel:4935148196661) ![Sven Thelemann](/fileadmin/ns_theme_nitsan/CTA/SVEN__1_.png "Sven Thelemann") ![](https://nitsantech.de/fileadmin/ns_theme_nitsan/Team_Slider/Sven_Thelemann.png) ### Sven Thelemann Client Service Lead - [](https://www.linkedin.com/in/sven-thelemann-0a30867b/ "linkedin") Sven Thelemann serves as the Client Service Lead at NITSAN, focusing on delivering TYPO3 solutions that meet client goals. With a strong understanding of technology and client expectations, he ensures smooth communication and project execution. Outside of work, Sven enjoys cycling and experimenting with homemade recipes. Comments and Responses ---------------------- Thank you for your comment. Your Comment Added Successfully. Thank you for your comment. Your Comment Will Be Visible After Approval. Oops! Something went wrong, please try again later. ##### **Be the First to Comment** ### Related Blogs [ ![](https://nitsantech.de/data:,) #### TYPO3 CMS for Public Sector Websites: Requirements and Best Practices ](https://nitsantech.de/en/typo3-public-sector-2026) [ ![](https://nitsantech.de/data:,) #### TYPO3 SEO: Improve Your TYPO3 Website Ranking ](https://nitsantech.de/en/blog/typo3-seo)