---
title: "Installation"
manual: "StyleX Connector"
version: "1.1"
permalink: "https://docs.typo3.org/permalink/skom/stylex-connector:installation@1.1"
source: "Installation/Index.rst"
rendered: "2026-11-01T18:26:19+00:00"
---

# Installation {#installation}

Start here to connect a StyleX build to TYPO3. The connector resolves class
names from a JSON manifest; it does not compile StyleX or deliver CSS. A
working site therefore needs the extension, a frontend build, manifest
registration, and an asset include in the rendered page.

This guide uses a Composer-based TYPO3 project and a sitepackage named
`my_sitepackage` under `packages/my_sitepackage`. Run commands from the
project root and substitute your own package name and paths. The extension
targets TYPO3 12.4, 13.4, and 14.3 or later in the 14.x line. TYPO3 12.4
supports PHP 8.1 through 8.4; TYPO3 13.4 and 14.3 require PHP 8.2 or later.
This extension currently limits its PHP support to 8.4. You also need
a Node.js version supported by your Vite release.

TYPO3 12.4 is in ELTS. Use a current patched ELTS core release in production.

Follow these pages in order:

-   [Install the extension and asset dependencies](https://docs.typo3.org/permalink/skom/stylex-connector:install-the-extension-and-asset-dependencies@1.1)
-   [DDEV development server](https://docs.typo3.org/permalink/skom/stylex-connector:ddev-development-server@1.1)
-   [Vite and asset delivery](https://docs.typo3.org/permalink/skom/stylex-connector:vite-and-asset-delivery-1@1.1)
-   [Connect the build to TYPO3](https://docs.typo3.org/permalink/skom/stylex-connector:connect-the-build-to-typo3@1.1)
-   [Verify development and production delivery](https://docs.typo3.org/permalink/skom/stylex-connector:verify-development-and-production-delivery@1.1)

If the project already has Vite, keep its package manager, lockfile, plugins,
and entrypoint. Add the StyleX and manifest steps in [Vite and asset delivery](https://docs.typo3.org/permalink/skom/stylex-connector:vite-and-asset-delivery@1.1) to that
build. For a new DDEV project, read [DDEV development server](https://docs.typo3.org/permalink/skom/stylex-connector:vite-ddev-setup@1.1) after installing the
dependencies, then return to the Vite guide. DDEV changes how the development
server runs; it does not change the manifest or TYPO3 configuration.

After verification, see [Using the ViewHelper](https://docs.typo3.org/permalink/skom/stylex-connector:using-the-viewhelper@1.1) for class composition.
For Content Blocks, Fluid Styled Content, or Bootstrap, choose the relevant
guide under [Integrations](https://docs.typo3.org/permalink/skom/stylex-connector:integrations@1.1) after the base installation works.

## Working with AI agents {#working-with-ai-agents}

The [typo3-stylex Skill](https://github.com/Starraider/ai-typo3-integrator-plugin/tree/main/skills/typo3-stylex)
provides agent-specific setup and verification instructions for this stack.