Have ideas to improve npm?Join in the discussion! »


    1.1.0 • Public • Published

    fractal-typo3 NPM version NPM downloads Dependency Status Development Dependency Status

    TYPO3 bridge for the Fractal component library tool (http://fractal.build / @frctl)


    This Fractal plugin lets you use the Open Source CMS TYPO3 as source of and template engine for your web component library. It is the counterpart to the TYPO3 component library extension.



    To add TYPO3 support to your Fractal instance, run

    npm install --save fractal-typo3

    in your project root directory. Also, make sure you installed and enabled the TYPO3 component library extension in your TYPO3 instance.


    To enable TYPO3 as component source and template engine, add these settings to your fractal.js configuration:

    const path = require('path');
    const fractal = module.exports = require('@frctl/fractal').create();
    const typo3 = require('fractal-typo3');
    // Configure the absolute URL of your TYPO3 frontend
    typo3.configure('web', 'http://example.com');
    // Configure Fractal's component base directory
    fractal.components.set('path', path.join(__dirname, 'fractal', 'components'));
    // Add a "TBD" component status label
    fractal.components.set('statuses', Object.assign({
        tbd: {
            label: 'TBD',
            description: 'Planned but not yet started. Go ahead! :)',
            color: '#CCCCCC'
    }, fractal.components.get('statuses')));
    // Set the directory for static assets to your TYPO3 root directory
    fractal.web.set('static.path', path.join(__dirname, 'web'));
    // Configure Fractal to use TYPO3 as template engine
    fractal.components.set('ext', '.t3s');
    // Register the 'update-typo3' custom command
    fractal.cli.command('update-typo3', typo3.update, {
        description: 'Synchronise components with TYPO3'

    Make sure that your server knows how to resolve the absolute URL to your TYPO3 frontend. You might need to add an entry to your hosts file for this to work under certain circumstances.

    Component dependency graphs

    If you have GraphViz available on your server, you can enable an additional Fractal panel that will give you a dynamically created dependency graph for each component:

    Component dependency graph

    To enable the Graph panel in Fractal, edit your fractal.js and pass a Fractal theme instance as third argument to the typo3.configure() method:

    const path = require('path');
    const fractal = module.exports = require('@frctl/fractal').create();
    const typo3 = require('fractal-typo3');
    // Create a custom theme and pass it to the configuration method
    const typo3Theme = require('@frctl/mandelbrot')();
    typo3.configure('web', 'http://example.com', typo3Theme);
    /* ... */

    Component update against TYPO3

    Run the following command to synchronise with TYPO3 and build your component library:

    fractal update-typo3

    You should see a list of components that are created / updated during synchronisation:

    √ Generic/Hero
    √ Generic/Collapsible
    √ Generic/Definition List
    √ Generic/Menu/Button
    √ Generic/Menu/Breadcrumb
    √ Generic/Menu/Main

    Please restart your Fractal server in case the Web UI doesn't reflect the changes automatically. After refresh, your TYPO3 components should show up in Fractal:

    TYPO3 components in Fractal

    Instead of displaying pre-rendered results, Fractal uses TYPO3 as real-time template engine for rendering your TYPO3 components on demand, hence the short rendering delay.

    Local component folder configuration

    You can configure some select properties of your Fractal component folders by placing a local.json file into the corresponding directory of your component definition directory structure in TYPO3. The following options are supported:

        "dirsort": 1, // Used to order directories other than alphabetically
        "label": "Icons & images" // Custom folder name not attainable via real directory name, e.g. including special characters


    Found a bug or have a feature request? Please have a look at the known issues first and open a new issue if necessary. Please see contributing and conduct for details.


    If you discover any security related issues, please email joschi@tollwerk.de instead of using the issue tracker.



    Copyright © 2020 Joschi Kuphal / joschi@tollwerk.de. Licensed under the terms of the MIT license.


    npm i fractal-typo3

    DownloadsWeekly Downloads






    Unpacked Size

    654 kB

    Total Files


    Last publish


    • avatar