![Storyblok CMS: Ghidul complet pentru dezvoltatori [2026]](/_next/image?url=https%3A%2F%2Fmedia.techsy.io%2Ftechsy-io%2Fhero-203-1200x630.webp&w=3840&q=75)
Storyblok CMS: Ghidul complet pentru dezvoltatori [2026]
Storyblok este unul dintre puținele sisteme headless CMS în care editorii de conținut pot vedea efectiv ceea ce editează, iar această singură caracteristică schimbă întreaga dinamică dintre dezvoltatori și editori. După ce a strâns 80 de milioane USD în finanțarea Seriei C și a lansat automatizarea fluxurilor de lucru în martie 2026, merită să înțelegem ce face Storyblok bine, unde are limitări și dacă se potrivește următorului tău proiect.
Ce este Storyblok?
Storyblok este un sistem headless CMS cu un editor vizual integrat, fondat în 2017 la Linz, Austria, de Dominik Angerer (CEO) și Alexander Feiglstorfer (CTO). Utilizează o arhitectură bazată pe componente numită Bloks și livrează conținut prin API-uri REST și GraphQL. Folosit de Adidas, Tesla și Oatly, Storyblok a strâns 138 de milioane USD în finanțare până la runda sa Seria C.
Un sistem headless CMS separă conținutul de frontend; gestionezi conținutul printr-un API, iar aplicația ta React, Vue sau Astro îl consumă. Această parte este aceeași la Contentful, Sanity, Strapi și orice altă opțiune headless. Ceea ce diferențiază Storyblok este editorul vizual.
Gestionăm patru site-uri de producție pe diferite sisteme headless CMS (inclusiv Sanity, care alimentează acest blog). Iată cum se compară Storyblok din experiența practică: editorul vizual reduce genuin schimbul de informații dintre dezvoltatori și echipele de conținut. În loc ca editorii să completeze formulare și să întrebe „cum va arăta asta?”, ei văd pagina reală. Aceasta este o îmbunătățire reală a fluxului de lucru, nu doar un punct de marketing.
Arhitectura de bază se împarte în două concepte: Stories (paginile sau intrările de conținut) și Bloks (componente reutilizabile, cum ar fi secțiuni hero, grile de funcționalități sau butoane CTA). Dezvoltatorii definesc schemele pentru Blok, iar editorii le trag și plasează în Stories. Conținutul ajunge la frontend prin API-ul de livrare a conținutului.
Printre clienții notabili, pe lângă Adidas și Tesla, se numără Virgin Media O2, dm-drogerie markt, Oatly, Spendesk și Panini. Pentru o privire mai detaliată asupra modului în care Storyblok se compară cu fiecare opțiune majoră, consultă comparația noastră de sisteme headless CMS.
Cum funcționează editorul vizual Storyblok?
Editorul vizual Storyblok încarcă frontendul tău într-un iframe și suprapune regiuni editabile peste fiecare componentă. Editorii de conținut văd o previzualizare live a exact ceea vor vedea vizitatorii, cu funcționalitate de click-pentru-editare pe fiecare Blok. Acesta necesită biblioteca JavaScript StoryblokBridge configurată în aplicația ta frontend.
Aceasta este caracteristica care separă Storyblok de abordarea bazată pe formulare a Contentful, abordarea „schema-as-code” a Sanity sau panoul de administrare al Strapi. Acele sisteme CMS oferă editorilor un formular cu câmpuri. Storyblok le oferă editorilor pagina reală.
Arhitectura Iframe
Iată cum funcționează în spate: când un editor deschide un Story în tabloul de bord Storyblok, editorul vizual încarcă aplicația ta frontend într-un iframe. Storyblok injectează o proprietate _editable în datele fiecărui Blok (doar pentru conținutul draft), iar biblioteca JavaScript StoryblokBridge ascultă modificările. Când un editor dă click pe o componentă, bridge-ul comunică cu fereastra părinte Storyblok pentru a deschide editorul de câmp corect.
Rezultatul? Editorii dau click direct pe o secțiune hero pentru a edita titlul. Trag un nou Blok de testimonial sub secțiunea de prețuri. Văd modificările reflectate instantaneu în previzualizare. Fără bucla „salvează și verifică site-ul de staging”.
O capcană: editorul vizual funcționează doar cu conținut draft, nu cu cel publicat. URL-ul de previzualizare trebuie să pointeze către o versiune a aplicației tale care preia date draft. Acest aspect îi ia pe mulți prin surprindere durante configurării.
Configurarea StoryblokBridge
Iată o configurare tipică într-un proiect Next.js App Router. Va trebui să ai instalat @storyblok/react:
// 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;
}Apoi, înfășoară layout-ul cu providerul și folosește componenta StoryblokStory pentru a activa editarea live:
// 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} />;
}Componenta StoryblokStory gestionează automat conexiunea bridge, înregistrează listener-ul iframe, aplică atributele _editable Bloks-urilor tale și activează click-pentru-editare în editorul vizual. Nu trebuie să configurezi manual aceste aspecte.
Arhitectura componentelor Storyblok (Bloks și Stories)
Storyblok organizează conținutul folosind două concepte de bază: Stories (pagini sau intrări de conținut) și Bloks (componente reutilizabile, cum ar fi secțiuni hero, grile de funcționalități sau butoane CTA). Dezvoltatorii definesc schemele pentru Blok în tabloul de bord Storyblok, iar editorii compun paginile trăgând și plasând Bloks în Stories.
Gândește-te la asta ca la LEGO. Stories sunt plăcile de bază, paginile pe care le construiești. Bloks sunt cărămizile individuale: o secțiune hero, un card de testimonial, un tabel de prețuri. Tu definești ce câmpuri are fiecare tip de Blok (titlu, imagine, text CTA), iar editorii le asamblează.
Stories: Intrările tale de conținut
Fiecare pagină, articol sau intrare de conținut din Storyblok este un Story. Stories trăiesc într-o structură de foldere (similar unui sistem de fișiere), iar fiecare Story are un slug care mapează un URL. Corpul unui Story este compus din Bloks; este practic un container.
Stories pot deține și conținut care nu este o pagină. Poți avea un Story numit „site-settings” care stochează linkurile de navigare, textul din footer și URL-urile rețelelor sociale. Flexibilitatea este similară cu modul în care ai folosi documente singleton în Sanity.
Bloks: Blocuri de construcție reutilizabile
Bloks vin în două variante: nestable (imbricabile) și content type (nivel rădăcină). Bloks de tip content type definesc schema de nivel superior pentru un Story (precum „Page” sau „BlogPost”). Bloks nestable sunt componentele pe care editorii le trag în corpul unui Story: secțiuni hero, galerii de imagini, acordeoane FAQ.
Fiecare Blok are o schemă care definește câmpurile sale. Le creezi în tabloul de bord Storyblok sub „Components” (nu în cod, ceea ce reprezintă o diferență cheie față de abordarea „schema-as-code” a Sanity).
Modelarea conținutului în practică
Iată cum arată o schemă pentru un Blok Hero atunci când o definești prin API-ul de management:
{
"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
}
}Și componenta React care randează acest Blok:
// 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>
);
}Apelul storyblokEditable(blok) este ceea ce activează click-pentru-editare în editorul vizual. Fără el, componenta se randează corect, dar editorii nu pot da click pe ea pentru a edita câmpurile. Ușor de uitat, dureros de depanat.
API-urile Storyblok: REST vs GraphQL vs Management
Storyblok oferă trei API-uri: API-ul de livrare a conținutului (REST, recomandat pentru majoritatea proiectelor), un API GraphQL (read-only, util când ai nevoie de preluarea selectivă a câmpurilor) și API-ul de management (pentru operațiuni programatice de conținut, cum ar fi migrările și actualizările în bloc). Storyblok recomandă REST pentru proiectele noi.
Majoritatea ghidurilor headless CMS omit complet stratul API. Aceasta este o greșeală; API-ul pe care îl alegi afectează timpii de build, strategia de caching și marja de rată limită.
API-ul de livrare a conținutului (REST)
Acesta este API-ul principal și cel pe care îl vei folosi în 90% din cazuri. Suportă filtrare, sortare, paginare și rezolvarea relațiilor între Stories. Limitele de rată sunt generoase: 50 de cereri/secundă pe planurile plătite.
// Fetching a story via the 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); // Your Bloks dataAPI-ul GraphQL
API-ul GraphQL este read-only și are limite de rată diferite (100 de puncte de complexitate pe secundă). Este util când dorești tipare puternice și nu ai nevoie de întregul payload al Story-ului; poți solicita exact câmpurile de care ai nevoie.
{
PageItem(id: "home") {
name
slug
content {
_uid
component
headline
subheadline
}
}
}API-ul de management
API-ul de management gestionează operațiunile CRUD în spațiul tău Storyblok: crearea de Stories, actualizarea schemelor de componente, gestionarea asset-urilor și rularea migrărilor. Îl vei folosi pentru pipeline-urile CI/CD, actualizări masive de conținut sau construirea de instrumente personalizate în jurul Storyblok.
Ce API ar trebui să folosești?
| Criteriu | Livrare conținut (REST) | GraphQL | Management |
|---|---|---|---|
| Caz de utilizare | Preluarea conținutului pentru site | Interogări selective de câmpuri | Operațiuni de conținut, migrări |
| Citire/Scriere | Doar citire | Doar citire | Citire + Scriere |
| Limite de rată | 50 req/sec (plătit) | 100 puncte/sec | 3 req/sec |
| Cel mai bun pentru | Majoritatea proiectelor | Modele de conținut mari | DevOps, CI/CD |
| Recomandare Storyblok | Da, alegerea implicită | Pentru nevoi specifice | Doar automatizare |
Pentru majoritatea proiectelor Next.js, Nuxt sau Astro, API-ul REST de livrare a conținutului cu storyblok-js-client sau SDK-ul oficial gestionează tot ce ai nevoie. Apelează la GraphQL dacă modelul tău de conținut este complex și preiei structuri imbricate adânci cu multe câmpuri de care nu ai nevoie.
Prețurile Storyblok în 2026
Prețurile Storyblok încep cu un plan Starter gratuit. Planurile plătite încep de la 99 USD/lună pentru Growth (5 utilizatori). Nivelurile superioare includ Growth Plus, Premium (mid-market) și Elite (nelimitat). Noile prețuri au intrat în vigoare pe 7 aprilie 2026, cu o perioadă de grație de 60 de zile pentru abonații lunari existenți.
Iată detalierea nivelurilor actuale de preț:
| Plan | Preț | Utilizatori | Apeluri API | Caracteristici cheie |
|---|---|---|---|---|
| Starter | Gratuit | 1 | 25K/lună | 1 spațiu, suport comunitate |
| Growth | 99 USD/lună | 5 | 100K/lună | Roluri personalizate, fluxuri de lucru |
| Growth Plus | 189 USD/lună | 10 | 250K/lună | Fluxuri de lucru avansate, sarcini |
| Premium | Personalizat | Flexibil | Personalizat | SSO, SLA, suport dedicat |
| Elite | Personalizat | Nelimitat | Nelimitat | FlowMotion, SLA premium |
Storyblok oferă, de asemenea, o perioadă de probă gratuită de 45 de zile pentru Growth Plus, ceea ce este neobișnuit de generos comparativ cu perioada de probă de 30 de zile a Contentful sau nivelul gratuit bazat pe utilizare al Sanity.
Perspectiva onestă asupra prețurilor: Storyblok poate deveni scump la scară mare. Thread-urile de pe Reddit de la agenții menționă constant escaladarea prețurilor pe măsură ce proiectele cresc: mai mulți utilizatori, mai multe apeluri API, mai multe spații pentru configurări multi-site. Dacă ai un buget limitat, opțiunea self-hosted gratuită a Strapi sau modelul open-source al Payload îți oferă mai multă flexibilitate, cu costul gestionării propriei infrastructuri.
Pentru proiecte secundare și prototipuri, planul gratuit Starter funcționează. Pentru proiecte de producție cu 2-5 editori de conținut, planul Growth la 99 USD/lună este competitiv. Dincolo de asta, obține o ofertă personalizată de la echipa de vânzări Storyblok; prețurile publicate spun doar o parte a poveștii.
Ce este nou în 2026: FlowMotion, Blueprints și AI
În 2026, Storyblok a lansat FlowMotion (31 martie), un strat de automatizare a fluxurilor de lucru construit pe n8n cu peste 500 de integrări. Blueprints, lansate în iulie 2025, oferă configurare ghidată a proiectului cu startere specifice framework-ului. Funcțiile AI includ AI Translate (34+ limbi), Ideation Room pentru brainstorming de conținut și instrumente AI SEO.
Niciunul dintre celelalte ghiduri Storyblok de acolo nu acoperă încă aceste funcții. Iată ce se livrează efectiv.
FlowMotion: Automatizarea fluxurilor de lucru
FlowMotion este răspunsul Storyblok la blocajul operațiunilor de conținut. Conform anunțului lor de lansare, 75% dintre marketeri petrec 6+ ore pe săptămână pe sarcini de coordonare a conținutului, cum ar fi notificarea părților interesate, declanșarea traducerilor și programarea postărilor pe rețelele sociale.
FlowMotion este construit pe n8n gestionat (instrumentul open-source de automatizare a fluxurilor de lucru) și se conectează la peste 500 de integrări. Setezi declanșatoare pe evenimente de conținut – creare, actualizare, aprobare, traducere, programare, publicare – și FlowMotion rulează automat fluxul de lucru. Imaginează-ți asta: un editor publică un articol de blog, iar FlowMotion declanșează automat traducerea AI în 10 limbi, notifică echipa de social media prin Slack și programează o postare pe Twitter/X.
Este un add-on Enterprise/Elite, deci echipele mai mici nu vor avea acces. Dar pentru organizațiile care gestionează conținut pe multiple piețe și canale, acesta este un economisitor semnificativ de timp.
Blueprints: Configurare ghidată a proiectului
Blueprints rezolvă un punct dureros real: configurarea inițială a unui proiect Storyblok. Un sondaj din 2024 a constatat că 24% dintre dezvoltatorii seniori spun că configurarea inițială a proiectului CMS durează zile, nu ore.
Storyblok oferă două niveluri de Blueprint:
- Core Blueprint: Configurare minimă, conectează framework-ul tău (Next.js, Nuxt sau Astro), creează un spațiu și implementează un starter de bază. Bun pentru dezvoltatorii care vor o foaie curată.
- Business Blueprint: Configurare gata de producție cu componente pre-construite, un model de conținut configurat și implementare pe Vercel sau Netlify. Mai aproape de o experiență de „lansare în 30 de minute”.
Alegi framework-ul, selectezi Core sau Business, iar Storyblok creează un repo GitHub conectat cu un pipeline de implementare. Economisește genuin ore de configurare boilerplate comparativ cu începerea de la zero.
Funcții AI: Translate, Ideation Room și altele
Funcțiile AI ale Storyblok adoptă o abordare „bring-your-own-provider”. Conectezi cheia ta API OpenAI sau Google Gemini, iar Storyblok o folosește pentru:
- AI Translate: Traduce conținutul în 34+ limbi direct în editor. Nu este un înlocuitor pentru traducerea profesională a conținutului critic, dar excelent pentru drafturi și conținut intern.
- Ideation Room: Brainstorming colaborativ AI pentru idei de conținut. Editorii descriu ce au nevoie, iar AI generează schelete, titluri și drafturi.
- AI Alt Text: Generare automată de text alternativ pentru imagini.
- AI SEO: Sugestii de meta titlu și descriere bazate pe conținutul tău.
Modelul „bring-your-own-key” înseamnă că controlezi costurile și eviți vendor lock-in-ul la prețurile AI. Storyblok are, de asemenea, o funcție „Concept Room” în dezvoltare, care își propune să combine ideea cu planificarea vizuală a conținutului.
Internaționalizarea cu Storyblok
Storyblok gestionează i18n prin traducere la nivel de câmp, ceea ce înseamnă că ai un singur Story cu câmpuri traduse pentru fiecare limbă, în loc să duplici întregul document per limbă. Acest lucru este fundamental diferit de Contentful și Sanity, care folosesc traducerea la nivel de document, și contează la scară mare.
De ce câștigă traducerea la nivel de câmp? Gândește-te la un site de marketing în 10 limbi. Cu i18n la nivel de document (Contentful, Sanity), ai avea 10 documente separate pentru fiecare pagină. Schimbi layout-ul? Actualizezi 10 documente. Cu abordarea la nivel de câmp a Storyblok, ai un singur Story. Structura rămâne aceeași, doar câmpurile de text au variante de limbă. Schimbi layout-ul o dată, toate cele 10 limbi se actualizează.
AI Translate face acest proces și mai rapid. Editorii scriu conținutul în limba lor principală, dau click pe „Translate”, iar AI completează celelalte limbi folosind providerul lor OpenAI sau Gemini conectat. Suportă 34+ limbi.
Iată cum preiei conținut tradus:
// Fetching a story in German
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 now contains German translations
// Untranslated fields fall back to the default languageParametrul language face toată munca. Câmpurile netraduse revin automat la limba implicită, astfel încât nu vei avea niciodată o pagină ruptă din cauza traducerilor incomplete.
Storyblok vs Alternativele
După ce am testat toate cele cinci sisteme CMS pentru propriile noastre proiecte, iată cum se compară pe funcțiile care contează cu adevărat pentru deciziile de proiect:
| Funcție | Storyblok | Sanity | Contentful | Strapi | Payload |
|---|---|---|---|---|---|
| Editor vizual | WYSIWYG best-in-class | Studio personalizabil | Bazat pe formulare | Panou admin | Panou admin |
| Open source | Nu (doar SaaS) | Parțial (Studio) | Nu | Da (v5) | Da (v3) |
| Self-hosting | Nu | Nu | Nu | Da | Da |
| Abordare i18n | La nivel de câmp | La nivel de document | La nivel de document | Bazat pe plugin | Integrat |
| Modelare conținut | Bloks (UI dashboard) | Schema-as-code (TS) | Tipuri de conținut (UI) | Content-Type Builder | Configurații colecție (cod) |
| API | REST + GraphQL | GROQ + GraphQL | GraphQL + REST | REST + GraphQL | Local + REST + GraphQL |
| Nivel gratuit | Da (limitat) | Da (generos) | Da (limitat) | Da (self-host) | Da (self-host) |
| Ideal pentru | Echipe marketing + dev | Echipe heavy-dev | Operațiuni enterprise | Buget limitat | Aplicații native Next.js |
Alege Storyblok dacă proiectul tău implică atât dezvoltatori, cât și editori de conținut non-tehnici care trebuie să vadă modificările vizual. Editorul vizual este imbatabil, iar i18n la nivel de câmp este cel mai bun din clasă pentru site-uri multilingve.
Alege Sanity dacă echipa ta este dominată de dezvoltatori și dorești flexibilitate maximă a schemei. Abordarea schema-as-code a Sanity și limbajul de interogare GROQ îți oferă mai mult control, dar editorii primesc o UI bazată pe formulare, nu o previzualizare vizuală. Citește ghidul nostru Sanity pentru imaginea completă.
Alege Strapi sau Payload dacă ai nevoie de self-hosting sau control open-source. Nici Storyblok, nici Sanity, nici Contentful nu îți permit să rulezi CMS-ul pe propriile servere. Strapi și Payload o fac. Verifică ghidul nostru Strapi sau ghidul nostru Payload pentru detalii.
Alege Contentful dacă ești într-un mediu enterprise care valorizează maturitatea ecosistemului, integrările extinse din marketplace și instrumentele de dezvoltator consacrate. Citește ghidul nostru Contentful.
Pentru comparația completă cu scoruri și recomandări de proiecte din lumea reală, vezi comparația noastră completă de sisteme headless CMS.
Când să NU folosești Storyblok
Fiecare CMS are puncte critice pentru anumite proiecte. Iată-le pe ale Storyblok:
Ai nevoie de self-hosting. Storyblok este doar SaaS; nu există opțiune on-premises, nicio imagine Docker, nicio implementare auto-gestionată. Dacă organizația ta necesită suveranitatea datelor sau găzduire on-prem, uită-te la Payload pentru proiecte self-hosted sau la Strapi.
Dorești schema-as-code. Schemele componentelor Storyblok sunt definite în UI-ul dashboard-ului, nu în baza ta de cod. Le poți exporta și importa prin API-ul de management, dar nu trăiesc în repo-ul tău Git ca sursă a adevărului. Dacă schemele versionate contează pentru echipa ta, Sanity și Payload oferă ambele modelarea conținutului code-first.
Ai un buget limitat la scară mare. Prețurile Storyblok funcționează bine pentru echipe mici și medii. Dar dacă rulezi 15+ spații across multiple branduri cu zeci de editori, costurile se acumulează. Strapi sau Payload self-hosted elimină complet costurile de licențiere CMS.
Echipa ta este formată doar din dezvoltatori. Editorul vizual este funcția premium a Storyblok. Dacă nimeni din echipa ta nu are nevoie de o previzualizare vizuală, dacă toți sunt confortabili editând JSON sau folosind o UI bazată pe formulare, plătești pentru o funcție pe care nu o vei folosi.
Ai nevoie de acces direct la baza de date. Storyblok abstractizează complet stratul său de stocare. Nu există conexiune Postgres, nicio interogare SQL, niciun acces direct la date. Dacă proiectul tău necesită interogări personalizate la baza de date sau join-uri cu alte surse de date la nivel de bază de date, Payload (construit pe MongoDB/Postgres) îți oferă asta.
În experiența noastră de construire across multiple CMS-uri, Storyblok strălucește atunci când dezvoltatorii și editorii de conținut colaborează la același proiect. Dacă echipa ta este formată doar din dezvoltatori, premium-ul editorului vizual nu merită plătit.
Începerea cu Storyblok
Cea mai rapidă cale de la zero la un proiect Storyblok funcțional durează aproximativ 30 de minute cu Blueprints, sau o oră fără ele. Iată secvența:
Pasul 1: Înregistrare. Creează un cont gratuit la storyblok.com. Planul Starter îți oferă un spațiu cu 25K apeluri API/lună, suficient pentru dezvoltare și prototipare.
Pasul 2: Alege un Blueprint sau începe de la zero. Dacă dorești un proiect pre-configurat, alege un Blueprint (Core pentru minimal, Business pentru gata de producție). Dacă preferi construirea de la zero, creează un spațiu gol.
Pasul 3: Conectează frontendul. Storyblok are SDK-uri oficiale și startere pentru Next.js, Nuxt, Astro, SvelteKit, Remix, Angular și Gatsby. Pentru un proiect Next.js App Router:
npx create-next-app@latest my-storyblok-site
cd my-storyblok-site
npm install @storyblok/reactPasul 4: Configurează URL-ul de previzualizare al editorului vizual. În setările spațiului tău Storyblok, setează URL-ul de previzualizare la serverul tău local de dev (de ex., https://localhost:3000/). Editorul vizual necesită HTTPS; folosește next dev --experimental-https sau un instrument precum mkcert.
Pasul 5: Definește primul tău Blok și creează un Story. Mergi la „Components” în dashboard-ul Storyblok, creează un tip de conținut „Page” cu un câmp body, apoi creează un Blok nestable „Hero”. Creează primul tău Story folosind tipul de conținut „Page”. Trage Blok-ul Hero în interior. Vezi-l randat în editorul vizual.
Pentru ghiduri quickstart specifice framework-ului, Storyblok menține o pagină de tehnologii cu tutoriale de configurare pentru fiecare framework suportat. Dacă decizi între framework-uri pentru frontendul tău, comparația noastră Next.js vs Remix acoperă compromisurile, iar ghidul nostru Vercel vs Netlify te ajută cu deciziile platformei de implementare.
Întrebări frecvente (FAQ)
Ce este Storyblok CMS?
Storyblok este un sistem de management al conținutului headless cu un editor vizual integrat, fondat în 2017 la Linz, Austria. Utilizează o arhitectură bazată pe componente numită Bloks pentru modelarea conținutului și livrează conținut prin API-uri REST și GraphQL. Storyblok este folosit de companii precum Adidas, Tesla și Oatly pentru site-uri web, aplicații și livrarea conținutului pe multiple canale.
Este Storyblok gratuit de utilizat?
Da, Storyblok oferă un plan Starter gratuit cu un utilizator, un spațiu și 25.000 de apeluri API pe lună. Planurile plătite încep de la 99 USD/lună pentru nivelul Growth cu cinci utilizatori. Storyblok oferă, de asemenea, o perioadă de probă gratuită de 45 de zile pentru Growth Plus, care este mai generoasă decât perioadele de probă ale majorității competitorilor.
Cum funcționează editorul vizual Storyblok?
Editorul vizual Storyblok încarcă aplicația ta frontend într-un iframe și suprapune regiuni editabile peste fiecare componentă (Blok). Editorii de conținut dau click direct pe elementele paginii pentru a le edita și văd modificările în timp real. Necesită biblioteca JavaScript StoryblokBridge în codul tău frontend pentru a conecta iframe-ul la interfața de editare Storyblok.
Este Storyblok mai bun decât Contentful?
Depinde de prioritățile tale. Storyblok oferă un editor vizual superior și internaționalizare la nivel de câmp, fiind mai bun pentru echipele de marketing care gestionează conținut multilingv. Contentful are un ecosistem mai matur, o piață mai mare de integrări și o adopție enterprise mai profundă. Ambele sunt doar SaaS cu structuri de preț similare.
Ce framework-uri suportă Storyblok?
Storyblok oferă SDK-uri oficiale și șabloane starter pentru Next.js, Nuxt, Astro, SvelteKit, Remix, Angular și Gatsby. SDK-ul React (@storyblok/react) și SDK-ul Vue (@storyblok/vue) acoperă cele două ecosisteme cele mai populare. Blueprints suportă actualmente Next.js, Nuxt și Astro pentru configurarea ghidată a proiectului.
Poți găzdui singur (self-host) Storyblok?
Nu. Storyblok este o platformă doar SaaS, fără opțiune de self-hosting sau on-premises. Dacă self-hosting-ul este o cerință pentru proiectul tău, din motive de suveranitate a datelor, conformitate sau costuri, ia în considerare Strapi (open-source, bazat pe Node.js) sau Payload CMS (open-source, nativ Next.js) ca alternative care suportă implementări complet self-hosted.
Ce este FlowMotion în Storyblok?
FlowMotion este funcția de automatizare a fluxurilor de lucru a Storyblok, lansată pe 31 martie 2026. Construit pe n8n gestionat, se conectează la peste 500 de integrări și automatizează operațiuni de conținut precum declanșatoarele de traducere, notificările părților interesate și publicarea cross-platform. FlowMotion este disponibil ca add-on Enterprise/Elite, nefiind inclus în planurile Growth sau Growth Plus.
Cum gestionează Storyblok internaționalizarea?
Storyblok folosește traducerea la nivel de câmp, ceea ce înseamnă că un Story conține variante traduse ale fiecărui câmp, în loc să duplice întregul document per limbă. Această abordare scalează mai bine decât i18n la nivel de document (folosit de Contentful și Sanity) pentru site-urile cu multe limbi. AI Translate suportă 34+ limbi folosind propria ta cheie API OpenAI sau Gemini.
Cine folosește Storyblok?
Lista de clienți Storyblok include Adidas, Tesla, Oatly, Virgin Media O2, dm-drogerie markt, Spendesk și Panini. Platforma servește atât organizații enterprise care gestionează operațiuni de conținut pe multiple piețe, cât și startup-uri în creștere care au nevoie de un editor vizual pentru a împuternici echipele de conținut non-tehnice. Storyblok a strâns 138 de milioane USD în finanțare totală până la Seria C.
Ce sunt Storyblok Blueprints?
Blueprints sunt șabloane de configurare ghidată a proiectului, lansate în iulie 2025 de Storyblok. Alege un Core Blueprint (starter minimal) sau Business Blueprint (gata de producție cu componente pre-construite). Selectează framework-ul tău, Next.js, Nuxt sau Astro, iar Storyblok creează un repository GitHub conectat cu un pipeline de implementare pe Vercel sau Netlify în câteva minute.