PHPackages                             pti/pti - PHPackages - PHPackages  [Skip to content](#main-content)[PHPackages](/)[Directory](/)[Categories](/categories)[Trending](/trending)[Leaderboard](/leaderboard)[Changelog](/changelog)[Analyze](/analyze)[Collections](/collections)[Log in](/login)[Sign up](/register)

1. [Directory](/)
2. /
3. [Utility & Helpers](/categories/utility)
4. /
5. pti/pti

ActiveTypo3-cms-extension[Utility & Helpers](/categories/utility)

pti/pti
=======

Prototype Integration

v5.0.1(10mo ago)74.1k↓33.3%3[2 PRs](https://github.com/SomeBdyElse/typo3-pti/pulls)2PHPPHP ^8.3CI failing

Since Sep 27Pushed 3mo ago3 watchersCompare

[ Source](https://github.com/SomeBdyElse/typo3-pti)[ Packagist](https://packagist.org/packages/pti/pti)[ RSS](/packages/pti-pti/feed)WikiDiscussions main Synced 1mo ago

READMEChangelogDependencies (2)Versions (22)Used By (2)

Prototype Integration
=====================

[](#prototype-integration)

This TYPO3 extension makes it easy to use different template engines in TYPO3. It supports engines like Twig, Handlebars, Phug, and more, without needing to convert the markup to Fluid first. This is useful if you already have a pattern library in tools like Pattern Lab or Fractal.

Additionally, Prototype Integration can provide a JSON content API for your TYPO3 site.

Installation
------------

[](#installation)

To use a specific template engine like twig, require the relevant pti flavor.

```
composer require pti/pti-twig
```

If you would just like to offer a content API and output json it is sufficient to install pti itself

```
composer require pti/pti
```

Single content element
----------------------

[](#single-content-element)

To render a single content element type via PTI, use the `PTI` content object:

```
tt_content.text = PTI

```

This way the tt\_content row will be passed to the template engine.

Optionally, define a template, data processor and data processor configuration:

```
tt_content.textpic = PTI
tt_content.textpic {
    templateName = @content-elements/ce03-textpic/ce03-textpic.twig
    dataProcessors {
        10 = PrototypeIntegration\Demo\Processors\ContentElements\Ce03TextImage
        10 {
            picture {
                default {
                    width = 320c
                    height = 193c
                    cropVariant = default
                }

                variants {
                    5 {
                        config {
                            mediaQuery = (min-width: 1200px)
                            cropVariant = default
                            width = 945c
                            height = 570c
                        }
                    }
                }
            }
        }
    }
}

```

A sample data processor for a simple content element:

```