How to Integrate Retool with TYPO3

Before connecting Retool, ensure your TYPO3 instance exposes a REST API. TYPO3 does not include a built-in REST API by default — you need a backend extension to enable JSON endpoints. The most common options are EXT:rest (the typo3-rest-api extension from TYPO3 Packagist), EXT:headless (for headless TYPO3 with JSON responses), or a custom Extbase plugin controller configured to return JSON output. If using EXT:rest, install it via Composer in your TYPO3 project root and activate it in the TYPO3 Extension Manager. Configure the allowed resources in the extension's TypoScript setup — at minimum, allow access to the 'pages' and 'tt_content' tables. Set up an API user account in the TYPO3 backend (Admin panel → Backend Users) with limited permissions: read access to the pages and content tables you need, and optionally write access if you plan to update records from Retool. For JWT authentication (recommended over Basic Auth), configure EXT:rest or your chosen extension to issue JWT tokens via a /auth endpoint when supplied with a backend username and password. Note the base URL pattern your TYPO3 extension uses — typically something like https://your-typo3-site.com/api/v1/ or https://your-typo3-site.com/rest/. Write down this base URL, your API username, and your password or JWT token for use in the next step.

Open Retool and navigate to the Resources tab in the left sidebar (or click Resources in the top navigation of the Retool home page). Click the blue Add Resource button in the top right. In the resource type search field, type 'REST' and select REST API from the list. This opens the REST API resource configuration form. In the Base URL field, enter your TYPO3 API base URL — for example, https://your-typo3-site.com/api/v1/. This base URL will be prepended to all query paths you define later. For authentication, scroll to the Authentication section and choose your method: If using JWT Bearer Token: Select 'Bearer Token' from the authentication dropdown. In the Token field, enter your JWT token directly, or reference a Retool configuration variable with {{ retoolContext.configVars.TYPO3_JWT_TOKEN }}. JWT tokens typically expire, so plan for token refresh — you can store a long-lived refresh token in a configuration variable and use a pre-query JavaScript step to fetch a fresh token if needed. If using Basic Auth: Select 'Basic Auth' from the authentication dropdown. Enter the TYPO3 backend username and password. Retool will Base64-encode these and send them as an Authorization header with every request. Add any global headers your TYPO3 extension requires, such as 'Accept: application/json' or a custom API version header. Give the resource a descriptive name like 'TYPO3 Production API' and click Save Changes.

With the resource configured, open or create a Retool app. In the bottom Code panel, click the + button to create a new query. Select your TYPO3 REST API resource from the Resource dropdown. The query editor switches to REST API mode, showing Method, Path, Query Params, Headers, and Body sections. Set the HTTP method to GET. In the Path field, enter the endpoint path for pages — typically /pages or /pages/list depending on your TYPO3 extension. Add query parameters to control the response: - limit: set to {{ pagination.pageSize || 50 }} to support pagination - offset: set to {{ (pagination.page - 1) * pagination.pageSize || 0 }} - site: optionally filter by TYPO3 site root UID - language: optionally filter by sys_language_uid for multilingual installations Click the Advanced tab on the query and add a JavaScript transformer to reshape the API response into a flat array suitable for Retool's Table component. TYPO3 REST APIs often return nested JSON with metadata wrappers. Set the query's Run mode to 'Automatically run when inputs change' so the table refreshes when pagination changes. Drag a Table component from the Component panel onto your app canvas. Set the Table's Data property to {{ pagesQuery.data }} (replace with your actual query name). Configure the Table columns to show relevant fields: uid, title, slug, lastModified, hidden, and siteRootTitle.

1// JavaScript transformer to reshape TYPO3 pages API response
2// Add this as a transformer on the pages query
3const response = data; // raw TYPO3 API response
4// TYPO3 REST APIs often wrap results in a data or results key
5const pages = Array.isArray(response) ? response : (response.data || response.results || []);
6return pages.map(page => ({
7  uid: page.uid,
8  title: page.title || '(no title)',
9  slug: page.slug || '',
10  lastModified: page.tstamp ? new Date(page.tstamp * 1000).toLocaleDateString() : 'Unknown',
11  hidden: page.hidden === 1 ? 'Hidden' : 'Visible',
12  navTitle: page.nav_title || '',
13  seoTitle: page.seo_title || '',
14  languageUid: page.sys_language_uid || 0
15}));

To build a content review panel, create a second query that fetches tt_content (content elements) for whichever page is selected in the pages table. This creates a master-detail layout common in editorial workflows. In the Code panel, create a new query targeting your TYPO3 REST API resource. Set Method to GET and Path to /content or /tt_content (depending on your TYPO3 extension's routing). Add a query parameter: - pid: set to {{ table1.selectedRow.uid }} — this references the UID of the row selected in your pages table - language: set to {{ languageSelect.value || 0 }} to filter by language In the query's trigger settings, enable 'Automatically run when inputs change' and check 'Only run when all referenced variables have valid values'. This prevents the query from running when no page is selected (which would send pid as undefined). Create a second Table component on your canvas for content elements. Set its Data to {{ contentQuery.data }}. Configure columns for: uid, CType (content element type), header, bodytext preview (truncated), colPos (column position), and sorting order. Add a Text component below the tables that shows the full bodytext of the selected content element: {{ contentTable.selectedRow.bodytext }}. For complex content types like EXT:flux-based FCE elements or EXT:gridelements, your transformer may need to handle nested data structures specific to your TYPO3 setup.

1// Transformer for tt_content records
2const items = Array.isArray(data) ? data : (data.data || data.results || []);
3return items.map(el => ({
4  uid: el.uid,
5  type: el.CType || el.ctype || 'unknown',
6  header: el.header || '(no header)',
7  bodyPreview: el.bodytext ? el.bodytext.substring(0, 120) + '...' : '',
8  bodytext: el.bodytext || '',
9  colPos: el.colPos,
10  sorting: el.sorting,
11  hidden: el.hidden === 1 ? 'Hidden' : 'Visible',
12  language: el.sys_language_uid
13}));

For write operations — such as approving content by setting hidden=0, updating SEO metadata, or changing page properties — configure a query with HTTP method PATCH or PUT against your TYPO3 REST API's update endpoint. Create a new query in the Code panel. Set Method to PATCH. Set Path to /pages/{{ table1.selectedRow.uid }} (or the appropriate update endpoint for your extension). In the Body section, select JSON as the body type and enter the fields to update: Add a Form component to your canvas with input fields for seo_title, nav_title, and a hidden toggle checkbox. Bind the form fields to the PATCH query body using dynamic references: {{ form1.data.seo_title }}, {{ form1.data.nav_title }}, and {{ form1.data.hidden ? 1 : 0 }}. Set the query Trigger to Manual (not Auto). Wire a Save button's click event handler to trigger this PATCH query. In the query's Success event handler, add a second action to re-run your pages query (to refresh the table with updated values) and show a Retool success notification. In the query's Failure event handler, add a Show notification action with error severity so users see the TYPO3 API error message. Reference {{ query5.error.message }} in the notification body to show the actual error. For complex integrations involving multiple Resources, custom transformers, and Workflows, RapidDev's team can help architect and build your Retool solution.

1{
2  "seo_title": "{{ form1.data.seo_title }}",
3  "nav_title": "{{ form1.data.nav_title }}",
4  "hidden": {{ form1.data.hidden ? 1 : 0 }},
5  "tstamp": {{ Math.floor(Date.now() / 1000) }}
6}