---
title: "TYPO3 Frontend & Visual Editor: Build Pages Visually | Laioutr"
canonical_url: "https://www.laioutr.com/en/page-builder-typo3"
locale: en
meta:
description: "Laioutr is the visual frontend and visual editor for TYPO3: build pages by drag-and-drop, connected to TYPO3, fast, accessible, EU-hosted. Your TYPO3 stays your CMS."
"og:description": "Laioutr is the visual frontend and visual editor for TYPO3: build pages by drag-and-drop, connected to TYPO3, fast, accessible, EU-hosted. Your TYPO3 stays your CMS."
"og:title": "TYPO3 Frontend & Visual Editor: Build Pages Visually | Laioutr"
---
TYPO3 x Laioutr
# The visual frontend & visual editor for TYPO3 — without Fluid templating for every page
Visual editor and frontend – go live faster without a custom build
More speed and creative freedom for your TYPO3 — with Laioutr
[Request a demo](https://www.laioutr.com/en/contact)
Feel free to reach out to one of our partners for your e-commerce frontend built on Laioutr.
[](https://www.bestit.de/ "Best it") [](https://www.bestit.de/ "datrycs") [](https://www.bestit.de/ "valantic")
5/5
OMR Reviews
70+
Frontend components
Lighthouse 100
Performance from day 1
Made in EU
GDPR-compliant, servers in Germany
100% Match
## Visual editor & frontend for TYPO3 – what it means
TYPO3 is a powerful enterprise CMS: content, editorial workflows, permissions, multi-site, and multilingual capabilities are its strength. What's often missing is a modern, visual frontend that marketing and editorial teams can operate without Fluid templating. That's exactly where Laioutr comes in: as a visual page builder and frontend layer that reads your TYPO3 content via the content API (TYPO3 Headless) and serves it up in a fast website. TYPO3 stays your system, Laioutr delivers the frontend.
Book a strategy call
### 1. The backend stays TYPO3
TYPO3 continues to manage content, the page tree, permissions, editorial workflows, multi-site, and translations. You use the TYPO3 backend and your established processes unchanged — with all extensions and workflows.
### 2. The frontend is chosen
For the frontend, you have several options: classic Fluid/TypoScript, a headless setup (EXT:headless) with your own frontend, a custom build — or a page builder like Laioutr. Each option has its pros and cons.
### 3. Content flows through the content API in real time
No data duplication, no sync conflicts. Laioutr reads your TYPO3 content via the headless/content API (JSON) and renders it — including multilingual content and multi-site.
Benefits
## Which frontend options do you have for TYPO3?
TYPO3 provides the building blocks with Fluid, TypoScript, and the headless extension, but no ready-made, visually operable frontend product for non-developers. So every TYPO3 project raises the frontend question. Four options are well established.
Book a strategy call
### 1. Fluid & TypoScript (classic)
The classic TYPO3 route: templates in Fluid, configuration via TypoScript. Full integration, but every layout change goes through development. Sensible for stable pages with rare changes, or when your team is deep into TYPO3.
### 2. TYPO3 Headless (EXT:headless) with your own frontend
The headless extension serves TYPO3 content as a JSON API. You build the frontend decoupled yourself — maximum freedom, but design system, components, and maintenance are on you. Sensible with a suitable frontend team.
### 3. Custom Build (Next.js or Nuxt)
Maximum control, highest effort. A six- to twelve-month build phase and ongoing maintenance by an in-house frontend team that connects to the TYPO3 content API itself. Sensible when frontend engineering is your strategic core competency.
### 4. Laioutr Page Builder
Visual page builder and frontend platform with 70+ components, EU hosting, and a connection to TYPO3. Fastest time-to-launch, lowest learning curve, marketing and editorial build pages themselves. Sensible when you want to go live fast, without a custom-build investment.
USE CASES
## What you build with Laioutr on TYPO3
Laioutr is built for TYPO3 setups that need to change and scale fast — from the corporate website to multi-site portfolios to campaign landing pages with high editorial volume.
Book a strategy call
### Multi-site & multi-domain on a single TYPO3
TYPO3 is strong at multi-site: multiple websites, brands, and domains from a single instance. Laioutr turns that into standalone frontends — one component pool, many brand presences, each with its own design.
### Campaign and landing pages without a ticket
Marketing builds landing pages visually from ready-made building blocks — without a Fluid template and without a developer ticket. Content comes from TYPO3, the layout takes shape in the page builder.
### Multilingual websites
TYPO3 manages translations and language trees, Laioutr serves them consistently. Languages, layouts, and content controllable per site, compatible with the TYPO3 language concept.
### Public sector & accessibility
Public authorities and institutions rely on TYPO3. Laioutr delivers the accessible frontend to go with it — WCAG- and BFSG-compliant, GDPR-compliant with hosting in the EU.
### Relaunch without touching the backend configuration
Renew an existing TYPO3 frontend without touching the page tree, permissions, or editorial processes. Phased migration, with a clear rollback plan.
### Get new TYPO3 projects live fast
New TYPO3 project, clean slate. With Laioutr themes and the UI library, you go live in weeks instead of pouring months into a custom build.
Laioutr vs. building the frontend yourself
## The honest comparison
TYPO3 gives you the building blocks with Fluid, TypoScript, and the headless extension, but not a finished, visually operable frontend product for non-developers. That's why the most common frontend decision comes down to this: a custom build (Next.js or Nuxt on the TYPO3 content API) or a page builder like Laioutr. A custom build gives you maximum control, but costs a six- to twelve-month build phase and ongoing maintenance. Laioutr delivers Studio, 70+ components, and hosting in the plan, with full code extensibility for edge cases. Both connect to the same TYPO3.
Pricing Plans Comparison
| Compare differences | Laioutr Page Builder | Eigenentwicklung (Next.js / Nuxt) |
| --- | --- | --- |
| Laioutr Page Builder Eigenentwicklung (Next.js / Nuxt) |
| Builder und Komponenten Was Sie aus der Box bekommen und was Sie selbst aufbauen müssen. |
| Visueller Page Builder Drag-and-Drop-Editor für Marketing- und Redaktions-Teams. | Inklusive (Studio) Live-Preview, komponentenbasiert | Nicht enthalten Eigenbau oder externes Tool |
| Frontend-Komponenten Vorgefertigte UI-Bausteine für Seiten, Landing- und Content-Pages. | 70+ Komponenten Design-Token-basiert, anpassbar | Selbst aufbauen Komplette UI-Bibliothek selbst entwickeln |
| Themes und Vorlagen Startpunkt für neue Websites ohne Greenfield-Aufwand. | Vorgefertigte Themes Sofort einsatzbereit, voll erweiterbar | Greenfield Designsystem komplett selbst aufbauen |
| Hosting Wo das Frontend ausgeliefert wird und wer es betreibt. | Inklusive (EU-CDN) Laioutr Cloud, kein separater Deploy | Selbst hosten Vercel, AWS, eigene Infrastruktur |
| Architektur und Compliance Wie flexibel die Plattform ist und was Sie regulatorisch mitbekommen. |
| Backend-Flexibilität Welche CMS- und Commerce-Backends sich anbinden lassen. | Multi-Backend TYPO3, weitere CMS und Commerce-Systeme | Backend-spezifisch Code an TYPO3-Content-API gebunden, Wechsel teuer |
| Performance und Core Web Vitals Wie viel Aufwand für Lighthouse-100-Niveau nötig ist. | Out of the box Lighthouse 100 als Default-Ziel | Manuelles Tuning Performance-Engineering durch Team |
| BFSG und WCAG 3.0 Konformität mit Barrierefreiheitsstärkungsgesetz und WCAG 3.0. | Im Standard WCAG 3.0, BFSG, EN 301 549 | Eigenverantwortung Audit separat erforderlich |
| Datenschutz und Serverstandort Wo Daten verarbeitet werden und welche EU-Verträge gelten. | EU und Deutschland EU-Standardvertrag, deutschsprachiger Support | Hosting-abhängig Je nachdem, wo Sie deployen |
| Team und Wirtschaftlichkeit Wer mit der Plattform produktiv ist und was es Sie über die Zeit kostet. |
| Lernkurve Wie schnell ein neues Teammitglied produktiv wird. | Niedrig Redaktion onboardet in Tagen | Hoch Fluid/TypoScript bzw. React/Vue plus TYPO3-Content-API |
| Time-to-Launch Realistische Zeitspanne bis zum Live-Gang einer neuen Website. | Wochen Mit Themes und UI-Bibliothek | Monate Sechs- bis zwölfmonatige Build-Phase |
| Ideales Team-Setup Wer mit der Plattform arbeiten kann und wer arbeiten muss. | Cross-funktional Marketing, Redaktion, Design und Dev gemeinsam | Engineering-only Drei plus Frontend-Engineers |
| Preismodell Wie sich Kosten zusammensetzen, Software plus Betrieb plus Entwicklung. | [SaaS (planbar) Transparente Pläne, Hosting inklusive](https://www.laioutr.com/de/pricing) [Preise ansehen](https://www.laioutr.com/de/pricing) | Engineering-Kosten Build plus dauerhafte Wartung |
*All information is based on publicly available sources, experience from projects with DACH organizations, and our own platform testing. As of: July 2026. TYPO3 features may have evolved since.*
Custom build
### When building it yourself is the right call
You have a dedicated frontend team with TYPO3 and content-API experience, at least three engineers. You're building exactly one TYPO3 frontend with highly specialized requirements. Frontend engineering is your strategic core competency. The classic case: a brand with its own engineering team and a demand for pixel-level control.
LAIOUTR
### When Laioutr is the right choice
You want weeks instead of months to go-live, editorial and marketing should build pages on their own, you run several TYPO3 sites or brands, you want to keep your TYPO3 and only modernize the frontend, and BFSG plus WCAG have to be covered without a separate audit. The classic case: an organization that wants to modernize and scale its TYPO3 frontend without a double-digit engineering investment.
BLUEPRINTS
## Start with a Blueprint instead of from scratch
Discover our Blueprints: pre-composed frontends for your industry, instantly customizable and matched to your TYPO3 setup. Pick a starting point and go live faster.
[View Blueprints](https://www.laioutr.com/en/blueprints)
UI PREVIEW
## What you can build with Laioutr on TYPO3
Home pages, landing pages, campaign pages, content pages, blogs, careers and product pages, and more.
[Explore the UI preview](https://preview.laioutr.com/)
You don't have to do this alone. Our certified composable partners have delivered Saleor frontend projects with Laioutr, from greenfield setups to storefront-example migrations.
[](https://www.bestit.de/ "Best it") [](https://www.bestit.de/ "datrycs") [](https://www.bestit.de/ "valantic")
FAQ
## Common questions about the page builder for TYPO3
Does Laioutr work with TYPO3 (multi-site and multilingual)?
Yes. Laioutr reads your TYPO3 content via the headless/content API and supports multi-site, multiple domains, and multilingual setups, as long as the corresponding API endpoints are available.
How does Laioutr differ from a custom build with Next.js?
A custom build typically costs six to twelve months of engineering plus ongoing maintenance by an in-house frontend team. Laioutr delivers Studio, 70+ components, and hosting in the plan. Time-to-launch drops from months to weeks, and total cost of ownership is typically well below.
How does Laioutr differ from Fluid and TypoScript?
Fluid and TypoScript are the classic developer route: every layout change goes through development. Laioutr delivers a visual builder, ready-made components, themes, and EU hosting in the plan, so marketing and editorial teams can build pages themselves too — without a ticket for every change.
How does Laioutr connect to TYPO3?
Laioutr connects via the TYPO3 headless/content API (JSON). We support the standard content (pages, content elements, navigation, translations) plus project-specific endpoints for custom logic.
Does Laioutr work with TYPO3 multi-site?
Yes. TYPO3 sites are treated as standalone frontends in Laioutr. Layouts, content, languages, and domains can be configured separately per site — in line with the TYPO3 multi-site concept.
Can we keep using editorial workflows and permissions from TYPO3?
Yes. Editorial workflows, permissions, and approvals stay in TYPO3. Laioutr renders the approved content — governance remains entirely in your TYPO3.
TYPO3 already has an API with EXT:headless, so why Laioutr?
Precisely because TYPO3 exposes content as an API, the frontend question stays open: TYPO3 delivers the data, but not the finished, visually operable frontend. Laioutr builds on this content API and makes the frontend operable for marketing, editorial, and dev together — without your own frontend development.
How long does implementation with Laioutr take?
For a mid-sized setup with a clear design and no exotic special logic: 8 to 14 weeks from kickoff to go-live. More for multi-site or complex requirements.
What does Laioutr cost compared to a custom build?
We work with transparent SaaS plans based on traffic and features. Total cost of ownership is typically below a custom build, because hosting, components, and editor are included in the license and no separate frontend team is needed.
Can we switch the backend later without rebuilding the frontend?
Yes. Laioutr is backend-agnostic. If another system runs alongside TYPO3 later (e.g. a commerce backend), you connect it via an API instead of rebuilding the frontend.
Is the solution BFSG- and GDPR-compliant?
Yes. Server location EU/Germany, EU standard contract, German-language support, WCAG, and BFSG (Barrierefreiheitsstärkungsgesetz, binding since 2025) are covered by default. Compliance is built in, not bolted on.
What about our existing TYPO3 extensions?
Backend-side extensions (editorial, permissions, import, workflows) stay unchanged. Frontend-oriented features are typically replaced by Laioutr components or pre-integrated apps. We review your extension stack in the migration audit.
[Frontend options for TYPO3: from CMS to live storefront
TYPO3 is a enterprise, PHP-based CMS you can run headless: it delivers content through its headless …](https://www.laioutr.com/en/blog/typo3-modern-frontend)
[TYPO3 Alternative Laioutr: A Modern DXP Instead of Extension Migrations
Laioutr is the faster-to-launch, predictably priced, and AI-native alternative to TYPO3, built for m…](https://www.laioutr.com/en/blog/typo3-alternative-laioutr)
STILL UNSURE?
# Ready to rethink your TYPO3 frontend?
30 minutes with our team. We'll show you Laioutr live on your TYPO3 setup and answer every question about integration, performance, and pricing.
[Request a demo](https://www.laioutr.com/en/contact)
## Structured Data
```json
{
"@context": "https://schema.org",
"@graph": [
{
"@type": "Organization",
"@id": "https://www.laioutr.com/#identity",
"name": "Laioutr",
"legalName": "Laioutr GmbH",
"url": "https://www.laioutr.com/",
"logo": {
"@type": "ImageObject",
"url": "https://www.laioutr.com/laioutr-logo.png",
"width": 400,
"height": 400
},
"email": "info@laioutr.com",
"telephone": "+49 30 75435715",
"address": {
"@type": "PostalAddress",
"streetAddress": "Münchweilersteig 5",
"postalCode": "12559",
"addressLocality": "Berlin",
"addressCountry": "DE"
},
"vatID": "DE450905846",
"sameAs": [
"https://www.linkedin.com/company/laioutr",
"https://www.youtube.com/@Laioutr",
"https://x.com/laioutr"
]
},
{
"@type": "WebSite",
"@id": "https://www.laioutr.com/en/#website",
"url": "https://www.laioutr.com/en/",
"name": "Laioutr",
"inLanguage": "en",
"publisher": {
"@id": "https://www.laioutr.com/#identity"
}
},
{
"@type": [
"WebPage",
"FAQPage"
],
"@id": "https://www.laioutr.com/en/page-builder-typo3#webpage",
"url": "https://www.laioutr.com/en/page-builder-typo3",
"name": "TYPO3 Frontend & Visual Editor: Build Pages Visually | Laioutr",
"description": "Laioutr is the visual frontend and visual editor for TYPO3: build pages by drag-and-drop, connected to TYPO3, fast, accessible, EU-hosted. Your TYPO3 stays your CMS.",
"inLanguage": "en",
"isPartOf": {
"@id": "https://www.laioutr.com/en/#website"
},
"breadcrumb": {
"@id": "https://www.laioutr.com/en/page-builder-typo3#breadcrumb"
},
"primaryImageOfPage": {
"@type": "ImageObject",
"url": "https://eu-west-2.graphassets.com/cmii2mlqi0dux06l5543v7nkc/cmr24iubs8qii07mnhoipk9m4"
},
"mainEntity": [
{
"@type": "Question",
"name": "Does Laioutr work with TYPO3 (multi-site and multilingual)?",
"acceptedAnswer": {
"@type": "Answer",
"text": "Yes. Laioutr reads your TYPO3 content via the headless/content API and supports multi-site, multiple domains, and multilingual setups, as long as the corresponding API endpoints are available."
}
},
{
"@type": "Question",
"name": "How does Laioutr differ from a custom build with Next.js?",
"acceptedAnswer": {
"@type": "Answer",
"text": "A custom build typically costs six to twelve months of engineering plus ongoing maintenance by an in-house frontend team. Laioutr delivers Studio, 70+ components, and hosting in the plan. Time-to-launch drops from months to weeks, and total cost of ownership is typically well below."
}
},
{
"@type": "Question",
"name": "How does Laioutr differ from Fluid and TypoScript?",
"acceptedAnswer": {
"@type": "Answer",
"text": "Fluid and TypoScript are the classic developer route: every layout change goes through development. Laioutr delivers a visual builder, ready-made components, themes, and EU hosting in the plan, so marketing and editorial teams can build pages themselves too — without a ticket for every change."
}
},
{
"@type": "Question",
"name": "How does Laioutr connect to TYPO3?",
"acceptedAnswer": {
"@type": "Answer",
"text": "Laioutr connects via the TYPO3 headless/content API (JSON). We support the standard content (pages, content elements, navigation, translations) plus project-specific endpoints for custom logic."
}
},
{
"@type": "Question",
"name": "Does Laioutr work with TYPO3 multi-site?",
"acceptedAnswer": {
"@type": "Answer",
"text": "Yes. TYPO3 sites are treated as standalone frontends in Laioutr. Layouts, content, languages, and domains can be configured separately per site — in line with the TYPO3 multi-site concept."
}
},
{
"@type": "Question",
"name": "Can we keep using editorial workflows and permissions from TYPO3?",
"acceptedAnswer": {
"@type": "Answer",
"text": "Yes. Editorial workflows, permissions, and approvals stay in TYPO3. Laioutr renders the approved content — governance remains entirely in your TYPO3."
}
},
{
"@type": "Question",
"name": "TYPO3 already has an API with EXT:headless, so why Laioutr?",
"acceptedAnswer": {
"@type": "Answer",
"text": "Precisely because TYPO3 exposes content as an API, the frontend question stays open: TYPO3 delivers the data, but not the finished, visually operable frontend. Laioutr builds on this content API and makes the frontend operable for marketing, editorial, and dev together — without your own frontend development."
}
},
{
"@type": "Question",
"name": "How long does implementation with Laioutr take?",
"acceptedAnswer": {
"@type": "Answer",
"text": "For a mid-sized setup with a clear design and no exotic special logic: 8 to 14 weeks from kickoff to go-live. More for multi-site or complex requirements."
}
},
{
"@type": "Question",
"name": "What does Laioutr cost compared to a custom build?",
"acceptedAnswer": {
"@type": "Answer",
"text": "We work with transparent SaaS plans based on traffic and features. Total cost of ownership is typically below a custom build, because hosting, components, and editor are included in the license and no separate frontend team is needed."
}
},
{
"@type": "Question",
"name": "Can we switch the backend later without rebuilding the frontend?",
"acceptedAnswer": {
"@type": "Answer",
"text": "Yes. Laioutr is backend-agnostic. If another system runs alongside TYPO3 later (e.g. a commerce backend), you connect it via an API instead of rebuilding the frontend."
}
},
{
"@type": "Question",
"name": "Is the solution BFSG- and GDPR-compliant?",
"acceptedAnswer": {
"@type": "Answer",
"text": "Yes. Server location EU/Germany, EU standard contract, German-language support, WCAG, and BFSG (Barrierefreiheitsstärkungsgesetz, binding since 2025) are covered by default. Compliance is built in, not bolted on."
}
},
{
"@type": "Question",
"name": "What about our existing TYPO3 extensions?",
"acceptedAnswer": {
"@type": "Answer",
"text": "Backend-side extensions (editorial, permissions, import, workflows) stay unchanged. Frontend-oriented features are typically replaced by Laioutr components or pre-integrated apps. We review your extension stack in the migration audit."
}
}
]
},
{
"@type": "BreadcrumbList",
"@id": "https://www.laioutr.com/en/page-builder-typo3#breadcrumb",
"itemListElement": [
{
"@type": "ListItem",
"position": 1,
"name": "Laioutr",
"item": "https://www.laioutr.com/en/"
},
{
"@type": "ListItem",
"position": 2,
"name": "TYPO3 Frontend & Visual Editor: Build Pages Visually"
}
]
}
]
}
```