Storyblok CMS: Der vollständige Entwickler-Leitfaden [2026]

Storyblok CMS: Der vollständige Entwickler-Leitfaden [2026]

Storyblok gehört zu den wenigen Headless-CMSen, bei denen Content-Redakteure tatsächlich sehen, was sie bearbeiten -- und genau dieses eine Feature verändert die gesamte Dynamik zwischen Entwicklern und Redaktionsteams. Nach der 80-Millionen-Dollar-Series-C-Finanzierung und dem Launch von Workflow-Automatisierung im März 2026 lohnt es sich zu verstehen, was Storyblok wirklich gut macht, wo es Grenzen hat, und ob es für Ihr nächstes Projekt passt.

Was ist Storyblok?

Storyblok ist ein Headless-CMS mit integriertem Visual Editor, gegründet 2017 in Linz, Österreich von Dominik Angerer (CEO) und Alexander Feiglstorfer (CTO). Es setzt auf eine komponentenbasierte Architektur namens Bloks und liefert Inhalte über REST- und GraphQL-APIs aus. Storyblok wird von Adidas, Tesla und Oatly eingesetzt und hat durch die Series-C-Runde insgesamt 138 Millionen Dollar eingesammelt.

Ein Headless-CMS trennt Ihren Inhalt von Ihrem Frontend -- Inhalte werden über eine API verwaltet, und Ihre React-, Vue- oder Astro-App konsumiert sie. Das ist bei Contentful, Sanity, Strapi und allen anderen Headless-Optionen gleich. Was Storyblok unterscheidet, ist der Visual Editor.

Wir betreiben vier Produktionswebsites auf verschiedenen Headless-CMSen (darunter Sanity, das diesen Blog antreibt). Aus eigener Erfahrung lässt sich sagen: Der Visual Editor reduziert den Abstimmungsaufwand zwischen Entwicklern und Content-Teams spürbar. Statt Formulare auszufüllen und zu fragen "Wie sieht das aus?", sehen Redakteure die fertige Seite. Das ist eine echte Verbesserung im Workflow, kein Marketingversprechen.

Die Kernarchitektur besteht aus zwei Konzepten: Stories (Ihre Seiten oder Inhaltseinträge) und Bloks (wiederverwendbare Komponenten wie Hero-Bereiche, Feature-Grids oder CTAs). Entwickler definieren Blok-Schemata, Redakteure ziehen sie per Drag-and-Drop in Stories. Der Inhalt erreicht Ihr Frontend über die Content Delivery API.

Zu den namhaften Kunden zählen neben Adidas und Tesla: Virgin Media O2, dm-drogerie markt, Oatly, Spendesk und Panini. Einen umfassenden Überblick über alle großen Optionen finden Sie in unserem Headless-CMS-Vergleich.

Wie funktioniert der Storyblok Visual Editor?

Der Visual Editor von Storyblok lädt Ihr Frontend in einem iframe und legt editierbare Bereiche über jede Komponente. Content-Redakteure sehen eine Live-Vorschau exakt so, wie Besucher die Seite sehen -- mit Click-to-Edit-Funktionalität für jeden Blok. Voraussetzung ist die StoryblokBridge-JavaScript-Bibliothek in Ihrer Frontend-Anwendung.

Das ist das Feature, das Storyblok von Contentfuls formularbasiertem Ansatz, Sanitys Schema-als-Code-Ansatz oder Strapis Admin-Panel unterscheidet. Jene CMSen bieten Redakteuren Formulare mit Feldern. Storyblok zeigt ihnen die fertige Seite.

Die iframe-Architektur

So funktioniert es im Hintergrund: Öffnet ein Redakteur eine Story im Storyblok-Dashboard, lädt der Visual Editor Ihre Frontend-Anwendung in einem iframe. Storyblok fügt jedem Blok eine _editable-Eigenschaft in die Daten ein (nur bei Draft-Inhalten), und die StoryblokBridge-JavaScript-Bibliothek lauscht auf Änderungen. Klickt ein Redakteur auf eine Komponente, kommuniziert die Bridge mit dem übergeordneten Storyblok-Fenster, um den richtigen Feldeditor zu öffnen.

