Laioutr und Hygraph: Frontend für GraphQL Headless CMS

Ein dunkles Hintergrundbild für das Banner.

Laioutr und Hygraph

Hygraph für federierten Content, Laioutr für das Frontend-Rendering

Immer mehr E-Commerce-Brands setzen Hygraph (ehemals GraphCMS) als GraphQL-natives Headless CMS ein.

Über Content Federation fließen Inhalte aus Commerce-Backends, ERP- und PIM-Systemen in einen einzigen Graph. Für die Storefront-Auslieferung ergänzt Laioutr den Stack: agentic Frontend-Management mit Themes, UI-Library, Studio und nativen Commerce-Backend-Integrationen. So entsteht ein durchgängiger Composable-Commerce-Stack aus zwei deutschen Plattformen, ohne Custom-Frontend-Marathon und ohne paralleles Render-Projekt.

Marken, die mit Laioutr ihre Frontend-Strategie umgesetzt haben.

WARUM ZUSAMMEN

Hygraph behaltet, Frontend mit Laioutr beschleunigen

Statt euer Hygraph-Investment durch ein anderes CMS zu ersetzen, schließen wir die Lücke zwischen federiertem Content-Graph und produktivem E-Commerce-Storefront. Hygraph-Queries laufen nativ in Laioutr-Layouts ein, eure Editorial- und Engineering-Teams arbeiten weiter im Hygraph-Schema und in Studio. Laioutr übernimmt das Rendering in Storefronts mit Themes, UI-Library und Commerce-Anbindung.

Preisplanvergleich
Unterschiede vergleichen	Hygraph Plan wählen	Laioutr Plan wählen

