What does it do? 

• Displays the page tree as a network graph with nodes and links
• Optionally shows content elements connected to their parent pages
• Provides hover highlighting, click-to-select, and search filtering
• Allows direct editing of pages and content elements via pencil links
• Supports light and dark mode across TYPO3 12, 13, and 14

Who is it for? 

• Editors who want a visual overview of their site structure
• Administrators reviewing page tree complexity
• Developers debugging page hierarchies and content placement

Composer 

composer require rtfirst/page-graph

Then activate and clear caches:

vendor/bin/typo3 extension:setup
vendor/bin/typo3 cache:flush

Requirements 

• TYPO3 12.4, 13.x, or 14.x
• PHP 8.1 or higher
• TYPO3 Dashboard system extension (typo3/cms-dashboard)

Widget Options 

The widget is registered with the following defaults in Services.yaml:

• includeContent: true — show content element nodes by default
• refreshAvailable: true — allow dashboard refresh
• height: large — large widget height
• width: large — large widget width

These can be customized by overriding the widget service definition in your own extension's Services.yaml.

Adding the Widget 

1. Navigate to the Dashboard module in the TYPO3 backend
2. Click Add widget
3. Select Page Graph from the content group
4. The widget displays your page tree as an interactive graph

Interactions 

Persistent Settings 

The widget remembers your settings (layout mode, content/reference toggles) in the browser's localStorage. When you return to the dashboard, the widget restores your last configuration automatically. Settings are stored per browser origin, so multiple TYPO3 installations on different domains do not interfere with each other.

Dark Mode 

The widget automatically detects the current theme:

• TYPO3 13+: Reads data-bs-theme attribute
• TYPO3 12: Falls back to OS preference via prefers-color-scheme

Architecture 

The extension consists of two main PHP classes and a JavaScript module:

Graph Data Structure 

The getGraphData() method returns:

{
    "nodes": [
        {"id": "p-3", "uid": 3, "label": "Home", "type": "page", ...},
        {"id": "c-42", "uid": 42, "label": "Welcome", "type": "content", ...}
    ],
    "links": [
        {"source": "p-3", "target": "p-5", "type": "tree"},
        {"source": "p-3", "target": "c-42", "type": "content"}
    ],
    "meta": {"totalPages": 25, "totalContent": 87}
}

Unit Tests 

The extension ships with PHPUnit unit tests located in Tests/Unit/.

ddev exec "cd packages/page_graph && ../../vendor/bin/phpunit \
    --bootstrap ../../vendor/autoload.php Tests/Unit/"

Updating Vendor Libraries 

The bundled force-graph library can be updated with the provided shell script. No npm or Node.js installation is required for end users — the minified file is always committed to Git.

cd packages/page_graph
bash Build/update-vendor.sh

bash Build/update-vendor.sh 1.52.0

The script:

• Fetches the minified build from unpkg.com
• Prepends a version comment to the first line
• Updates the version reference in Resources/Public/JavaScript/Vendor/LICENSE.md

After updating, verify the widget still works in the TYPO3 dashboard and commit the changed files.

Cross-Version Compatibility 

The extension supports TYPO3 12.4, 13.x, and 14.x. It avoids JavaScriptInterface (not available in v12) and uses BackendViewFactory instead of deprecated StandaloneView.

The widget is empty 

Make sure the Dashboard system extension is installed and that your backend user has permission to view pages. The widget respects TYPO3's page access permissions.

The graph looks cluttered 

Toggle off "Content Elements" to see only the page tree structure. Use the search field to find specific pages.

Dark mode is not working 

In TYPO3 13+, dark mode is controlled by the data-bs-theme attribute set via user settings. In TYPO3 12, the widget falls back to your operating system's color scheme preference.