Das Ergebnis: Redakteure klicken direkt auf einen Hero-Bereich, um die Überschrift zu bearbeiten. Sie ziehen einen neuen Testimonial-Blok unter den Preisbereich. Änderungen erscheinen sofort in der Vorschau. Kein "Speichern und auf Staging prüfen"-Loop.

Ein häufiger Fallstrick: Der Visual Editor funktioniert nur mit Draft-Inhalten, nicht mit veröffentlichten. Ihre Vorschau-URL muss auf eine Version Ihrer App zeigen, die Draft-Daten abruft. Das überrascht viele beim Setup.

StoryblokBridge einrichten

Ein typisches Setup in einem Next.js-App-Router-Projekt -- @storyblok/react muss installiert sein:

// app/components/StoryblokProvider.js
"use client";

import { storyblokInit, apiPlugin } from "@storyblok/react/rsc";
import Hero from "./bloks/Hero";
import FeatureGrid from "./bloks/FeatureGrid";
import CallToAction from "./bloks/CallToAction";

storyblokInit({
  accessToken: process.env.NEXT_PUBLIC_STORYBLOK_TOKEN,
  use: [apiPlugin],
  components: {
    hero: Hero,
    feature_grid: FeatureGrid,
    call_to_action: CallToAction,
  },
});

export default function StoryblokProvider({ children }) {
  return children;
}

Dann wrappen Sie Ihr Layout mit dem Provider und nutzen die StoryblokStory-Komponente für Live-Editing:

// app/[...slug]/page.js
import { StoryblokStory } from "@storyblok/react/rsc";
import { fetchStory } from "@/lib/storyblok";

export default async function Page({ params }) {
  const story = await fetchStory(params.slug?.join("/") || "home");

  return <StoryblokStory story={story} />;
}

Die StoryblokStory-Komponente kümmert sich automatisch um die Bridge-Verbindung -- sie registriert den iframe-Listener, setzt _editable-Attribute auf Ihre Bloks und aktiviert Click-to-Edit im Visual Editor. Das müssen Sie nicht manuell verdrahten.

Storybloks Komponentenarchitektur (Bloks und Stories)

Storyblok organisiert Inhalte über zwei Kernkonzepte: Stories (Seiten oder Inhaltseinträge) und Bloks (wiederverwendbare Komponenten wie Hero-Bereiche, Feature-Grids oder CTAs). Entwickler definieren Blok-Schemata im Storyblok-Dashboard, Redakteure setzen Seiten zusammen, indem sie Bloks in Stories ziehen.

Stellen Sie es sich wie LEGO vor. Stories sind die Grundplatten -- die Seiten, die Sie bauen. Bloks sind die einzelnen Steine -- ein Hero-Bereich, eine Testimonial-Karte, eine Preistabelle. Sie legen fest, welche Felder ein Blok-Typ hat (Überschrift, Bild, CTA-Text), und Redakteure fügen sie zusammen.

Stories: Ihre Inhaltseinträge

Jede Seite, jeder Artikel oder Inhaltseintrag in Storyblok ist eine Story. Stories leben in einer Ordnerstruktur (ähnlich einem Dateisystem), und jede Story hat einen Slug, der einer URL zugeordnet ist. Der Inhalt einer Story besteht aus Bloks -- sie ist im Wesentlichen ein Container.

Stories können auch seitenfremde Inhalte aufnehmen. Sie könnten eine Story namens "site-settings" haben, die Ihre Navigationslinks, Footer-Texte und Social-Media-URLs speichert. Die Flexibilität ähnelt dem Einsatz von Singleton-Dokumenten in Sanity.

Bloks: Wiederverwendbare Bausteine

Bloks gibt es in zwei Ausprägungen: nestable und content type (Root-Level). Content-Type-Bloks definieren das übergeordnete Schema einer Story (wie "Page" oder "BlogPost"). Nestable Bloks sind die Komponenten, die Redakteure in den Body einer Story ziehen -- Hero-Bereiche, Bildgalerien, FAQ-Akkordeons.

