![Storyblok CMS: Den Kompletta Utvecklarguiden [2026]](/_next/image?url=https%3A%2F%2Fmedia.techsy.io%2Ftechsy-io%2Fhero-203-1200x630.webp&w=3840&q=75)
Storyblok CMS: Den Kompletta Utvecklarguiden [2026]
Storyblok är ett av de få headless CMS:er där dina innehållsredaktörer faktiskt kan se vad de redigerar -- och just den funktionen förändrar hela dynamiken mellan utvecklare och redaktörer. Efter att ha tagit in 80 miljoner dollar i Series C-finansiering och lanserat arbetsflödesautomatisering i mars 2026 är det värt att förstå vad Storyblok faktiskt gör bra, var det haltar, och om det passar ditt nästa projekt.
Vad är Storyblok?
Storyblok är ett headless CMS med en inbyggd visuell editor, grundat 2017 i Linz, Österrike av Dominik Angerer (VD) och Alexander Feiglstorfer (CTO). Det använder en komponentbaserad arkitektur kallad Bloks och levererar innehåll via REST- och GraphQL-API:er. Storyblok används av Adidas, Tesla och Oatly och har tagit in totalt 138 miljoner dollar i finansiering genom sin Series C-runda.
Ett headless CMS separerar ditt innehåll från din frontend -- du hanterar innehåll via ett API, och din React-, Vue- eller Astro-app konsumerar det. Den delen är densamma i Contentful, Sanity, Strapi och alla andra headless-alternativ. Det som skiljer Storyblok åt är den visuella editorn.
Vi driver fyra produktionswebbplatser på olika headless CMS:er (inklusive Sanity, som driver den här bloggen). Så här ser Storyblok ut utifrån praktisk erfarenhet: den visuella editorn minskar genuint fram-och-tillbaka-kommunikationen mellan utvecklare och innehållsteam. Istället för att redaktörer fyller i formulär och frågar "hur kommer det här att se ut?" ser de faktiskt sidan. Det är en verklig förbättring av arbetsflödet, inte en marknadsföringspoäng.
Kärnarkitekturen bygger på två koncept: Stories (dina sidor eller innehållsposter) och Bloks (återanvändbara komponenter som hjältesektioner, funktionsrutnät eller CTAs). Utvecklare definierar Blok-scheman, redaktörer drar och släpper dem i Stories. Innehållet når din frontend via Content Delivery API:et.
Bland kunderna utöver Adidas och Tesla finns Virgin Media O2, dm-drogerie markt, Oatly, Spendesk och Panini. För en djupare jämförelse av Storyblok mot alla större alternativ, kolla in vår jämförelse av headless CMS.
Hur fungerar Storybloks visuella editor?
Storybloks visuella editor laddar din frontend i en iframe och lägger en redigerbar yta ovanpå varje komponent. Innehållsredaktörer ser en liveförhandsvisning av exakt vad besökare kommer att se, med klicka-för-att-redigera-funktionalitet på varje Blok. Det kräver att JavaScript-biblioteket StoryblokBridge är konfigurerat i din frontend-applikation.
Det här är funktionen som skiljer Storyblok från Contentfuls formulärbaserade approach, Sanitys schema-som-kod-approach eller Strapis adminpanel. De CMS:erna ger redaktörerna ett formulär med fält. Storyblok ger redaktörerna den faktiska sidan.
Iframe-arkitekturen
Så här fungerar det under huven: när en redaktör öppnar en Story i Storyblok-dashboarden laddar den visuella editorn din frontend-applikation inuti en iframe. Storyblok injicerar en _editable-egenskap i varje Bloks data (bara på utkastsinnehåll), och JavaScript-biblioteket StoryblokBridge lyssnar efter ändringar. När en redaktör klickar på en komponent kommunicerar bryggan med det överordnade Storyblok-fönstret för att öppna rätt fältredigerare.
Resultatet? Redaktörer klickar direkt på en hjältesektion för att redigera rubriken. De drar en ny testimonial-Blok under prissektionen. De ser ändringar reflekteras direkt i förhandsvisningen. Ingen "spara och kolla staging-siten"-loop.
En sak att hålla koll på: den visuella editorn fungerar bara med utkastsinnehåll, inte publicerat. Din förhandsvisnings-URL måste peka på en version av din app som hämtar utkastsdata. Det överraskar folk vid konfiguration.
Konfigurera StoryblokBridge
Här är en typisk konfiguration i ett Next.js App Router-projekt. Du behöver @storyblok/react installerat:
// 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;
}Wrappa sedan din layout med providern och använd StoryblokStory-komponenten för att aktivera live-redigering:
// 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} />;
}StoryblokStory-komponenten hanterar bryckanslutningen automatiskt -- den registrerar iframe-lyssnaren, applicerar _editable-attribut på dina Bloks och aktiverar klicka-för-att-redigera i den visuella editorn. Du behöver inte koppla upp det manuellt.
Storybloks komponentarkitektur (Bloks och Stories)
Storyblok organiserar innehåll med hjälp av två kärnkoncept: Stories (sidor eller innehållsposter) och Bloks (återanvändbara komponenter som hjältesektioner, funktionsrutnät eller CTAs). Utvecklare definierar Blok-scheman i Storyblok-dashboarden, och redaktörer komponerar sidor genom att dra och släppa Bloks i Stories.
Tänk dig det som LEGO. Stories är basplattorna -- sidorna du bygger. Bloks är de enskilda klossarna -- en hjältesektion, ett testimonial-kort, en prislista. Du definierar vilka fält varje Blok-typ har (rubrik, bild, CTA-text), och redaktörer snappar ihop dem.
Stories: Dina innehållsposter
Varje sida, artikel eller innehållspost i Storyblok är en Story. Stories finns i en mappstruktur (som ett filsystem), och varje Story har en slug som mappas till en URL. En Storys kropp är sammansatt av Bloks -- det är i grunden en behållare.
Stories kan också hålla icke-sidinnehåll. Du kan ha en Story kallad "site-settings" som lagrar dina navigeringslänkar, sidfotstext och URL:er till sociala medier. Flexibiliteten liknar hur du skulle använda singleton-dokument i Sanity.
Bloks: Återanvändbara byggklossar
Bloks finns i två varianter: nestade och innehållstyp (rotnivå). Innehållstyp-Bloks definierar schemat på toppnivå för en Story (som "Page" eller "BlogPost"). Nestade Bloks är de komponenter redaktörer drar in i en Storys kropp -- hjältesektioner, bildgallerier, FAQ-dragspel.
Varje Blok har ett schema som definierar dess fält. Du skapar dessa i Storyblok-dashboarden under "Components" (inte i kod, vilket är en avgörande skillnad från Sanitys schema-som-kod-approach).
Innehållsmodellering i praktiken
Så här ser ett Hero Blok-schema ut när du definierar det via Management API:et:
{
"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
}
}Och React-komponenten som renderar den här Bloken:
// 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>
);
}Anropet storyblokEditable(blok) är det som aktiverar klicka-för-att-redigera i den visuella editorn. Utan det renderar komponenten bra, men redaktörer kan inte klicka på den för att redigera fält. Lätt att glömma, smärtsamt att debugga.
Storybloks API:er: REST vs GraphQL vs Management
Storyblok erbjuder tre API:er: Content Delivery API (REST, rekommenderas för de flesta projekt), ett GraphQL API (skrivskyddat, användbart när du behöver selektiv fälthämtning) och Management API:et (för programmatiska innehållsoperationer som migreringar och massuppdateringar). Storyblok rekommenderar REST för nya projekt.
De flesta headless CMS-guider hoppar helt över API-lagret. Det är ett misstag -- vilket API du väljer påverkar dina byggtider, cachningsstrategi och begränsningsutrymme för förfrågningar.
Content Delivery API (REST)
Det här är det primära API:et och det du kommer använda 90% av tiden. Det stöder filtrering, sortering, paginering och upplösning av relationer mellan Stories. Hastighetsbegränsningarna är generösa: 50 förfrågningar/sekund på betalplaner.
// Hämta en story via Content Delivery API:et
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); // Din Bloks-dataGraphQL API
GraphQL API:et är skrivskyddat och har andra hastighetsgränser (100 komplexitetspoäng per sekund). Det är användbart när du vill ha stark typning och inte behöver hela Story-nyttolasten -- du kan begära exakt de fält du behöver.
{
PageItem(id: "home") {
name
slug
content {
_uid
component
headline
subheadline
}
}
}Management API
Management API:et hanterar CRUD-operationer på ditt Storyblok-utrymme: skapa Stories, uppdatera komponentscheman, hantera tillgångar och köra migreringar. Du använder det för CI/CD-pipelines, massinnehållsuppdateringar eller för att bygga anpassad verktygsutrustning kring Storyblok.
Vilket API bör du använda?
| Kriterium | Content Delivery (REST) | GraphQL | Management |
|---|---|---|---|
| Användningsfall | Hämta innehåll till din sajt | Selektiva fältfrågor | Innehållsoperationer, migreringar |
| Läs/Skriv | Skrivskyddat | Skrivskyddat | Läs + Skriv |
| Hastighetsgränser | 50 frågor/sek (betalt) | 100 poäng/sek | 3 frågor/sek |
| Bäst för | De flesta projekt | Stora innehållsmodeller | DevOps, CI/CD |
| Storybloks rek. | Ja -- standardvalet | För specifika behov | Automatisering only |
För de flesta Next.js-, Nuxt- eller Astro-projekt hanterar REST Content Delivery API:et med storyblok-js-client eller det officiella SDK:et allt du behöver. Ta till GraphQL om din innehållsmodell är komplex och du hämtar djupt nästlade strukturer med massor av fält du inte behöver.
Storybloks priser 2026
Storybloks priser börjar med ett gratis Starter-plan. Betalda planer börjar på 99 dollar/månad för Growth (5 användare). Högre nivåer inkluderar Growth Plus, Premium (mellanmarknad) och Elite (obegränsat). Nya priser trädde i kraft den 7 april 2026, med en 60-dagars överkopplingsperiod för befintliga månadsabonnenter.
Här är uppdelningen av aktuella prisnivåer:
| Plan | Pris | Användare | API-anrop | Viktiga funktioner |
|---|---|---|---|---|
| Starter | Gratis | 1 | 25 000/mån | 1 utrymme, communitysupport |
| Growth | $99/mån | 5 | 100 000/mån | Anpassade roller, arbetsflöden |
| Growth Plus | $189/mån | 10 | 250 000/mån | Avancerade arbetsflöden, uppgifter |
| Premium | Anpassat | Flexibelt | Anpassat | SSO, SLA, dedikerad support |
| Elite | Anpassat | Obegränsat | Obegränsat | FlowMotion, premium-SLA |
Storyblok erbjuder också en 45-dagars gratis testperiod för Growth Plus, vilket är ovanligt generöst jämfört med Contentfuls 30-dagars testperiod eller Sanitys användningsbaserade gratisnivå.
Den ärliga bedömningen av priserna: Storyblok kan bli dyrt i stor skala. Reddiттrådar från byråer nämner konsekvent prisökning i takt med att projekt växer -- fler användare, fler API-anrop, fler utrymmen för multi-site-konfigurationer. Om du är budgetbegränsad ger Strapis gratis egenhostad option eller Payloads öppen källkod-modell mer flexibilitet till priset av att hantera din egen infrastruktur.
För sidoprojekt och prototyper fungerar den gratis Starter-planen. För produktionsprojekt med 2--5 innehållsredaktörer är Growth-planen på 99 dollar/månad konkurrenskraftig. Utöver det, skaffa en anpassad offert från Storybloks säljteam -- de publicerade priserna berättar bara en del av historien.
Nyheter i 2026: FlowMotion, Blueprints och AI
Under 2026 lanserade Storyblok FlowMotion (31 mars), ett arbetsflödesautomatiseringslager byggt på n8n med 500+ integrationer. Blueprints, lanserat i juli 2025, erbjuder guidad projektuppstart med ramverksspecifika startpaket. AI-funktioner inkluderar AI Translate (34+ språk), Ideation Room för innehållsidéer och AI SEO-verktyg.
Ingen av de andra Storyblok-guiderna där ute täcker dessa funktioner ännu. Här är vad som faktiskt levereras.
FlowMotion: Arbetsflödesautomatisering
FlowMotion är Storybloks svar på flaskhalsen i innehållsoperationer. Enligt deras lanseringsmeddelande lägger 75% av marknadsförare 6+ timmar per vecka på uppgifter för innehållskoordinering -- saker som att meddela intressenter, trigga översättningar och schemalägga inlägg på sociala medier.
FlowMotion bygger på hanterad n8n (det öppna källkodsverktyget för arbetsflödesautomatisering) och ansluter till 500+ integrationer. Du ställer in utlösare på innehållshändelser -- skapa, uppdatera, godkänna, översätta, schemalägga, publicera -- och FlowMotion kör arbetsflödet automatiskt. Föreställ dig det här: en redaktör publicerar ett blogginlägg, och FlowMotion triggar automatiskt AI-översättning till 10 språk, meddelar sociala medieteamet via Slack och schemalägger ett Twitter/X-inlägg.
Det är ett Enterprise/Elite-tillägg, så mindre team har inte tillgång. Men för organisationer som hanterar innehåll på flera marknader och kanaler är det en avsevärd tidsbesparare.
Blueprints: Guidad projektuppstart
Blueprints löser en verklig smärtpunkt: den initiala konfigurationen av ett Storyblok-projekt. En undersökning från 2024 visade att 24% av seniora utvecklare säger att den initiala CMS-projektkonfigurationen tar dagar, inte timmar.
Storyblok erbjuder två Blueprint-nivåer:
- Core Blueprint: Minimal konfiguration -- ansluter ditt ramverk (Next.js, Nuxt eller Astro), skapar ett utrymme och driftsätter ett grundläggande startpaket. Bra för utvecklare som vill ha en ren start.
- Business Blueprint: Produktionsklar konfiguration med förbyggda komponenter, en konfigurerad innehållsmodell och driftsättning till Vercel eller Netlify. Närmast en "lansera på 30 minuter"-upplevelse.
Du väljer ditt ramverk, väljer Core eller Business, och Storyblok skapar ett anslutet GitHub-repo med en distributionspipeline. Det sparar genuint timmar av boilerplate-konfiguration jämfört med att börja från noll.
AI-funktioner: Translate, Ideation Room och mer
Storybloks AI-funktioner tar ett ta-med-din-egen-leverantör-approach. Du ansluter din OpenAI- eller Google Gemini API-nyckel, och Storyblok använder den för:
- AI Translate: Översätt innehåll till 34+ språk direkt i editorn. Inte en ersättning för professionell översättning av kritiskt innehåll, men utmärkt för utkast och internt innehåll.
- Ideation Room: Samarbetande AI-brainstorming för innehållsidéer. Redaktörer beskriver vad de behöver, och AI:n genererar konturer, rubriker och utkast.
- AI Alt Text: Automatisk generering av alternativ text för bilder.
- AI SEO: Förslag på metatitel och metabeskrivning baserade på ditt innehåll.
Modellen med din-egen-nyckel innebär att du kontrollerar kostnader och undviker leverantörsberoende för AI-prissättning. Storyblok har också en "Concept Room"-funktion under utveckling som syftar till att kombinera idéskapande med visuell innehållsplanering.
Internationalisering med Storyblok
Storyblok hanterar i18n via fältnivåöversättning, vilket innebär att du har en Story med översatta fält för varje språk istället för att duplicera hela dokumentet per språk. Det här är fundamentalt annorlunda från Contentful och Sanity, som använder dokumentnivåöversättning, och det spelar roll i stor skala.
Varför vinner fältnivåöversättning? Tänk dig en marknadsföringssajt på 10 språk. Med dokumentnivå-i18n (Contentful, Sanity) skulle du ha 10 separata dokument för varje sida. Ändra layouten? Uppdatera 10 dokument. Med Storybloks fältnivåapproach har du en Story. Strukturen förblir densamma -- bara textfälten har språkvarianter. Ändra layouten en gång, alla 10 språk uppdateras.
AI Translate gör det ännu snabbare. Redaktörer skriver innehåll på sitt primärspråk, klickar "Översätt", och AI:n fyller i de andra språken med deras anslutna OpenAI- eller Gemini-leverantör. Det stöder 34+ språk.
Så här hämtar du översatt innehåll:
// Hämta en story på tyska
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 innehåller nu tyska översättningar
// Oöversatta fält faller tillbaka till standardspråketParametern language gör allt arbete. Oöversatta fält faller automatiskt tillbaka till standardspråket, så du får aldrig en trasig sida på grund av ofullständiga översättningar.
Storyblok vs alternativen
Efter att ha testat alla fem av dessa CMS:er för våra egna projekt är det här hur de jämförs på de funktioner som faktiskt spelar roll för projektbeslut:
| Funktion | Storyblok | Sanity | Contentful | Strapi | Payload |
|---|---|---|---|---|---|
| Visuell editor | Bäst i klassen WYSIWYG | Anpassningsbar Studio | Formulärbaserad | Adminpanel | Adminpanel |
| Öppen källkod | Nej (enbart SaaS) | Delvis (Studio) | Nej | Ja (v5) | Ja (v3) |
| Egenhostad | Nej | Nej | Nej | Ja | Ja |
| i18n-approach | Fältnivå | Dokumentnivå | Dokumentnivå | Plugin-baserad | Inbyggd |
| Innehållsmodellering | Bloks (dashboard-UI) | Schema-som-kod (TS) | Innehållstyper (UI) | Content-Type Builder | Samlingsconfig (kod) |
| API | REST + GraphQL | GROQ + GraphQL | GraphQL + REST | REST + GraphQL | Local + REST + GraphQL |
| Gratisnivå | Ja (begränsad) | Ja (generös) | Ja (begränsad) | Ja (egenhostad) | Ja (egenhostad) |
| Idealisk för | Marknadsföring + devteam | Tunga devteam | Enterprise-innehåll | Budgetmedvetna | Next.js-native appar |
Välj Storyblok om ditt projekt involverar både utvecklare och icke-tekniska innehållsredaktörer som behöver se ändringar visuellt. Den visuella editorn är oöverträffad, och fältnivå-i18n är den bästa i klassen för flerspråkiga sajter.
Välj Sanity om ditt team är tungt på utvecklare och du vill ha maximal schemaflexibilitet. Sanitys schema-som-kod-approach och GROQ-frågespråk ger dig mer kontroll, men redaktörer får ett formulärbaserat gränssnitt, inte en visuell förhandsvisning. Läs vår Sanity-guide för hela bilden.
Välj Strapi eller Payload om du behöver egenhosting eller öppen källkod-kontroll. Varken Storyblok, Sanity eller Contentful låter dig köra CMS:et på dina egna servrar. Strapi och Payload gör det. Kolla vår Strapi-guide eller vår Payload-guide för detaljer.
Välj Contentful om du befinner dig i en företagsmiljö som värdesätter ekosystemens mognad, omfattande marknadsplatsintegrationer och etablerad utvecklarverktyg. Läs vår Contentful-guide.
För hela jämförelsen med poängsättning och verkliga projektrekommendationer, se vår fullständiga headless CMS-jämförelse.
När bör du INTE använda Storyblok?
Varje CMS har dealbreakers för vissa projekt. Här är Storybloks:
Du behöver egenhosting. Storyblok är enbart SaaS -- det finns inget on-premises-alternativ, ingen Docker-bild, ingen egenhanteringsinstallation. Om din organisation kräver datasuveränitet eller on-prem-hosting, titta på Payload för egenhostade projekt eller Strapi istället.
Du vill ha schema-som-kod. Storyblok-komponentscheman definieras i dashboardens UI, inte i din kodbas. Du kan exportera och importera dem via Management API:et, men de finns inte i ditt Git-repo som sanningskälla. Om versionskontrollerade scheman är viktigt för ditt team erbjuder både Sanity och Payload kod-first innehållsmodellering.
Du är budgetbegränsad i stor skala. Storybloks prissättning fungerar bra för små till medelstora team. Men om du driver 15+ utrymmen för flera varumärken med dussintals redaktörer, ökar kostnaderna. Egenhostad Strapi eller Payload eliminerar CMS-licensieringskostnader helt.
Ditt team består enbart av utvecklare. Den visuella editorn är Storybloks premiumfunktion. Om ingen på ditt team behöver en visuell förhandsvisning -- om alla är bekväma med att redigera JSON eller använda ett formulärbaserat UI -- betalar du för en funktion du inte kommer använda.
Du behöver direkt databasåtkomst. Storyblok abstraherar fullständigt sitt lagringslager. Det finns ingen Postgres-anslutning, inga SQL-frågor, ingen direkt dataåtkomst. Om ditt projekt kräver anpassade databasfrågor eller joins med andra datakällor på databasnivå ger Payload (byggt på MongoDB/Postgres) dig det.
Utifrån vår erfarenhet av att bygga med flera CMS:er lyser Storyblok när utvecklare och innehållsredaktörer samarbetar på samma projekt. Om ditt team bara består av utvecklare är det inte värt att betala premiumpriset för den visuella editorn.
Kom igång med Storyblok
Den snabbaste vägen från noll till ett fungerande Storyblok-projekt tar ungefär 30 minuter med Blueprints, eller en timme utan dem. Här är sekvensen:
Steg 1: Registrera dig. Skapa ett gratis konto på storyblok.com. Starter-planen ger dig ett utrymme med 25 000 API-anrop/månad -- tillräckligt för utveckling och prototypframtagning.
Steg 2: Välj ett Blueprint eller börja blankt. Om du vill ha ett förkonfigurerat projekt, välj ett Blueprint (Core för minimal, Business för produktionsklart). Om du föredrar att bygga från grunden, skapa ett tomt utrymme.
Steg 3: Anslut din frontend. Storyblok har officiella SDK:er och startpaket för Next.js, Nuxt, Astro, SvelteKit, Remix, Angular och Gatsby. För ett Next.js App Router-projekt:
npx create-next-app@latest my-storyblok-site
cd my-storyblok-site
npm install @storyblok/reactSteg 4: Konfigurera förhandsvisnings-URL:en för den visuella editorn. I dina Storyblok-utrymmets inställningar, ange förhandsvisnings-URL:en till din lokala dev-server (t.ex. https://localhost:3000/). Den visuella editorn kräver HTTPS -- använd next dev --experimental-https eller ett verktyg som mkcert.
Steg 5: Definiera din första Blok och skapa en Story. Gå till "Components" i Storyblok-dashboarden, skapa en "Page" innehållstyp med ett body-fält, skapa sedan en nestbar "Hero" Blok. Skapa din första Story med innehållstypen "Page". Dra in Hero-Bloken. Se den renderas i den visuella editorn.
För ramverksspecifika snabbstartsguider underhåller Storyblok en teknologisida med installationshandledningar för varje stödt ramverk. Om du väljer ramverk för din frontend täcker vår Next.js vs Remix-jämförelse avvägningarna, och vår Vercel vs Netlify-guide hjälper med val av distributionsplattform.
Vanliga frågor
Vad är Storyblok CMS?
Storyblok är ett headless innehållshanteringssystem med en inbyggd visuell editor, grundat 2017 i Linz, Österrike. Det använder en komponentbaserad arkitektur kallad Bloks för innehållsmodellering och levererar innehåll via REST- och GraphQL-API:er. Storyblok används av företag som Adidas, Tesla och Oatly för webbplatser, appar och flerkanalsleverans av innehåll.
Är Storyblok gratis att använda?
Ja, Storyblok erbjuder en gratis Starter-plan med en användare, ett utrymme och 25 000 API-anrop per månad. Betalda planer börjar på 99 dollar/månad för Growth-nivån med fem användare. Storyblok erbjuder också en 45-dagars gratis testperiod för Growth Plus, vilket är mer generöst än de flesta konkurrenters testperioder.
Hur fungerar Storybloks visuella editor?
Storybloks visuella editor laddar din frontend-applikation inuti en iframe och lägger en redigerbar yta ovanpå varje komponent (Blok). Innehållsredaktörer klickar direkt på sidelement för att redigera dem och ser ändringar i realtid. Det kräver JavaScript-biblioteket StoryblokBridge i din frontend-kod för att ansluta iframe:n till Storybloks redigeringsgränssnitt.
Är Storyblok bättre än Contentful?
Det beror på dina prioriteringar. Storyblok erbjuder en överlägsen visuell editor och internationalisering på fältnivå, vilket gör det bättre för marknadsföringsteam som hanterar flerspråkigt innehåll. Contentful har ett mer moget ekosystem, en större marknadsplats med integrationer och djupare företagsanvändning. Båda är enbart SaaS med liknande prisstrukturer.
Vilka ramverk stöder Storyblok?
Storyblok tillhandahåller officiella SDK:er och startmallar för Next.js, Nuxt, Astro, SvelteKit, Remix, Angular och Gatsby. React SDK:et (@storyblok/react) och Vue SDK:et (@storyblok/vue) täcker de två mest populära ekosystemen. Blueprints stöder för närvarande Next.js, Nuxt och Astro för guidad projektuppstart.
Kan man egehosta Storyblok?
Nej. Storyblok är en enbart SaaS-plattform utan egenhosting eller on-premises-alternativ. Om egenhosting är ett krav för ditt projekt -- på grund av datasuveränitet, efterlevnad eller kostnadsskäl -- överväg Strapi (öppen källkod, Node.js-baserad) eller Payload CMS (öppen källkod, Next.js-native) som alternativ med stöd för fullständiga egenhostade driftsättningar.
Vad är FlowMotion i Storyblok?
FlowMotion är Storybloks arbetsflödesautomatiseringsfunktion som lanserades den 31 mars 2026. Byggt på hanterad n8n ansluter det till 500+ integrationer och automatiserar innehållsoperationer som översättningstriggers, intressentnotifikationer och publicering på flera plattformar. FlowMotion är tillgängligt som ett Enterprise/Elite-tillägg och ingår inte i Growth- eller Growth Plus-planerna.
Hur hanterar Storyblok internationalisering?
Storyblok använder fältnivåöversättning, vilket innebär att en Story innehåller översatta varianter av varje fält istället för att duplicera hela dokumentet per språk. Den här approachen skalar bättre än dokumentnivå-i18n (som används av Contentful och Sanity) för sajter med många språk. AI Translate stöder 34+ språk med din egen OpenAI- eller Gemini API-nyckel.
Vilka använder Storyblok?
Storybloks kundlista inkluderar Adidas, Tesla, Oatly, Virgin Media O2, dm-drogerie markt, Spendesk och Panini. Plattformen betjänar både stora företag som hanterar innehållsoperationer på flera marknader och växande startups som behöver en visuell editor för att ge icke-tekniska innehållsteam mer handlingsutrymme. Storyblok har totalt tagit in 138 miljoner dollar i finansiering genom Series C.
Vad är Storyblok Blueprints?
Blueprints är guidade projektuppstartmallar som lanserades i juli 2025 av Storyblok. Välj ett Core Blueprint (minimal startpunkt) eller Business Blueprint (produktionsklart med förbyggda komponenter). Välj ditt ramverk -- Next.js, Nuxt eller Astro -- och Storyblok skapar ett anslutet GitHub-repo med en distributionspipeline till Vercel eller Netlify på några minuter.