--- title: TYPO3 Demo and QA Best Practices Join Forces url: "https://news.typo3.com/article/typo3-demo-and-qa-best-practices-join-forces" description: The TYPO3 Demo is a publicly available site that demonstrates TYPO3 features. The QA Best Practices initiative working on providing quality assurance best practices to the TYPO3 community. These two teams have joined their efforts to maintain the demo installation to implement best practices. image: "https://news.typo3.com/_assets/d1e01514e4c4a5b3147940fa2ec50682/Images/og-image-news.jpg" date: 2026-06-11 modified: 2026-06-11 categories: - "Developer & Technology" - "Showcase & Success" - "Product Updates & Roadmap" --- # TYPO3 Demo and QA Best Practices Join Forces - [Showcase & Success](https://news.typo3.com/article/category/showcase-success) - [Developer & Technology](https://news.typo3.com/article/category/developer-technology) - [Product Updates & Roadmap](https://news.typo3.com/article/category/product-updates-roadmap) TYPO3 Demo and QA Best Practices Join Forces ============================================ 21 June 2022 ![](https://news.typo3.com/fileadmin/_processed_/c/1/csm_qa-demo-typo3-andreas-palmer-UJSjxFNLFWY-unsplash_74382a0dc8.webp) The TYPO3 Demo is a publicly available site that demonstrates TYPO3 features. The QA Best Practices initiative working on providing quality assurance best practices to the TYPO3 community. These two teams have joined their efforts to maintain the demo installation to implement best practices. - ![](https://news.typo3.com/typo3temp/assets/t3g/blog/gravatar/bbf959d8e683550c90ae922aff9145d8.jpeg)[News team](https://news.typo3.com/article/author/news-team) Demo Project ------------ The TYPO3 demo site is available at [demo.typo3.org](https://demo.typo3.org/). The goal of the project is to provide an instance where anyone is able to log in and get an overview of how TYPO3 works. Visitors are able to log into the backend and play with content editing. The installation is maintained in a repostitory at [git.typo3.org](https://git.typo3.org/services/demo.typo3.org/site) by the [TYPO3 Demo Project team](https://typo3.org/community/teams/demo-project). QA Best Practices Initiative  ----------------------------- The QA Best Practices initiative is a group working to model best practices in TYPO3 implementation and extension development. Previously, the initiative worked on providing best practices for extension development. Now the team is focussing on best practices for projects. Have a look at their *Tea* extension for unit testing and best practices: - [GitHub](https://github.com/typo3-documentation/tea) - [Gitlab](https://gitlab.typo3.org/qa/example-extension) - [Tea Documentation](https://docs.typo3.org/p/ttn/tea/main/en-us/) Best Practices From demo.typo3.org ---------------------------------- The following are some of the best practices implemented within the demo installation. This is by no means an exhaustive list. Feel free to have a look yourself. ### Custom Content Elements Most TYPO3 installations use custom content elements to suit customer needs. The demo installation has several custom content elements like *Ingredients* and *Main Teaser*. They are available via the TYPO3 native content element wizard. Using the *[Content Defender](https://extensions.typo3.org/extension/content_defender)* extension, we make sure only those elements suitable for a given page type or content area (colPos) are available for editors to choose from. And each content element also has its own preview within the TYPO3 Page module. There are plans to migrate to b13’s extension, *[backendpreviews](https://packagist.org/packages/b13/backendpreviews)*, in the future. All in all, the demo installation demonstrates how to properly design content within TYPO3 and make it available to editors in a clean consistent way. ### 100% VCS TypoScript + TSconfig Many projects have already moved their TypoScript and TSConfig out of the database into a version control system (VCS) like Git. This is also true for the example project. The setup uses the *[bolt](https://extensions.typo3.org/extension/bolt)* extension to track changes to configuration, and for deployment of configuration alongside other changes within the installation. ### Responsive Images To render images in different sizes and resolutions we use the third-party extension *[picture](https://extensions.typo3.org/extension/picture)*. This enables us to use a replacement ViewHelper to render images in multiple resolutions. It also adds modern image formats to the mix (for example, rendering a ** tag). ### Split Up CSS An important part of a website is keeping asset sizes low to ensure a fast page load. Using TYPO3’s out-of-the-box capabilities, the demo project showcases how to include certain assets only when needed. An example would be loading the CSS directives used for our contact form only on pages that have a contact form (see the [Form template](https://git.typo3.org/services/demo.typo3.org/site/-/blob/main/src/extensions/site_t3demo/Resources/Private/Plugins/Form/Templates/Form.html#L6)). ### Inline SVG Assets We use the third-party extension *[Asset Collector](https://extensions.typo3.org/extension/assetcollector)* to dynamically include SVG files in the pages where needed. ### Connect Custom Doktypes And Backend Layouts This is a burden for many projects. Custom doktypes have been a core feature for a long time and often need a specific backend layout. The demo installation demonstrates that the backend layout can be derived from the actual doktype via a hook. This reduces maintenance overhead, removes possible bugs from the installation and reduces the list of fields an editor sees in the page properties. There are plans to migrate this setup to b13’s extension, *[doktypemapper](https://github.com/b13/doktypemapper)*, which eases integration even further. Gather Insights and Improve Your Own Project -------------------------------------------- Feel free to check out the [sources of the demo project](https://git.typo3.org/services/demo.typo3.org/site/), as well as the [QA extension](https://github.com/TYPO3-Documentation/tea). Everyone is welcome to provide feedback via our TYPO3 Slack channel [\#cig-typo3-demo](https://typo3.slack.com/archives/C92E7HUDU) and [\#qa-best-practices](https://typo3.slack.com/archives/CSQ8T0VS5). Also feel free to create issues and Pull Requests / Merge Requests on the projects. ![](https://news.typo3.com/typo3temp/assets/t3g/blog/gravatar/b5c88386e5b1d8fca79d0652427922d2.jpeg) About the Author [News team](https://news.typo3.com/article/author/news-team) [More posts by this author](https://news.typo3.com/article/author/news-team) Additional contributors ----------------------- - Copy Editor - ![](https://news.typo3.com/typo3temp/assets/t3g/blog/gravatar/49aa12815610e985a3a94122712538f2.jpeg)Felicity Brand - Publisher - ![](https://news.typo3.com/typo3temp/assets/t3g/blog/gravatar/d2606120ccc43c7846fe40337be2bc1e.png)Mathias Bolt Lesniak