Jeder Blok hat ein Schema, das seine Felder definiert. Diese erstellen Sie im Storyblok-Dashboard unter "Components" -- nicht im Code, was ein wesentlicher Unterschied zum Schema-als-Code-Ansatz von Sanity ist.

Content-Modellierung in der Praxis

So sieht ein Hero-Blok-Schema aus, wenn Sie es über die Management API definieren:

{
  "component": {
    "name": "hero",
    "display_name": "Hero Section",
    "schema": {
      "headline": { "type": "text", "required": true, "pos": 0 },
      "subheadline": { "type": "textarea", "pos": 1 },
      "background_image": { "type": "asset", "filetypes": ["images"], "pos": 2 },
      "cta_text": { "type": "text", "pos": 3 },
      "cta_link": { "type": "multilink", "pos": 4 }
    },
    "is_root": false,
    "is_nestable": true
  }
}

Und die React-Komponente, die diesen Blok rendert:

// components/bloks/Hero.jsx
import { storyblokEditable } from "@storyblok/react/rsc";

export default function Hero({ blok }) {
  return (
    <section {...storyblokEditable(blok)} className="hero">
      <div className="hero-content">
        <h1>{blok.headline}</h1>
        {blok.subheadline && <p>{blok.subheadline}</p>}
        {blok.cta_text && (
          <a href={blok.cta_link?.cached_url} className="cta-button">
            {blok.cta_text}
          </a>
        )}
      </div>
      {blok.background_image?.filename && (
        <img
          src={blok.background_image.filename}
          alt={blok.background_image.alt || ""}
        />
      )}
    </section>
  );
}

Der Aufruf storyblokEditable(blok) ist es, der Click-to-Edit im Visual Editor aktiviert. Ohne ihn rendert die Komponente zwar korrekt, aber Redakteure können nicht darauf klicken, um Felder zu bearbeiten. Leicht zu vergessen, schmerzhaft beim Debugging.

Storyblok APIs: REST vs. GraphQL vs. Management

Storyblok bietet drei APIs: die Content Delivery API (REST, für die meisten Projekte empfohlen), eine GraphQL-API (schreibgeschützt, nützlich bei selektivem Feldzugriff) und die Management API (für programmatische Inhaltsoperationen wie Migrationen und Massenaktualisierungen). Storyblok empfiehlt REST für neue Projekte.

Die meisten Headless-CMS-Leitfäden überspringen die API-Ebene völlig. Das ist ein Fehler -- die gewählte API beeinflusst Ihre Build-Zeiten, Caching-Strategie und den Rate-Limit-Spielraum.

Content Delivery API (REST)

Das ist die primäre API, die Sie in 90% der Fälle verwenden. Sie unterstützt Filtern, Sortieren, Paginierung und das Auflösen von Relationen zwischen Stories. Die Rate-Limits sind großzügig: 50 Anfragen/Sekunde bei kostenpflichtigen Plänen.

// Story über die Content Delivery API abrufen
const response = await fetch(
  `https://api.storyblok.com/v2/cdn/stories/home?version=draft&token=${process.env.STORYBLOK_TOKEN}`
);
const { story } = await response.json();
console.log(story.content); // Ihre Bloks-Daten

GraphQL-API

Die GraphQL-API ist schreibgeschützt und hat andere Rate-Limits (100 Komplexitätspunkte pro Sekunde). Sie ist nützlich, wenn Sie starke Typisierung brauchen und nicht die gesamte Story-Nutzlast benötigen -- Sie können genau die Felder abfragen, die Sie brauchen.

{
  PageItem(id: "home") {
    name
    slug
    content {
      _uid
      component
      headline
      subheadline
    }
  }
}

Management API

Die Management API übernimmt CRUD-Operationen in Ihrem Storyblok-Space: Stories erstellen, Komponenten-Schemata aktualisieren, Assets verwalten und Migrationen ausführen. Sie nutzen diese API für CI/CD-Pipelines, Massen-Content-Updates oder den Bau von Custom-Tooling rund um Storyblok.

