More speed and creative freedom for your Magnolia – with Laioutr
Feel free to reach out to one of our partners for your e-commerce frontend built on Laioutr.
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 Magnolia – what it means
Magnolia is a powerful, Java-built DXP: content, editorial workflows, permissions, multi-site, and multilingual support are its strengths. What's often missing is a modern, visual frontend that marketing and editorial teams can operate without FreeMarker templating. That's exactly where Laioutr comes in: as a visual page builder and frontend layer that reads your Magnolia content via the Content Delivery API (REST/GraphQL) and delivers it in a fast website. Magnolia stays your system, Laioutr delivers the frontend.
1. The backend stays Magnolia
Magnolia continues to manage content, pages, components, permissions, editorial workflows, multi-site, and translations. You keep using the Magnolia apps and your established processes unchanged – with all your modules and workflows.
2. The frontend is chosen
For the frontend you have several options: classic FreeMarker templating, a headless setup (Content Delivery API) with your own frontend, a custom build – or a page builder like Laioutr. Each option has pros and cons.
3. Content flows in real time via the Content Delivery API
No duplicated data, no sync conflicts. Laioutr reads your Magnolia content via the Content Delivery API (REST and GraphQL) and renders it – including multilingual support and multi-site.
Benefits
What frontend options do you have for Magnolia?
With FreeMarker templating, the Java foundation, and the Content Delivery API, Magnolia delivers the building blocks – but not a finished, visually operable frontend product for non-developers. That leaves every Magnolia project facing the frontend question. Four options are established in the market.
1. FreeMarker templating (classic)
The classic Magnolia route: templates in FreeMarker, configured via Magnolia's templating definitions. Full integration, but every layout change goes through development. Makes sense for stable pages with rare changes or when your team is deep in Magnolia/Java.
2. Magnolia Headless (Content Delivery API) with your own frontend
The Content Delivery API delivers Magnolia content as REST/GraphQL. You build the frontend decoupled yourself – maximum freedom, but the design system, components, and maintenance are on you. Makes sense with the right 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 Magnolia Content Delivery API itself. Makes sense when frontend engineering is your strategic core competency.
4. Laioutr Page Builder
A visual page builder and frontend platform with 70+ components, EU hosting, and a connection to Magnolia. Fastest time-to-launch, lowest learning curve, marketing and editorial build pages themselves. Makes sense when you want to go live fast, without a custom-build investment.
USE CASES
What you build with Laioutr on Magnolia
Laioutr is built for Magnolia setups that need to change and scale fast. From the corporate website through multi-site portfolios to campaign landing pages with heavy editorial volume.
Multi-site & multi-domain on one Magnolia
Magnolia is strong at multi-site: multiple websites, brands, and domains from one instance. Laioutr turns it 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 FreeMarker template and without a developer ticket. Content comes from Magnolia, the layout takes shape in the page builder.
Multilingual websites
Magnolia manages translations and language versions, Laioutr serves them consistently. Languages, layouts, and content controllable per site, compatible with the Magnolia language concept.
Content-driven sites & editorial at scale
Magnolia manages structured content, components, and editorial processes. Laioutr serves them as a fast frontend – ideal for content-heavy sites with many editors.
Relaunch without touching the backend configuration
Renew an existing Magnolia frontend without touching the page structure, permissions, or editorial processes. Migration in phases, with a clear rollback plan.
Get new Magnolia projects live fast
New Magnolia 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
Laioutr or a custom build for your Magnolia frontend?
Both routes lead to a decoupled frontend on Magnolia. The difference lies in time-to-launch, maintenance burden, and the question of who can build pages. The direct comparison.
Compare differences | 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 Magnolia, weitere CMS und Commerce-Systeme | Backend-spezifisch Code an Magnolia 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 React/Vue plus Magnolia Content Delivery 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 Preise ansehen | Engineering-Kosten Build plus dauerhafte Wartung |
Comparison based on a typical mid-market setup. The actual scope of functionality depends on your Magnolia project, your requirements, and how the project is scoped.
Custom build
When building it yourself is the right call
You have a dedicated frontend team with Magnolia/Java and content-API experience, at least three engineers. You're building exactly one Magnolia 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 Magnolia sites or brands, you want to keep your Magnolia 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 Magnolia frontend without a double-digit engineering investment.
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.
FAQ