![Storyblok CMS: Den komplette utviklerguiden [2026]](/_next/image?url=https%3A%2F%2Fmedia.techsy.io%2Ftechsy-io%2Fhero-203-1200x630.webp&w=3840&q=75)
Storyblok CMS: Den komplette utviklerguiden [2026]
Storyblok er ett av få headless CMS-er der innholdsredaktørene faktisk kan se hva de redigerer -- og den ene funksjonen endrer hele dynamikken mellom utviklere og redaktører. Etter en Series C-runde på $80 millioner og lansering av arbeidsflytautomatisering i mars 2026 er det verdt å forstå hva Storyblok faktisk gjør bra, hvor det kommer til kort, og om det passer ditt neste prosjekt.
Hva er Storyblok?
Storyblok er et headless CMS med innebygd visuell editor, grunnlagt i 2017 i Linz, Østerrike, av Dominik Angerer (CEO) og Alexander Feiglstorfer (CTO). Det bruker en komponentbasert arkitektur kalt Bloks og leverer innhold via REST- og GraphQL-API-er. Storyblok brukes av Adidas, Tesla og Oatly, og har hentet inn totalt $138 millioner i finansiering gjennom Series C-runden.
Et headless CMS skiller innholdet ditt fra frontenden -- du administrerer innhold via et API, og React-, Vue- eller Astro-appen din henter det. Den biten er den samme i Contentful, Sanity, Strapi og alle andre headless-alternativer. Det som skiller Storyblok er den visuelle editoren.
Vi driver fire produksjonsnettsteder på ulike headless CMS-er (inkludert Sanity, som driver denne bloggen). Her er hvordan Storyblok sammenlignes basert på hands-on erfaring: den visuelle editoren reduserer faktisk frem-og-tilbake-kommunikasjon mellom utviklere og innholdsteam. I stedet for at redaktørene fyller ut skjemaer og spør «hvordan ser dette ut?», ser de den faktiske siden. Det er en reell forbedring av arbeidsflyten, ikke et markedsføringspunkt.
Kjernearkitekturen bygger på to konsepter: Stories (sidene eller innholdsoppføringene dine) og Bloks (gjenbrukbare komponenter som hero-seksjoner, funksjonsgrid eller CTA-er). Utviklere definerer Blok-skjemaer, redaktørene drar og slipper dem inn i Stories. Innholdet når frontenden din via Content Delivery API.
Merkbare kunder utover Adidas og Tesla inkluderer Virgin Media O2, dm-drogerie markt, Oatly, Spendesk og Panini. For en grundigere gjennomgang av hvordan Storyblok står seg mot alle de store alternativene, sjekk ut vår headless CMS-sammenligning.
Hvordan fungerer den visuelle editoren i Storyblok?
Storybloks visuelle editor laster frontenden din i en iframe og legger redigerbare regioner oppå hver komponent. Innholdsredaktørene ser en live forhåndsvisning av nøyaktig hva besøkende ser, med klikk-for-å-redigere-funksjonalitet på hver Blok. Det krever at StoryblokBridge JavaScript-biblioteket er satt opp i frontendapplikasjonen din.
Dette er funksjonen som skiller Storyblok fra Contentfuls skjemabaserte tilnærming, Sanitys schema-as-code-tilnærming eller Strapris adminpanel. De CMS-ene gir redaktørene et skjema med felt. Storyblok gir redaktørene den faktiske siden.
Iframe-arkitekturen
Slik fungerer det under panseret: når en redaktør åpner en Story i Storyblok-dashbordet, laster den visuelle editoren frontendapplikasjonen din inne i en iframe. Storyblok injiserer en _editable-egenskap inn i dataene til hver Blok (bare på utkastinnhold), og StoryblokBridge JavaScript-biblioteket lytter etter endringer. Når en redaktør klikker på en komponent, kommuniserer broen med det overordnede Storyblok-vinduet for å åpne riktig felteditor.
Resultatet? Redaktørene klikker direkte på en hero-seksjon for å redigere overskriften. De drar en ny testimonial-Blok under prisingseksjonen. De ser endringer reflektert umiddelbart i forhåndsvisningen. Ingen «lagre og sjekk staging-siden»-løkker.
En ting å være obs på: den visuelle editoren fungerer bare med utkastinnhold, ikke publisert innhold. Forhåndsvisnings-URL-en din må peke til en versjon av appen som henter utkastdata. Det overrasker mange under oppsett.
Sette opp StoryblokBridge
Her er et typisk oppsett i et Next.js App Router-prosjekt. Du trenger @storyblok/react installert:
// 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;
}Pakk deretter layouten din inn med provideren og bruk StoryblokStory-komponenten for å aktivere 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 håndterer brotilkoblingen automatisk -- den registrerer iframe-lytteren, anvender _editable-attributter på Bloks-ene dine, og aktiverer klikk-for-å-redigere i den visuelle editoren. Du trenger ikke konfigurere det manuelt.
Storybloks komponentarkitektur (Bloks og Stories)
Storyblok organiserer innhold ved hjelp av to kjernekonsepter: Stories (sider eller innholdsoppføringer) og Bloks (gjenbrukbare komponenter som hero-seksjoner, funksjonsgrid eller CTA-er). Utviklere definerer Blok-skjemaer i Storyblok-dashbordet, og redaktørene setter sammen sider ved å dra og slippe Bloks inn i Stories.
Tenk på det som LEGO. Stories er bunnplatene -- sidene du bygger. Bloks er de individuelle brikkene -- en hero-seksjon, et testimonial-kort, en prisingstabell. Du definerer hvilke felt hver Blok-type har (overskrift, bilde, CTA-tekst), og redaktørene setter dem sammen.
Stories: Innholdsoppføringene dine
Hver side, artikkel eller innholdsoppføring i Storyblok er en Story. Stories ligger i en mappestruktur (som et filsystem), og hver Story har en slug som tilsvarer en URL. En Storys brødtekst er satt sammen av Bloks -- den er i bunn og grunn en container.
Stories kan også inneholde ikke-sideinnhold. Du kan ha en Story kalt «site-settings» som lagrer navigasjonslenker, bunntekst og sosiale medier-URL-er. Fleksibiliteten ligner hvordan du ville brukt singleton-dokumenter i Sanity.
Bloks: Gjenbrukbare byggesteiner
Bloks finnes i to varianter: nestbare og innholdstype (rotnivå). Innholdstype-Bloks definerer toppnivå-skjemaet for en Story (som «Page» eller «BlogPost»). Nestbare Bloks er komponentene redaktørene drar inn i brødteksten til en Story -- hero-seksjoner, bildegallerienter, FAQ-trekkspill.
Hver Blok har et skjema som definerer feltene. Du oppretter disse i Storyblok-dashbordet under «Components» (ikke i kode, noe som er en sentral forskjell fra Sanitys schema-as-code-tilnærming).
Innholdsmodellering i praksis
Her er hvordan et Hero Blok-skjema ser ut når du definerer det via Management API:
{
"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
}
}Og React-komponenten som rendrer denne 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>
);
}storyblokEditable(blok)-kallet er det som aktiverer klikk-for-å-redigere i den visuelle editoren. Uten det rendres komponenten fint, men redaktørene kan ikke klikke på den for å redigere felt. Lett å glemme, vondt å feilsøke.
Storyblok API-er: REST vs GraphQL vs Management
Storyblok tilbyr tre API-er: Content Delivery API (REST, anbefalt for de fleste prosjekter), et GraphQL API (skrivebeskyttet, nyttig når du trenger selektiv felthenting) og Management API (for programmatiske innholdsoperasjoner som migrasjoner og masseredigeringer). Storyblok anbefaler REST for nye prosjekter.
De fleste headless CMS-guider hopper over API-laget helt. Det er en feil -- API-et du velger påvirker byggetidene, cachingstrategien og hastighetsbegrensningsrommet.
Content Delivery API (REST)
Dette er hoved-API-et og det du bruker 90 % av tiden. Det støtter filtrering, sortering, paginering og oppretting av relasjoner mellom Stories. Hastighetsbegrensningene er rause: 50 forespørsler/sekund på betalte abonnementer.
// Henter en story via Content Delivery API
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); // Bloks-dataene dineGraphQL API
GraphQL API-et er skrivebeskyttet og har ulike hastighetsbegrensninger (100 kompleksitetspoeng per sekund). Det er nyttig når du vil ha sterk typing og ikke trenger hele Story-nyttelasten -- du kan be om nøyaktig de feltene du trenger.
{
PageItem(id: "home") {
name
slug
content {
_uid
component
headline
subheadline
}
}
}Management API
Management API håndterer CRUD-operasjoner i Storyblok-spacet ditt: opprette Stories, oppdatere komponentskjemaer, administrere ressurser og kjøre migrasjoner. Du bruker dette til CI/CD-pipelines, masseinnholdsoppdateringer eller for å bygge egendefinert verktøy rundt Storyblok.
Hvilket API bør du bruke?
| Kriterium | Content Delivery (REST) | GraphQL | Management |
|---|---|---|---|
| Brukstilfelle | Hente innhold til siden | Selektive feltspørringer | Innholdsoperasjoner, migrasjoner |
| Lese/Skrive | Skrivebeskyttet | Skrivebeskyttet | Lese + Skrive |
| Hastighetsbegrensning | 50 forespørsler/sek (betalt) | 100 poeng/sek | 3 forespørsler/sek |
| Best for | De fleste prosjekter | Store innholdsmodeller | DevOps, CI/CD |
| Storybloks anbefaling | Ja -- standardvalg | For spesifikke behov | Bare automatisering |
For de fleste Next.js-, Nuxt- eller Astro-prosjekter håndterer REST Content Delivery API med storyblok-js-client eller den offisielle SDK-en alt du trenger. Bruk GraphQL hvis innholdsmodellen din er kompleks og du henter dypt nestede strukturer med mange felt du ikke trenger.
Storyblok-priser i 2026
Storyblok-priser starter med en gratis Starter-plan. Betalte abonnementer begynner på $99/måneden for Growth (5 brukere). Høyere nivåer inkluderer Growth Plus, Premium (mellomsegment) og Elite (ubegrenset). Ny prising trådte i kraft 7. april 2026, med en 60-dagers overgangsperiode for eksisterende månedlige abonnenter.
Her er oversikten over gjeldende prisnivåer:
| Abonnement | Pris | Brukere | API-kall | Viktige funksjoner |
|---|---|---|---|---|
| Starter | Gratis | 1 | 25K/mnd | 1 space, community support |
| Growth | $99/mnd | 5 | 100K/mnd | Egendefinerte roller, arbeidsflyter |
| Growth Plus | $189/mnd | 10 | 250K/mnd | Avanserte arbeidsflyter, oppgaver |
| Premium | Tilpasset | Fleksibelt | Tilpasset | SSO, SLA, dedikert support |
| Elite | Tilpasset | Ubegrenset | Ubegrenset | FlowMotion, premium SLA |
Storyblok tilbyr også en 45-dagers gratis prøveperiode av Growth Plus, noe som er uvanlig sjenerøst sammenlignet med Contentfuls 30-dagers prøveperiode eller Sanitys bruksbaserte gratistier.
Den ærlige vurderingen av prising: Storyblok kan bli dyrt i stor skala. Reddit-tråder fra byråer nevner konsekvent priseskalering etter hvert som prosjekter vokser -- flere brukere, flere API-kall, flere spaces for oppsett med flere nettsteder. Er du budsjettklemme, gir Strapris gratis selvhostede alternativ eller Payloads åpen kildekode-modell mer fleksibilitet, til prisen av å administrere din egen infrastruktur.
For sideprosjekter og prototyper fungerer den gratis Starter-planen. For produksjonsprosjekter med 2--5 innholdsredaktører er Growth-planen på $99/måneden konkurransedyktig. Utover det, få et tilpasset tilbud fra Storybloks salgsteam -- den publiserte prisingen forteller bare en del av historien.
Nytt i 2026: FlowMotion, Blueprints og AI
I 2026 lanserte Storyblok FlowMotion (31. mars), et arbeidsflytautomatiseringslag bygget på n8n med 500+ integrasjoner. Blueprints, lansert i juli 2025, gir veiledet prosjektoppsett med rammeverks-spesifikke startere. AI-funksjoner inkluderer AI Translate (34+ språk), Ideation Room for innholdsbrainstorming og AI SEO-verktøy.
Ingen av de andre Storyblok-guidene der ute dekker disse funksjonene ennå. Her er hva som faktisk leveres.
FlowMotion: Arbeidsflytautomatisering
FlowMotion er Storybloks svar på flaskehalser i innholdsoperasjoner. Ifølge deres lanseringsmelding bruker 75 % av markedsførere 6+ timer per uke på innholdskoordinering -- ting som å varsle interessenter, utløse oversettelser og planlegge innlegg på sosiale medier.
FlowMotion er bygget på administrert n8n (det åpen kildekode-baserte arbeidsflytautomatiseringsverktøyet) og kobler seg til 500+ integrasjoner. Du setter opp utløsere på innholdshendelser -- opprett, oppdater, godkjenn, oversett, planlegg, publiser -- og FlowMotion kjører arbeidsflyten automatisk. Se for deg dette: en redaktør publiserer et blogginnlegg, og FlowMotion utløser automatisk AI-oversettelse til 10 språk, varsler markedsføringsteamet via Slack og planlegger et Twitter/X-innlegg.
Det er et Enterprise/Elite-tillegg, så mindre team får ikke tilgang. Men for organisasjoner som administrerer innhold på tvers av flere markeder og kanaler er dette en betydelig tidsbesparelse.
Blueprints: Veiledet prosjektoppsett
Blueprints løser et reelt smertepunkt: det innledende oppsettet av et Storyblok-prosjekt. En undersøkelse fra 2024 fant at 24 % av seniorutviklere sier det innledende CMS-prosjektoppsettet tar dager, ikke timer.
Storyblok tilbyr to Blueprint-nivåer:
- Core Blueprint: Minimalt oppsett -- kobler rammeverket ditt (Next.js, Nuxt eller Astro), oppretter et space og distribuerer en grunnleggende starter. Bra for utviklere som vil ha en ren start.
- Business Blueprint: Produksjonsklar oppsett med forhåndsbygde komponenter, en konfigurert innholdsmodell og distribusjon til Vercel eller Netlify. Nærmere en «lansert på 30 minutter»-opplevelse.
Du velger rammeverket, velger Core eller Business, og Storyblok oppretter et koblet GitHub-repo med en distribusjonspipeline. Det sparer faktisk timer med standardkodeoppsett sammenlignet med å starte fra bunnen.
AI-funksjoner: Translate, Ideation Room og mer
Storybloks AI-funksjoner bruker en ta-med-din-egen-leverandør-tilnærming. Du kobler til din OpenAI- eller Google Gemini API-nøkkel, og Storyblok bruker den til:
- AI Translate: Oversett innhold til 34+ språk direkte i editoren. Ikke en erstatning for profesjonell oversettelse av kritisk innhold, men utmerket for utkast og internt innhold.
- Ideation Room: Samarbeidende AI-brainstorming for innholdsideer. Redaktørene beskriver hva de trenger, og AI-en genererer disposisjoner, overskrifter og utkast.
- AI Alt Text: Automatisk generering av alt-tekst for bilder.
- AI SEO: Meta-tittel- og beskrivelseforslag basert på innholdet ditt.
Ta-med-din-egen-nøkkel-modellen betyr at du kontrollerer kostnadene og unngår leverandørlåsing på AI-priser. Storyblok har også en «Concept Room»-funksjon under utvikling som tar sikte på å kombinere ideutvikling med visuell innholdsplanlegging.
Internasjonalisering med Storyblok
Storyblok håndterer i18n gjennom oversettelse på feltnivå, noe som betyr at du har én Story med oversatte felt for hvert språk fremfor å duplisere hele dokumentet per språk. Dette er fundamentalt forskjellig fra Contentful og Sanity, som bruker oversettelse på dokumentnivå, og det betyr noe i stor skala.
Hvorfor vinner oversettelse på feltnivå? Tenk på et markedsføringsnettsted på 10 språk. Med i18n på dokumentnivå (Contentful, Sanity) ville du hatt 10 separate dokumenter for hver side. Endre layouten? Oppdater 10 dokumenter. Med Storybloks tilnærming på feltnivå har du én Story. Strukturen forblir den samme -- bare tekstfeltene har språkvarianter. Endre layouten én gang, og alle 10 språk oppdateres.
AI Translate gjør dette enda raskere. Redaktørene skriver innhold på sitt primærspråk, klikker «Oversett», og AI-en fyller inn de andre språkene ved hjelp av den tilkoblede OpenAI- eller Gemini-leverandøren. Det støtter 34+ språk.
Slik henter du oversatt innhold:
// Henter en story på tysk
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 inneholder nå tyske oversettelser
// Uoversatte felt faller tilbake til standardspråketlanguage-parameteren gjør alt arbeidet. Uoversatte felt faller automatisk tilbake til standardspråket, så du får aldri en ødelagt side på grunn av ufullstendige oversettelser.
Storyblok vs alternativene
Etter å ha testet alle fem CMS-ene for egne prosjekter er her hvordan de sammenligner seg på funksjonene som faktisk betyr noe for prosjektbeslutninger:
| Funksjon | Storyblok | Sanity | Contentful | Strapi | Payload |
|---|---|---|---|---|---|
| Visuell editor | Beste WYSIWYG | Tilpassbart Studio | Skjemabasert | Adminpanel | Adminpanel |
| Åpen kildekode | Nei (bare SaaS) | Delvis (Studio) | Nei | Ja (v5) | Ja (v3) |
| Selvhosting | Nei | Nei | Nei | Ja | Ja |
| i18n-tilnærming | Feltnivå | Dokumentnivå | Dokumentnivå | Plugin-basert | Innebygd |
| Innholdsmodellering | Bloks (dashbord-UI) | Schema-as-code (TS) | Innholdstyper (UI) | Content-Type Builder | Samlingsoppsett (kode) |
| API | REST + GraphQL | GROQ + GraphQL | GraphQL + REST | REST + GraphQL | Lokal + REST + GraphQL |
| Gratistier | Ja (begrenset) | Ja (sjenerøs) | Ja (begrenset) | Ja (selvhost) | Ja (selvhost) |
| Ideell for | Markedsføring + dev-team | Utviklertunge team | Enterprise-innholdsops | Budsjettvennlig | Next.js-native apper |
Velg Storyblok hvis prosjektet ditt involverer både utviklere og ikke-tekniske innholdsredaktører som trenger å se endringer visuelt. Den visuelle editoren er uovertruffen, og i18n på feltnivå er best i klassen for flersprålkige nettsteder.
Velg Sanity hvis teamet ditt er utviklertungt og du vil ha maksimal skjemafleksibilitet. Sanitys schema-as-code-tilnærming og GROQ-spørringsspråk gir deg mer kontroll, men redaktørene får et skjemabasert grensesnitt, ikke en visuell forhåndsvisning. Les vår Sanity-guide for hele bildet.
Velg Strapi eller Payload hvis du trenger selvhosting eller åpen kildekode-kontroll. Verken Storyblok, Sanity eller Contentful lar deg kjøre CMS-et på egne servere. Strapi og Payload gjør det. Sjekk vår Strapi-guide eller vår Payload-guide for detaljer.
Velg Contentful hvis du er i et bedriftsmiljø som verdsetter modenheten i økosystemet, omfattende markedsplassintegrasjoner og etablert utviklerverktøy. Les vår Contentful-guide.
For hele sammenligningen med poenggiving og anbefalinger for virkelige prosjekter, se vår fullstendige headless CMS-sammenligning.
Når du IKKE bør bruke Storyblok
Hvert CMS har dealbreakere for visse prosjekter. Her er Storybloks:
Du trenger selvhosting. Storyblok er bare SaaS -- det finnes ingen on-premises-alternativ, ingen Docker-bilde, ingen selvadministrert distribusjon. Hvis organisasjonen din krever datasuverenitet eller on-prem-hosting, se på Payload for selvhostede prosjekter eller Strapi i stedet.
Du vil ha schema-as-code. Storyblok-komponentskjemaer defineres i dashbord-UI-en, ikke i kodebasen din. Du kan eksportere og importere dem via Management API, men de lever ikke i Git-repoen din som kilde til sannhet. Hvis versjonstyrte skjemaer er viktig for teamet ditt, tilbyr Sanity og Payload begge kode-først-innholdsmodellering.
Du er budsjettklemme i stor skala. Storybloks prising fungerer godt for små til mellomstore team. Men driver du 15+ spaces på tvers av flere merker med dusinvis av redaktører, akkumulerer kostnadene. Selvhostet Strapi eller Payload eliminerer CMS-lisensieringskostnader helt.
Teamet ditt består utelukkende av utviklere. Den visuelle editoren er Storybloks premiumfunksjon. Hvis ingen på teamet ditt trenger en visuell forhåndsvisning -- hvis alle er komfortable med å redigere JSON eller bruke et skjemabasert grensesnitt -- betaler du for en funksjon du ikke bruker.
Du trenger direkte databasetilgang. Storyblok abstraherer lagringslaget fullstendig. Det er ingen Postgres-tilkobling, ingen SQL-spørringer, ingen direkte datatilgang. Krever prosjektet ditt egendefinerte databasespørringer eller sammenslåinger med andre datakilder på databasenivå, gir Payload (bygget på MongoDB/Postgres) deg det.
Basert på vår erfaring med å bygge på tvers av flere CMS-er skinner Storyblok når utviklere og innholdsredaktører samarbeider på samme prosjekt. Er teamet ditt utelukkende utviklere, er det ikke verdt å betale for den visuelle editor-premien.
Kom i gang med Storyblok
Den raskeste veien fra null til et fungerende Storyblok-prosjekt tar omtrent 30 minutter med Blueprints, eller en time uten. Her er rekkefølgen:
Steg 1: Registrer deg. Opprett en gratis konto på storyblok.com. Starter-planen gir deg ett space med 25K API-kall per måned -- nok for utvikling og prototyping.
Steg 2: Velg en Blueprint eller start blankt. Vil du ha et forhåndskonfigurert prosjekt, velg en Blueprint (Core for minimalt, Business for produksjonsklar). Foretrekker du å bygge fra bunnen av, oppretter du et tomt space.
Steg 3: Koble til frontenden din. Storyblok har offisielle SDK-er og startere for Next.js, Nuxt, Astro, SvelteKit, Remix, Angular og Gatsby. For et Next.js App Router-prosjekt:
npx create-next-app@latest my-storyblok-site
cd my-storyblok-site
npm install @storyblok/reactSteg 4: Sett opp forhåndsvisnings-URL-en for den visuelle editoren. I Storyblok-spaceinnstillingene setter du forhåndsvisnings-URL-en til din lokale dev-server (f.eks. https://localhost:3000/). Den visuelle editoren trenger HTTPS -- bruk next dev --experimental-https eller et verktøy som mkcert.
Steg 5: Definer din første Blok og opprett en Story. Gå til «Components» i Storyblok-dashbordet, opprett en «Page»-innholdstype med et brødtekstfelt, og opprett deretter en nestbar «Hero»-Blok. Opprett din første Story ved hjelp av «Page»-innholdstypen. Dra Hero-Bloken inn. Se den rendres i den visuelle editoren.
For rammeverks-spesifikke hurtigstartguider vedlikeholder Storyblok en teknologiside med oppsettsveiledninger for alle støttede rammeverk. Bestemmer du deg mellom rammeverk for frontenden, dekker vår Next.js vs Remix-sammenligning avveiningene, og vår Vercel vs Netlify-guide hjelper med beslutninger om distribusjonsplattform.
FAQ
Hva er Storyblok CMS?
Storyblok er et headless innholdsstyringssystem med innebygd visuell editor, grunnlagt i 2017 i Linz, Østerrike. Det bruker en komponentbasert arkitektur kalt Bloks for innholdsmodellering og leverer innhold via REST- og GraphQL-API-er. Storyblok brukes av selskaper som Adidas, Tesla og Oatly til nettsteder, apper og innholdsleveranse på tvers av kanaler.
Er Storyblok gratis å bruke?
Ja, Storyblok tilbyr en gratis Starter-plan med én bruker, ett space og 25 000 API-kall per måned. Betalte abonnementer starter på $99/måneden for Growth-nivået med fem brukere. Storyblok tilbyr også en 45-dagers gratis prøveperiode av Growth Plus, noe som er mer sjenerøst enn de fleste konkurrentenes prøveperioder.
Hvordan fungerer den visuelle editoren i Storyblok?
Den visuelle editoren laster frontendapplikasjonen din inn i en iframe og legger redigerbare regioner oppå hver komponent (Blok). Innholdsredaktørene klikker direkte på sideelementer for å redigere dem og ser endringer i sanntid. Det krever StoryblokBridge JavaScript-biblioteket i frontendkoden din for å koble iframen til Storyblok-redigeringsgrensesnittet.
Er Storyblok bedre enn Contentful?
Det avhenger av prioriteringene dine. Storyblok tilbyr en overlegen visuell editor og internasjonalisering på feltnivå, noe som gjør det bedre for markedsføringsteam som administrerer flerspråklig innhold. Contentful har et mer modent økosystem, et større marked med integrasjoner og dypere enterprise-adopsjon. Begge er SaaS-kun med lignende prisstrukturer.
Hvilke rammeverk støtter Storyblok?
Storyblok tilbyr offisielle SDK-er og startermaler for Next.js, Nuxt, Astro, SvelteKit, Remix, Angular og Gatsby. React SDK-en (@storyblok/react) og Vue SDK-en (@storyblok/vue) dekker de to mest populære økosystemene. Blueprints støtter for øyeblikket Next.js, Nuxt og Astro for veiledet prosjektoppsett.
Kan du selvhoste Storyblok?
Nei. Storyblok er en bare-SaaS-plattform uten selvhosting eller on-premises-alternativ. Er selvhosting et krav for prosjektet ditt -- på grunn av datasuverenitet, samsvar eller kostnadsgrunner -- vurder Strapi (åpen kildekode, Node.js-basert) eller Payload CMS (åpen kildekode, Next.js-native) som alternativer som støtter fullstendige selvhostede distribusjoner.
Hva er FlowMotion i Storyblok?
FlowMotion er Storybloks arbeidsflytautomatiseringsfunksjon lansert 31. mars 2026. Bygget på administrert n8n kobler den seg til 500+ integrasjoner og automatiserer innholdsoperasjoner som oversettelsesutløsere, interessentvarsler og publisering på tvers av plattformer. FlowMotion er tilgjengelig som et Enterprise/Elite-tillegg, ikke inkludert i Growth- eller Growth Plus-abonnementer.
Hvordan håndterer Storyblok internasjonalisering?
Storyblok bruker oversettelse på feltnivå, noe som betyr at én Story inneholder oversatte varianter av hvert felt fremfor å duplisere hele dokumentet per språk. Denne tilnærmingen skalerer bedre enn i18n på dokumentnivå (brukt av Contentful og Sanity) for nettsteder med mange språk. AI Translate støtter 34+ språk ved hjelp av din egen OpenAI- eller Gemini API-nøkkel.
Hvem bruker Storyblok?
Storybloks kundeliste inkluderer Adidas, Tesla, Oatly, Virgin Media O2, dm-drogerie markt, Spendesk og Panini. Plattformen betjener både enterprise-organisasjoner som administrerer innholdsoperasjoner på tvers av flere markeder og voksende startups som trenger en visuell editor for å gi ikke-tekniske innholdsteam mer myndighet. Storyblok har hentet inn totalt $138 millioner i finansiering gjennom Series C.
Hva er Storyblok Blueprints?
Blueprints er veiledede prosjektoppsettstemplater lansert i juli 2025 av Storyblok. Velg en Core Blueprint (minimal starter) eller Business Blueprint (produksjonsklar med forhåndsbygde komponenter). Velg rammeverket ditt -- Next.js, Nuxt eller Astro -- og Storyblok oppretter et koblet GitHub-repository med en distribusjonspipeline til Vercel eller Netlify på minutter.