guides

Storyblok CMS: Den komplette utviklerguiden [2026]

Skrevet av Mert Batur
Apr 6, 2026
16 lesing
Storyblok CMS: Den komplette utviklerguiden [2026]

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:

javascript
// 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:

javascript
// 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:

json
{
  "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:

jsx
// 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.

javascript
// 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 dine

GraphQL 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.

graphql
{
  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?

KriteriumContent Delivery (REST)GraphQLManagement
BrukstilfelleHente innhold til sidenSelektive feltspørringerInnholdsoperasjoner, migrasjoner
Lese/SkriveSkrivebeskyttetSkrivebeskyttetLese + Skrive
Hastighetsbegrensning50 forespørsler/sek (betalt)100 poeng/sek3 forespørsler/sek
Best forDe fleste prosjekterStore innholdsmodellerDevOps, CI/CD
Storybloks anbefalingJa -- standardvalgFor spesifikke behovBare 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:

AbonnementPrisBrukereAPI-kallViktige funksjoner
StarterGratis125K/mnd1 space, community support
Growth$99/mnd5100K/mndEgendefinerte roller, arbeidsflyter
Growth Plus$189/mnd10250K/mndAvanserte arbeidsflyter, oppgaver
PremiumTilpassetFleksibeltTilpassetSSO, SLA, dedikert support
EliteTilpassetUbegrensetUbegrensetFlowMotion, 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:

javascript
// 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åket

language-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:

FunksjonStoryblokSanityContentfulStrapiPayload
Visuell editorBeste WYSIWYGTilpassbart StudioSkjemabasertAdminpanelAdminpanel
Åpen kildekodeNei (bare SaaS)Delvis (Studio)NeiJa (v5)Ja (v3)
SelvhostingNeiNeiNeiJaJa
i18n-tilnærmingFeltnivåDokumentnivåDokumentnivåPlugin-basertInnebygd
InnholdsmodelleringBloks (dashbord-UI)Schema-as-code (TS)Innholdstyper (UI)Content-Type BuilderSamlingsoppsett (kode)
APIREST + GraphQLGROQ + GraphQLGraphQL + RESTREST + GraphQLLokal + REST + GraphQL
GratistierJa (begrenset)Ja (sjenerøs)Ja (begrenset)Ja (selvhost)Ja (selvhost)
Ideell forMarkedsføring + dev-teamUtviklertunge teamEnterprise-innholdsopsBudsjettvennligNext.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:

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

Steg 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.

Emneord

storyblok-guideheadless-cmsvisuell-editorstoryblokcms

Del denne artikkelen

Kom i gang

Klar til å bygge noe ekstraordinært?

La oss gjøre visjonen din til virkelighet. Teamet vårt er klart til å hjelpe deg med å lage programvare som utgjør en forskjell.