Plattform-Fokus, Commerce-Anbindung & Multi-Channel Welche Rolle füllt die Plattform in eurer Architektur, und wie ergänzen sich beide Systeme im Stack?
Plattform-Fokus Wofür ist die Plattform primär gebaut, und wie ergänzen sich beide Systeme im Stack?	GraphQL Headless CMS Federierter Content-Hub für Commerce, ERP und PIM	Agentic Frontend-Management Storefront-Rendering mit Studio, UI-Library und Commerce-Backends
Native Hygraph-Integration Vorgebaute Anbindung an Hygraph als Content-Quelle, ohne Custom-Build.	Eigenentwicklung Frontend wird selbst gebaut	Native GraphQL-Anbindung Hygraph-Inhalte direkt in Laioutr-Layouts
Content Federation aus Drittsystemen Inhalte aus Commerce, ERP, PIM und externen APIs in einem unified Graph zusammenführen.	Content Federation Commerce, ERP, PIM und Drittsysteme im GraphQL-Schema	Über App Store Drittsysteme als Apps anbindbar
Native Commerce-Backend-Integrationen für Storefront-Rendering Direkte Anbindung an Commerce-Engines für die Storefront-Auslieferung.	Über Federation oder Frontend Daten im Graph, Render-Logik im separaten Frontend	19+ Backends Nativ vorintegriert für Rendering
Storefront-Funktionen ohne externes Frontend Liefert die Plattform selbst einen lauffähigen Storefront, oder braucht es ein zusätzliches Frontend-Framework?	Externes Frontend erforderlich Next.js, Nuxt, Remix oder ähnliches	Eigenständiger Storefront Inklusive PDP, Listing, Cart, Checkout
API-First Content-Delivery Inhalte über REST und GraphQL für jeden Channel ausspielen.	GraphQL-nativ Queries und Mutations als Kern-API	REST und GraphQL
Bring Your Own Frontend-Framework Wahlfreiheit beim JavaScript-Framework des Frontends.	Framework-agnostisch via GraphQL Vue, React, Next, Nuxt, Remix u. v. m.	Optimierter eigener Stack Vorintegriert mit Studio und UI-Library
Content für Mobile, IoT und Wearables Inhalte über Web hinaus auf native Apps, Voice und IoT ausspielen.	Voll Multi-Channel Web, Apps, IoT, Voice über GraphQL	Web-fokussiert Storefront-Web mit Headless-API
Content-Modellierung & Editorial-Workflow Wie tief ist das Content-Modell, und wie unterstützt die Plattform Redaktions-Teams?
Strukturiertes Content-Modell mit Referenzen Schema-Builder, References, Validations und Field Editors für komplexe Inhalts-Architekturen.	Sehr ausgereift Schema-Builder, References, Field-level Permissions
Mutations API (Content schreiben über GraphQL) Inhalte programmatisch über die API erstellen, aktualisieren und löschen.	GraphQL Mutations Vollständige Schreib-API als Standard	Über Management-API
Approval-Workflows & Releases Mehrstufige Freigabeprozesse und gebündelte Releases für Content-Teams.
Multi-Locale & Übersetzungs-Workflow Native Mehrsprachigkeit und Integrationen zu Übersetzungs-Tools.	Locale-level i18n Locale-Limits je Plan beachten
Asset-Management mit Image-Service Zentrale Medien-Bibliothek mit Bild-Optimierung und Varianten.
Visual Editing & Storefront-Building Wie schnell entstehen produktive Seiten, und was kommt out-of-the-box mit?
Visual Editor mit Live-Preview Echte Vorschau der Inhalte im Layout, nicht nur Form-basiertes Editing.	Hygraph Studio Visual Editing für Content-Teams	Laioutr Studio Inklusive ab Growth-Plan
Drag-and-Drop Page-Building ohne Code Marketing-Teams bauen Seiten ohne Entwickler-Ticket.	Eingeschränkt Page-Building primär dev-getrieben
Vorgefertigte Storefront-Themes Produktive E-Commerce-Vorlagen, sofort einsatzbereit.	Außerhalb Plattform-Scope Themes leben im separaten Frontend
E-Commerce UI-Library out-of-the-box PDP, Listing, Cart und Checkout als fertige Bausteine.	Custom-Build im Frontend	Laioutr UI PDP, Listing, Cart, Checkout inklusive
Time-to-Live für produktiven E-Commerce-Storefront Time-to-Market vom Projektstart bis Go-Live.	12+ Wochen Mit separatem Frontend-Build	4–8 Wochen Mit Themes und UI-Library
KI & Automation Welche KI-Features bringen die Plattformen mit?
Eingebauter KI-Agent für Storefront-Operations Nativer KI-Assistent für Layouts, Workflows und Commerce-Optimierung.		Larry Inkludiert ab Growth-Plan
AI-Features für Content-Erstellung KI für Texte, Übersetzungen und Inhalts-Transformation.	Hygraph AI Content-Generation und Übersetzung
Automatisierte Übersetzung Inhalte über Sprachen und Märkte automatisiert synchronisieren.
Conversational / Agentic Commerce ready Vorbereitet für KI-Agenten und konversationelle Shopping-Erlebnisse.	Über GraphQL-API Logik im Custom-Frontend
Hosting, Compliance & DACH-Fokus Wie sicher und wie nah am DACH-Markt arbeiten die Plattformen?
EU-Hosting verfügbar Datenhaltung innerhalb der Europäischen Union.
DSGVO-konforme Datenhaltung Datenverarbeitung gemäß europäischer Datenschutz-Grundverordnung.
WCAG 3.0 ready für Storefront Vorbereitet auf den neuesten Web-Accessibility-Standard.	Frontend-abhängig Compliance liegt im separaten Frontend
Headquarter & Markt-Fokus Wo sitzt das Unternehmen, und welcher Markt steht im Fokus?	Deutschland (Birkenfeld) Deutsche Wurzeln, internationaler Kundenfokus	Deutschland DACH-First Produktentwicklung und Support
DACH-spezifisches Customer Success Team Lokales Team mit Marktverständnis für Deutschland, Österreich und die Schweiz.
AVV / DPA standardmäßig Standard-Auftragsverarbeitungsverträge nach DSGVO.
Support & Onboarding Wie schnell ist Hilfe verfügbar, und wie strukturiert läuft der Start?
Strukturiertes Onboarding inklusive Geführter Setup- und Migrationsprozess als Bestandteil des Plans.	Im Enterprise-Plan
24/7 Support verfügbar Rund-um-die-Uhr-Erreichbarkeit für kritische Vorfälle.	Im Enterprise-Plan	Geschäftszeiten plus Eskalation
Slack Connect-Support Direkter Support-Kanal über Slack statt Ticket-System.	Plus-Plan und höher
Founder-Direktkontakt erreichbar Direkter Draht zu den Gründern bei Eskalationen.	Eingeschränkt
GraphQL-Developer-Community Größe und Aktivität der Developer-Community.	Aktiv GraphQL-First Developer-Community	DACH-fokussiert, wachsend
Preis-Struktur Wie planbar sind die Gesamtkosten für eine produktive E-Commerce-Lösung?
Transparente Plan-Struktur auf der Website Pläne und Leistungsumfang öffentlich einsehbar.	Hobby / Growth / Scale / Enterprise Scale und Enterprise per Custom-Quote	Growth / Pro / Enterprise Pläne ansehen
Free-/Community-Plan verfügbar Kostenfreier Einstieg für Tests und kleine Projekte.	Hobby kostenlos Begrenzte API-Calls und Records	Growth-Plan ab Listenpreis Vollständige SaaS-Plattform inklusive
Page-View-basierte Skalierung statt Nutzer-Pricing Preise wachsen mit eurem Traffic, nicht mit der Team-Größe.	API-Calls / Records / User Hybrid Mehrere Limits parallel
Add-ons und versteckte Kosten Wie planbar bleibt die Total Cost of Ownership?	Plan-abhängig Locales, User, API-Calls, Federation als Limits	Minimal
Total Cost of Ownership inklusive Storefront Wie planbar bleibt die Gesamtkostenrechnung für eine produktive E-Commerce-Lösung?	Höher Plus separates Frontend, Hosting und Dev-Aufwand	Planbar Storefront, Studio und Backend-Connectors inklusive