Welche API sollten Sie verwenden?

Für die meisten Next.js-, Nuxt- oder Astro-Projekte deckt die REST-Content-Delivery-API mit storyblok-js-client oder dem offiziellen SDK alles ab. Greifen Sie zur GraphQL-API, wenn Ihr Content-Modell komplex ist und Sie tief verschachtelte Strukturen mit vielen unnötigen Feldern abrufen.

Storyblok Preise 2026

Storyblok bietet einen kostenlosen Starter-Plan. Kostenpflichtige Pläne beginnen bei 99 $/Monat für Growth (5 Benutzer). Höhere Stufen umfassen Growth Plus, Premium (Mid-Market) und Elite (unbegrenzt). Neue Preise traten am 7. April 2026 in Kraft, mit einer 60-tägigen Schonfrist für bestehende Monatskunden.

Die aktuellen Preisstufen im Überblick:

Storyblok bietet außerdem eine 45-tägige kostenlose Testversion von Growth Plus -- ungewöhnlich großzügig verglichen mit Contentfuls 30-Tage-Test oder Sanitys nutzungsbasiertem Free Tier.

Ehrlich gesagt kann Storyblok bei größerem Maßstab teuer werden. Reddit-Diskussionen von Agenturen erwähnen regelmäßig steigende Kosten, wenn Projekte wachsen -- mehr Benutzer, mehr API-Aufrufe, mehr Spaces für Multi-Site-Setups. Wer budgetbewusst ist, hat mit Strapis kostenlosem Self-Hosting oder Payloads Open-Source-Modell mehr Spielraum -- auf Kosten der eigenen Infrastrukturverwaltung.

Für Nebenprojekte und Prototypen reicht der kostenlose Starter-Plan. Für Produktionsprojekte mit 2 bis 5 Content-Redakteuren ist der Growth-Plan bei 99 $/Monat wettbewerbsfähig. Darüber hinaus sollten Sie ein individuelles Angebot vom Storyblok-Vertrieb einholen -- die veröffentlichten Preise sagen nur einen Teil der Geschichte.

Neuheiten 2026: FlowMotion, Blueprints und KI

Im Jahr 2026 hat Storyblok FlowMotion (31. März) eingeführt, eine Workflow-Automatisierungsschicht auf Basis von n8n mit über 500 Integrationen. Blueprints, eingeführt im Juli 2025, bieten eine geführte Projektkonfiguration mit Framework-spezifischen Startern. KI-Funktionen umfassen AI Translate (34+ Sprachen), den Ideation Room für Content-Brainstorming und KI-SEO-Tools.

Kein anderer Storyblok-Leitfaden behandelt diese Funktionen bisher. Hier ist, was tatsächlich verfügbar ist.

FlowMotion: Workflow-Automatisierung

FlowMotion ist Storybloks Antwort auf den Content-Operations-Engpass. Laut ihrer Launch-Ankündigung verbringen 75 % der Marketer mehr als 6 Stunden pro Woche mit Content-Koordinationsaufgaben -- Stakeholder benachrichtigen, Übersetzungen anstoßen, Social-Media-Posts planen.

FlowMotion basiert auf verwaltetem n8n (dem Open-Source-Workflow-Automatisierungstool) und verbindet sich mit über 500 Integrationen. Sie setzen Trigger auf Content-Events -- Erstellen, Aktualisieren, Genehmigen, Übersetzen, Planen, Veröffentlichen -- und FlowMotion führt den Workflow automatisch aus. Stellen Sie sich vor: Ein Redakteur veröffentlicht einen Blogbeitrag, und FlowMotion löst automatisch KI-Übersetzungen in 10 Sprachen aus, benachrichtigt das Social-Media-Team über Slack und plant einen Twitter/X-Post.

