---
title: "Asset management"
manual: "Handlebars"
version: "main"
permalink: "https://docs.typo3.org/permalink/cpsit/typo3-handlebars:asset-management@main"
source: "Usage/AssetManagement.rst"
rendered: "2026-09-29T09:05:57+00:00"
---

# Asset management {#asset-management}

The Handlebars extension integrates with TYPO3's [Asset collector](https://docs.typo3.org/m/typo3/reference-coreapi/main/en-us/ApiOverview/Assets/Index.html#asset-collector)
to manage JavaScript and CSS assets in your frontend rendering. Assets are registered
directly through the `assets` configuration of a `HANDLEBARSTEMPLATE`
content object.

> [!NOTE]
> **See also**
>
> [Asset collector](https://docs.typo3.org/m/typo3/reference-coreapi/main/en-us/ApiOverview/Assets/Index.html#assets) in the TYPO3 Core API reference —
> covers best practices, CSP/nonce usage, priority, and general troubleshooting.

**Table of Contents**

-   [Asset Types](https://docs.typo3.org/permalink/cpsit/typo3-handlebars:asset-types@main)
-   [Configuration reference](https://docs.typo3.org/permalink/cpsit/typo3-handlebars:configuration-reference@main)

## Asset Types {#asset-types}

The AssetCollector API supports four distinct asset types, all fully supported by this extension:

1.  **External JavaScript files** — link to external `.js` files
1.  **Inline JavaScript code** — embed JavaScript directly in the page
1.  **External CSS files** — link to external `.css` files
1.  **Inline CSS code** — embed styles directly in the page

### JavaScript files {#javascript-files}

Register external JavaScript files using the `javaScript` configuration:

```typoscript
10 = HANDLEBARSTEMPLATE
10 {
    templateName = MyTemplate

    assets {
        javaScript {
            my-app-script {
                source = EXT:myext/Resources/Public/JavaScript/app.js
                attributes {
                    async = 1
                    defer = 1
                    crossorigin = anonymous
                }
                options {
                    priority = 1
                    csp = 1
                }
            }
        }
    }
}
```

### Inline JavaScript {#inline-javascript}

Add inline JavaScript code using `inlineJavaScript`:

```typoscript
assets {
    inlineJavaScript {
        my-inline-script {
            source = console.log('Hello from Handlebars'); initMyApp();
            attributes {
                type = module
            }
            options {
                priority = 1
            }
        }
    }
}
```

### CSS files {#css-files}

Register external stylesheets using the `css` configuration:

```typoscript
assets {
    css {
        my-styles {
            source = EXT:myext/Resources/Public/Css/styles.css
            attributes {
                media = screen and (max-width: 768px)
            }
            options {
                priority = 1
            }
        }
    }
}
```

### Inline CSS {#inline-css}

Add inline styles using `inlineCss`:

```typoscript
assets {
    inlineCss {
        critical-css {
            source = body { margin: 0; padding: 0; } .container { max-width: 1200px; }
        }
    }
}
```

## Configuration reference {#configuration-reference}

### source (required) {#source-required}

-   ***Type***

    string

-   ***Description***

    Asset source. For external files, use `EXT:` syntax or absolute paths.
    For inline assets, provide the code directly as a string value.

    > [!NOTE]
    > The source must be a direct string value. Dynamic asset sources via stdWrap
    > are not supported. Use fixed paths or inline code only.

-   ***Example***

    ```typoscript
    # External JavaScript file
    source = EXT:myext/Resources/Public/JavaScript/file.js

    # External CSS file
    source = EXT:myext/Resources/Public/Css/styles.css

    # Inline JavaScript code
    source = console.log('Hello');

    # Inline CSS code
    source = body { margin: 0; }
    ```

### attributes {#attributes}

-   ***Type***

    array

-   ***Description***

    HTML attributes for the generated tag. Boolean attributes (`async`,
    `defer`, `disabled`) should be set to `1`
    to enable them.

-   ***JavaScript attributes***

    -   `async` (boolean): Load script asynchronously
    -   `defer` (boolean): Defer script execution
    -   `nomodule` (boolean): Fallback for older browsers
    -   `type` (string): Script type (e.g., "module")
    -   `crossorigin` (string): CORS setting (e.g., "anonymous")
    -   `integrity` (string): Subresource Integrity hash

-   ***CSS attributes***

    -   `media` (string): Media query (e.g., "screen", "print")
    -   `disabled` (boolean): Disable stylesheet
    -   `title` (string): Stylesheet title
    -   `crossorigin` (string): CORS setting
    -   `integrity` (string): Subresource Integrity hash

-   ***Example***

    ```typoscript
    attributes {
        async = 1
        defer = 1
        type = module
        crossorigin = anonymous
        integrity = sha384-abc123def456
    }
    ```

### options {#options}

-   ***Type***

    array

-   ***Description***

    AssetCollector-specific options that control asset rendering behaviour.

-   ***Available options***

    -   `priority` (boolean): Render before other assets (default: 0)
    -   `csp` (boolean): Add CSP nonce attribute (default: 0).
        Requires TYPO3 v14+.
    -   `useNonce` (boolean): Add CSP nonce attribute (default: 0).
        Deprecated since TYPO3 v14 — use `csp` instead.

-   ***Example***

    ```typoscript
    options {
        priority = 1
        csp = 1
    }
    ```