Alle Daten basieren auf öffentlich verfügbaren Informationen, Erfahrungen aus Sales-Gesprächen mit DACH-E-Commerce-Brands sowie eigenen Plattform-Tests. Stand: April 2026. Hygraph-Funktionen können sich weiterentwickelt haben.

Top 3

Top 3 Gründe für Laioutr als Frontend-Layer für Hygraph-Brands

1. Native GraphQL-Anbindung an Hygraph ohne Custom-Frontend

Hygraph-Queries, Schemas, References und federierte Inhalte aus Commerce-Backends, ERP und PIM fließen über die native Laioutr-Anbindung direkt in Layouts, Produktseiten und Kampagnen-Templates ein. Kein eigenes Next.js-, Nuxt- oder Remix-Projekt zu pflegen, kein paralleles Render-Frontend zu betreiben. Hygraph bleibt der federierte Content-Graph, Laioutr übernimmt die Auslieferung.

2. Storefront in Wochen statt Monaten

Hygraph liefert mit Content Federation einen einzigartigen GraphQL-Graph über alle Inhalts- und Commerce-Quellen, aber kein Storefront. Brands bauen den E-Commerce-Frontend traditionell selbst. Mit Laioutr entfällt dieser Custom-Build: Themes, UI-Library, PDP, Listing, Cart und Checkout sind eingebaut. Hygraph-Brands gehen in vier bis sechs Wochen produktiv live, statt zwölf bis sechzehn Wochen Frontend-Engineering einzuplanen.

3. Marketing-Self-Service über die gesamte Storefront

Hygraph ist primär ein Developer-First-Werkzeug, das Schema und Federation für eure Engineering-Teams öffnet. Laioutr Studio bringt diese Inhalte in produktive Storefront-Layouts, in denen Marketing- und Content-Teams ohne Dev-Ticket arbeiten. Landingpages, Promo-Banner und Produktwelten entstehen per Drag-and-Drop, Hygraph bleibt die Single Source of Truth im Hintergrund.

WARUM WIR LAIOUTR NUTZEN

Was andere Kunden über uns sagen

"Das Frontend ist der Schlüssel zu erfolgreichen digitalen Erlebnissen – und Laioutr ist für uns der entscheidende Hebel, um dieses Potenzial konsequent zu heben. Mithilfe von KI verbessern wir die Performance, automatisieren Prozesse und gestalten personalisierte Interaktionen, die Engagement, Loyalität und Konversionen spürbar steigern. Wir können neue Ideen schnell ausspielen, datenbasiert optimieren und unseren Kunden ein Erlebnis bieten, das sich von der Konkurrenz abhebt. Die Zusammenarbeit ist partnerschaftlich, schnell und auf Augenhöhe."

Daniel B.

"Im E-Commerce entscheiden Performance und Conversion über Erfolg oder Misserfolg – und genau hier liefert Laioutr. Seit dem Einsatz der Plattform laden unsere Storefronts spürbar schneller, mit klaren Effekten auf Core Web Vitals, Absprungraten und Conversion. Wir können neue Landingpages, Kampagnen und Produktwelten in Tagen statt Wochen ausspielen, ohne Entwicklerressourcen zu blockieren. Das verschafft uns die Geschwindigkeit, die der Markt heute verlangt. Die Zusammenarbeit mit dem Laioutr-Team ist pragmatisch, datengetrieben und auf Augenhöhe – so muss modernes Frontend funktionieren."

Marcel T.

HÄUFIGE FRAGEN

Häufige Fragen zu Laioutr und Storyblok