Das ist ein Enterprise/Elite-Add-on, kleinere Teams haben keinen Zugang. Für Organisationen, die Inhalte über mehrere Märkte und Kanäle verwalten, ist es jedoch eine erhebliche Zeitersparnis.

Blueprints: Geführtes Projekt-Setup

Blueprints lösen einen echten Schmerzpunkt: das initiale Setup eines Storyblok-Projekts. Eine Umfrage von 2024 ergab, dass 24 % der Senior-Entwickler sagen, das initiale CMS-Projekt-Setup dauere Tage, nicht Stunden.

Storyblok bietet zwei Blueprint-Stufen:

• Core Blueprint: Minimales Setup -- verbindet Ihr Framework (Next.js, Nuxt oder Astro), erstellt einen Space und deployt einen einfachen Starter. Gut für Entwickler, die eine saubere Ausgangsbasis möchten.
• Business Blueprint: Produktionsfertiges Setup mit vorgefertigten Komponenten, einem konfigurierten Content-Modell und Deployment auf Vercel oder Netlify. Näher an einem "Launch in 30 Minuten"-Erlebnis.

Sie wählen Ihr Framework, entscheiden sich für Core oder Business, und Storyblok erstellt ein verbundenes GitHub-Repo mit einer Deployment-Pipeline. Das spart gegenüber einem Start von Null tatsächlich Stunden an Boilerplate-Aufwand.

KI-Funktionen: Translate, Ideation Room und mehr

Storybloks KI-Funktionen verfolgen einen Bring-your-own-Provider-Ansatz. Sie verbinden Ihren eigenen OpenAI- oder Google-Gemini-API-Schlüssel, und Storyblok nutzt ihn für:

• AI Translate: Inhalte direkt im Editor in 34+ Sprachen übersetzen. Kein Ersatz für professionelle Übersetzung bei kritischen Inhalten, aber ausgezeichnet für Entwürfe und interne Texte.
• Ideation Room: Kollaboratives KI-Brainstorming für Content-Ideen. Redakteure beschreiben, was sie brauchen, und die KI generiert Gliederungen, Überschriften und Entwürfe.
• KI-Alt-Text: Automatische Alt-Text-Generierung für Bilder.
• KI-SEO: Meta-Titel- und Beschreibungsvorschläge auf Basis Ihrer Inhalte.

Das Bring-your-own-Key-Modell bedeutet, dass Sie Kosten kontrollieren und Vendor-Lock-in bei KI-Preisen vermeiden. Storyblok hat außerdem eine "Concept Room"-Funktion in Entwicklung, die Ideation mit visuellem Content-Planning kombinieren soll.

Internationalisierung mit Storyblok

Storyblok handhabt i18n über feldbasierte Übersetzung -- das bedeutet, Sie haben eine Story mit übersetzten Feldern für jede Sprache, statt das gesamte Dokument pro Sprache zu duplizieren. Das unterscheidet sich grundlegend von Contentful und Sanity, die dokumentbasierte Übersetzung verwenden, und das spielt bei Skalierung eine wesentliche Rolle.

Warum gewinnt feldbasierte Übersetzung? Stellen Sie sich eine Marketing-Website in 10 Sprachen vor. Mit dokumentbasierter i18n (Contentful, Sanity) hätten Sie für jede Seite 10 separate Dokumente. Layout ändern? 10 Dokumente aktualisieren. Mit Storybloks feldbasiertem Ansatz haben Sie eine Story. Die Struktur bleibt dieselbe -- nur die Textfelder haben Sprachvarianten. Layout einmal ändern, alle 10 Sprachen werden aktualisiert.

AI Translate macht das noch schneller. Redakteure schreiben Inhalte in ihrer primären Sprache, klicken auf "Übersetzen", und die KI befüllt die anderen Sprachen über den verbundenen OpenAI- oder Gemini-Anbieter. Unterstützt werden 34+ Sprachen.

So rufen Sie übersetzte Inhalte ab:

// Story auf Deutsch abrufen
const response = await fetch(
  `https://api.storyblok.com/v2/cdn/stories/home` +
  `?version=published` +
  `&language=de` +
  `&token=${process.env.STORYBLOK_TOKEN}`
);
const { story } = await response.json();
// story.content enthält jetzt deutsche Übersetzungen
// Nicht übersetzte Felder fallen auf die Standardsprache zurück

Der Parameter language erledigt die ganze Arbeit. Nicht übersetzte Felder fallen automatisch auf die Standardsprache zurück, sodass keine Seite durch unvollständige Übersetzungen kaputtgeht.

Storyblok vs. die Alternativen

Nach dem Testen aller fünf dieser CMSen für eigene Projekte zeigt sich folgendes Bild bei den Funktionen, die für Projektentscheidungen wirklich zählen:

Wählen Sie Storyblok, wenn Ihr Projekt sowohl Entwickler als auch nicht-technische Content-Redakteure einbindet, die Änderungen visuell sehen müssen. Der Visual Editor ist unübertroffen, und feldbasiertes i18n ist die beste Lösung für mehrsprachige Sites.

Wählen Sie Sanity, wenn Ihr Team entwicklerlastig ist und maximale Schema-Flexibilität möchte. Sanitys Schema-als-Code-Ansatz und die GROQ-Abfragesprache geben Ihnen mehr Kontrolle, Redakteure bekommen aber eine formularbasierte UI statt einer visuellen Vorschau. Lesen Sie unseren Sanity-Leitfaden für das vollständige Bild.

Wählen Sie Strapi oder Payload, wenn Sie Self-Hosting oder Open-Source-Kontrolle brauchen. Weder Storyblok noch Sanity noch Contentful ermöglichen es Ihnen, das CMS auf eigenen Servern zu betreiben. Strapi und Payload schon. Lesen Sie unseren Strapi-Leitfaden oder unseren Payload-Leitfaden für Details.

Wählen Sie Contentful, wenn Sie in einem Enterprise-Umfeld sind, das Ökosystem-Reife, umfangreiche Marketplace-Integrationen und etabliertes Entwickler-Tooling schätzt. Lesen Sie unseren Contentful-Leitfaden.

Für den vollständigen Vergleich mit Bewertungen und praxisnahen Projektempfehlungen, lesen Sie unseren vollständigen Headless-CMS-Vergleich.

Wann Sie Storyblok NICHT verwenden sollten

Jedes CMS hat für bestimmte Projekte K.O.-Kriterien. Hier sind die von Storyblok:

Sie brauchen Self-Hosting. Storyblok ist nur als SaaS verfügbar -- es gibt keine On-Premises-Option, kein Docker-Image, kein selbstverwaltetes Deployment. Wenn Ihre Organisation Datensouveränität oder On-Prem-Hosting erfordert, schauen Sie sich Payload für Self-Hosted-Projekte oder Strapi an.

Sie wollen Schema-als-Code. Storyblok-Komponenten-Schemata werden in der Dashboard-UI definiert, nicht in Ihrer Codebasis. Sie können sie über die Management API exportieren und importieren, aber sie leben nicht als Source of Truth in Ihrem Git-Repo. Wenn versionierte Schemata für Ihr Team wichtig sind, bieten Sanity und Payload beide Code-first-Content-Modellierung.

Sie sind bei Skalierung budgetbeschränkt. Storybloks Preise passen gut für kleine bis mittelgroße Teams. Wer aber 15+ Spaces über mehrere Marken mit Dutzenden von Redakteuren betreibt, sieht die Kosten steigen. Self-Hosted Strapi oder Payload eliminieren CMS-Lizenzkosten vollständig.

Ihr Team besteht ausschließlich aus Entwicklern. Der Visual Editor ist Storybloks Premium-Feature. Wenn niemand in Ihrem Team eine visuelle Vorschau braucht -- wenn alle mit JSON-Bearbeitung oder einer formularbasierten UI vertraut sind -- zahlen Sie für ein Feature, das Sie nicht nutzen.

Sie brauchen direkten Datenbankzugriff. Storyblok abstrahiert seine Storage-Schicht vollständig. Es gibt keine Postgres-Verbindung, keine SQL-Abfragen, keinen direkten Datenzugriff. Wenn Ihr Projekt benutzerdefinierte Datenbankabfragen oder Joins mit anderen Datenquellen auf Datenbankebene erfordert, bietet Payload (gebaut auf MongoDB/Postgres) das.

Aus eigener Erfahrung mit mehreren CMSen gilt: Storyblok glänzt, wenn Entwickler und Content-Redakteure gemeinsam an einem Projekt arbeiten. Besteht Ihr Team nur aus Entwicklern, ist das Visual-Editor-Premium nicht den Preis wert.

Erste Schritte mit Storyblok

Der schnellste Weg von null zu einem funktionierenden Storyblok-Projekt dauert mit Blueprints etwa 30 Minuten, ohne sie eine Stunde. Hier ist die Abfolge:

Schritt 1: Registrieren. Erstellen Sie ein kostenloses Konto auf storyblok.com. Der Starter-Plan gibt Ihnen einen Space mit 25.000 API-Aufrufen pro Monat -- ausreichend für Entwicklung und Prototyping.

Schritt 2: Blueprint wählen oder blank starten. Wenn Sie ein vorkonfiguriertes Projekt möchten, wählen Sie ein Blueprint (Core für minimal, Business für produktionsbereit). Bevorzugen Sie einen Aufbau von Grund auf, erstellen Sie einen leeren Space.

Schritt 3: Frontend verbinden. Storyblok hat offizielle SDKs und Starter für Next.js, Nuxt, Astro, SvelteKit, Remix, Angular und Gatsby. Für ein Next.js-App-Router-Projekt:

npx create-next-app@latest my-storyblok-site
cd my-storyblok-site
npm install @storyblok/react