Nein. Laioutr ist explizit als Frontend-Layer für Hygraph-Brands gebaut. Eure Engineering- und Editorial-Teams arbeiten weiter in Hygraph (Schema-Builder, Mutations, Federation, Releases, Studio). Laioutr übernimmt das Rendering im E-Commerce-Storefront. Beide Systeme bleiben in ihrer jeweiligen Rolle und ergänzen sich.

Laioutr verbindet sich nativ mit der Hygraph Content API über GraphQL. Schemas, References, federierte Quellen und Asset-Service-URLs sind in Laioutr Studio als Inhaltsquellen verfügbar. Eure Marketing- und Editorial-Teams können Hygraph-Inhalte in Laioutr-Layouts direkt einbinden, einschließlich Live-Preview und stage-spezifischer Content-Stages.

Hygraph Studio ist auf Schema-Modellierung und Content-Editing optimiert: Schema-Builder, References, federierte Datenquellen, Field-level Permissions. Laioutr Studio ist auf Storefront-Komposition optimiert: Themes, Page-Templates, Produktseiten und Kampagnen-Layouts mit eingebetteten Commerce-Komponenten und nativen Backend-Integrationen. In der Praxis arbeitet ein Brand-Team in beiden Tools, weil sie unterschiedliche Aufgaben lösen.

Hygraph allein reicht für Setups, in denen euer Engineering-Team einen Custom-Frontend selbst baut und betreibt und die GraphQL-Federation der zentrale Wert ist. Laioutr ergänzt Hygraph, wenn ihr (1) einen produktiven E-Commerce-Storefront in Wochen statt Monaten wollt, (2) native Anbindung an Commerce-Backends wie Shopify, Shopware, commercetools oder Adobe Commerce als Render-Schicht braucht, oder (3) Marketing-Teams ohne Dev-Ticket Storefront-Seiten ausrollen sollen.

Content Federation bleibt der Kern eurer Hygraph-Investition. Federierte Quellen werden in Laioutr genauso konsumiert wie native Hygraph-Inhalte: über die GraphQL-API. Laioutr ergänzt das Bild um die Render-Schicht und um die nativen Commerce-Backend-Integrationen, die für die Storefront-Auslieferung gebraucht werden (zum Beispiel Cart, Checkout und Real-Time-Bestände).

Setups mit bestehendem Hygraph-Account und einem etablierten Backend (Shopify, Shopware, commercetools, Adobe Commerce) sind mit Laioutr typischerweise in vier bis sechs Wochen produktiv. Der Hygraph-Content kommt über die native GraphQL-Anbindung direkt in den Storefront, der Custom-Frontend-Build entfällt komplett.

Im Regelfall nein. Hygraph-Models werden in Laioutr-Layouts als Content-Komponenten gebunden. Im Migrations-Workshop bewerten wir, welche Models 1:1 auf Laioutr-Sektionen abgebildet werden und welche kleine Anpassungen brauchen, damit sie in Storefront-Templates sauber rendern.

Wiederverwendbare Komponenten, Design-Tokens und Style-Guides werden über die Laioutr UI-Library übernommen. Die Render-Logik selbst löst Laioutr ab, der Custom-Frontend-Stack kann zurückgebaut oder auf reine GraphQL-Konsumenten reduziert werden. Custom-Logik wandert entweder in Laioutr-Layouts oder als App in den Laioutr App Store.

Beide Plattformen kommen aus Deutschland, hosten in der EU und sind DSGVO-konform. Laioutr hostet wahlweise auf Laioutr Cloud (EU, Frankfurt), bei Vercel oder in eurer eigenen Hosting-Umgebung. Beide Systeme stellen AVV bereit. WCAG 3.0 ready ist auf der Frontend-Schicht eine Laioutr-Zusage, weil Hygraph die Auslieferung an das Frontend delegiert.

Beide Systeme werden separat lizenziert: Hygraph nach euren Plänen (Hobby, Growth, Scale, Enterprise), Laioutr nach Growth, Pro oder Enterprise. Im gemeinsamen Setup spart ihr den Custom-Frontend-Build und die laufenden Engineering-Kosten für ein Eigen-Frontend, das ist meist der größte Hebel für die Total Cost of Ownership.

Ja. Unser Onboarding ist auf Hygraph-Brands eingestellt. Architektur-Workshop, Mapping eurer Hygraph-Models und federierten Quellen auf Laioutr-Sektionen, Migrations-Plan für das alte Custom-Frontend und Hands-on-Begleitung bis zum Go-Live sind Standard.