Schritt 4: Preview-URL für den Visual Editor einrichten. Setzen Sie in Ihren Storyblok-Space-Einstellungen die Preview-URL auf Ihren lokalen Dev-Server (z. B. https://localhost:3000/). Der Visual Editor benötigt HTTPS -- verwenden Sie next dev --experimental-https oder ein Tool wie mkcert.

Schritt 5: Ersten Blok definieren und Story erstellen. Gehen Sie in "Components" im Storyblok-Dashboard, erstellen Sie einen "Page"-Content-Type mit einem Body-Feld, dann einen nestable "Hero"-Blok. Erstellen Sie Ihre erste Story mit dem "Page"-Content-Type. Ziehen Sie den Hero-Blok hinein. Sehen Sie ihn im Visual Editor gerendert.

Framework-spezifische Quickstart-Anleitungen finden Sie auf Storybloks Technologies-Seite mit Setup-Tutorials für jedes unterstützte Framework. Wenn Sie noch zwischen Frameworks für Ihr Frontend abwägen, behandelt unser Next.js-vs.-Remix-Vergleich die Abwägungen, und unser Vercel-vs.-Netlify-Leitfaden hilft bei Deployment-Plattform-Entscheidungen.

FAQ

Was ist Storyblok CMS?

Storyblok ist ein Headless-Content-Management-System mit integriertem Visual Editor, gegründet 2017 in Linz, Österreich. Es verwendet eine komponentenbasierte Architektur namens Bloks für die Content-Modellierung und liefert Inhalte über REST- und GraphQL-APIs aus. Storyblok wird von Unternehmen wie Adidas, Tesla und Oatly für Websites, Apps und Multi-Channel-Content-Delivery eingesetzt.

Ist Storyblok kostenlos nutzbar?

Ja, Storyblok bietet einen kostenlosen Starter-Plan mit einem Benutzer, einem Space und 25.000 API-Aufrufen pro Monat. Kostenpflichtige Pläne beginnen bei 99 $/Monat für den Growth-Tier mit fünf Benutzern. Storyblok bietet außerdem eine 45-tägige kostenlose Testversion von Growth Plus -- großzügiger als die Testphasen der meisten Wettbewerber.

Wie funktioniert der Storyblok Visual Editor?

Der Storyblok Visual Editor lädt Ihre Frontend-Anwendung in einem iframe und legt editierbare Bereiche über jede Komponente (Blok). Content-Redakteure klicken direkt auf Seitenelemente, um sie zu bearbeiten, und sehen Änderungen in Echtzeit. Er erfordert die StoryblokBridge-JavaScript-Bibliothek in Ihrem Frontend-Code, um den iframe mit der Storyblok-Bearbeitungsoberfläche zu verbinden.

Ist Storyblok besser als Contentful?

Das hängt von Ihren Prioritäten ab. Storyblok bietet einen überlegenen Visual Editor und feldbasierte Internationalisierung, was es für Marketing-Teams besser macht, die mehrsprachige Inhalte verwalten. Contentful hat ein ausgereifteres Ökosystem, einen größeren Marketplace an Integrationen und stärkere Enterprise-Verbreitung. Beide sind nur als SaaS verfügbar und haben ähnliche Preisstrukturen.

Welche Frameworks unterstützt Storyblok?

Storyblok bietet offizielle SDKs und Starter-Templates für Next.js, Nuxt, Astro, SvelteKit, Remix, Angular und Gatsby. Das React-SDK (@storyblok/react) und das Vue-SDK (@storyblok/vue) decken die zwei beliebtesten Ökosysteme ab. Blueprints unterstützen derzeit Next.js, Nuxt und Astro für geführtes Projekt-Setup.

Kann man Storyblok selbst hosten?

Nein. Storyblok ist eine reine SaaS-Plattform ohne Self-Hosting- oder On-Premises-Option. Wenn Self-Hosting eine Anforderung für Ihr Projekt ist -- aus Gründen der Datensouveränität, Compliance oder Kosten -- kommen Strapi (Open-Source, Node.js-basiert) oder Payload CMS (Open-Source, Next.js-nativ) als Alternativen mit vollständig selbstgehostetem Deployment in Frage.

Was ist FlowMotion in Storyblok?

FlowMotion ist Storybloks am 31. März 2026 eingeführtes Workflow-Automatisierungs-Feature. Es basiert auf verwaltetem n8n, verbindet sich mit über 500 Integrationen und automatisiert Content-Operationen wie Übersetzungsauslöser, Stakeholder-Benachrichtigungen und plattformübergreifendes Publizieren. FlowMotion ist als Enterprise/Elite-Add-on verfügbar, nicht in Growth- oder Growth-Plus-Plänen enthalten.

Wie handhabt Storyblok Internationalisierung?

Storyblok nutzt feldbasierte Übersetzung, d. h. eine Story enthält übersetzte Varianten jedes Felds statt das gesamte Dokument pro Sprache zu duplizieren. Dieser Ansatz skaliert besser als dokumentbasiertes i18n (wie Contentful und Sanity es verwenden) für Sites mit vielen Sprachen. AI Translate unterstützt 34+ Sprachen über Ihren eigenen OpenAI- oder Gemini-API-Schlüssel.

Wer nutzt Storyblok?

Zu Storybloks Kundenliste gehören Adidas, Tesla, Oatly, Virgin Media O2, dm-drogerie markt, Spendesk und Panini. Die Plattform bedient sowohl Enterprise-Organisationen, die Multi-Market-Content-Operationen verwalten, als auch wachsende Startups, die einen Visual Editor brauchen, um nicht-technische Content-Teams zu ermächtigen. Storyblok hat insgesamt 138 Millionen Dollar Finanzierung durch Series C eingeworben.

Was sind Storyblok Blueprints?

Blueprints sind geführte Projekt-Setup-Templates, die Storyblok im Juli 2025 eingeführt hat. Wählen Sie ein Core Blueprint (minimaler Starter) oder Business Blueprint (produktionsbereit mit vorgefertigten Komponenten). Wählen Sie Ihr Framework -- Next.js, Nuxt oder Astro -- und Storyblok erstellt in wenigen Minuten ein verbundenes GitHub-Repository mit einer Deployment-Pipeline zu Vercel oder Netlify.