Storyblok CMS: Kompletní průvodce pro vývojáře [2026]

Storyblok CMS: Kompletní průvodce pro vývojáře [2026]

Storyblok je jedním z mála headless CMS, kde vaši redaktoři obsahu skutečně vidí, co upravují, a tato jediná vlastnost mění celou dynamiku mezi vývojáři a redaktory. Po získání 80 milionů dolarů ve financování série C a spuštění automatizace pracovních postupů v březnu 2026 stojí za to pochopit, co Storyblok skutečně dělá dobře, kde má slabiny a zda se hodí pro váš další projekt.

Co je Storyblok?

Storyblok je headless CMS s vestavěným vizuálním editorem, založený v roce 2017 v Linci v Rakousku Dominikem Angererem (CEO) a Alexanderem Feiglstorferem (CTO). Využívá architekturu založenou na komponentách nazvanou Bloks a doručuje obsah prostřednictvím REST a GraphQL API. Storyblok, který používají společnosti jako Adidas, Tesla a Oatly, získal prostřednictvím kola série C celkem 138 milionů dolarů.

Headless CMS odděluje váš obsah od frontendu; obsah spravujete prostřednictvím API a vaše aplikace v Reactu, Vue nebo Astro jej spotřebovává. Tato část je stejná u Contentful, Sanity, Strapi a každé jiné headless možnosti. To, co činí Storyblok odlišným, je vizuální editor.

Provozujeme čtyři produkční webové stránky na různých headless CMS (včetně Sanity, které pohání tento blog). Zde je porovnání Storybloku založené na praktických zkušenostech: vizuální editor skutečně snižuje množství zpětné vazby mezi vývojáři a týmy pro obsah. Místo toho, aby redaktoři vyplňovali formuláře a ptali se „jak to bude vypadat?“, vidí skutečnou stránku. Jde o skutečné zlepšení pracovního postupu, nikoliv pouze o marketingový bod.

Základní architektura se skládá ze dvou konceptů: Stories (vaše stránky nebo záznamy obsahu) a Bloks (znovu použitelné komponenty, jako jsou hero sekce, mřížky funkcí nebo výzvy k akci - CTA). Vývojáři definují schémata Bloků, redaktoři je přetahují do Stories. Obsah se dostane na váš frontend prostřednictvím Content Delivery API.

Mezi významné zákazníky kromě Adidas a Tesla patří Virgin Media O2, dm-drogerie markt, Oatly, Spendesk a Panini. Pro hlubší pohled na to, jak si Storyblok stojí proti všem hlavním možnostem, se podívejte na naše srovnání headless CMS.

Jak funguje vizuální editor Storybloku?

Vizuální editor Storybloku načte váš frontend v iframe a překryje každou komponentu upravitelnými oblastmi. Redaktoři obsahu vidí živý náhled přesně toho, co uvidí návštěvníci, s funkcí kliknutí pro úpravu na každém Bloku. Vyžaduje nastavení knihovny JavaScriptu StoryblokBridge ve vaší frontendové aplikaci.

Tato funkce odlišuje Storyblok od přístupu založeného na formulářích u Contentful, přístupu schema-as-code u Sanity nebo administračního panelu Strapi. Tato CMS poskytují editorům formulář s poli. Storyblok poskytuje editorům skutečnou stránku.

Architektura Iframe

Zde je popis toho, jak to funguje pod kapotou: když editor otevře Story v dashboardu Storybloku, vizuální editor načte vaši frontendovou aplikaci uvnitř iframe. Storyblok vloží vlastnost _editable do dat každého Bloku (pouze u konceptů) a knihovna JavaScriptu StoryblokBridge naslouchá změnám. Když editor klikne na komponentu, bridge komunikuje s nadřazeným oknem Storybloku a otevře správný editor pole.

Výsledek? Redaktoři kliknou přímo na hero sekci pro úpravu nadpisu. Přetáhnou nový Blok s testimonial pod sekci s cenami. Změny vidí okamžitě v náhledu. Žádné cykly „uložit a zkontrolovat staging site“.

Jedno úskalí: vizuální editor funguje pouze s koncepty obsahu, nikoliv s publikovaným. Vaše URL pro náhled musí směřovat na verzi vaší aplikace, která načítá data konceptů. Během nastavování to často lidi zaskočí.

Nastavení StoryblokBridge

Zde je typické nastavení v projektu Next.js App Router. Budete potřebovat nainstalovaný balíček @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;
}

Poté obalte layout providerem a použijte komponentu StoryblokStory pro povolení živého editování:

// 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} />;
}

Komponenta StoryblokStory automaticky zpracovává připojení bridge, registruje posluchače iframe, aplikuje atributy _editable na vaše Bloky a umožňuje kliknutí pro úpravu ve vizuálním editoru. Nemusíte to zapojovat ručně.

Architektura komponent Storybloku (Bloks a Stories)

Storyblok organizuje obsah pomocí dvou základních konceptů: Stories (stránky nebo záznamy obsahu) a Bloks (znovu použitelné komponenty, jako jsou hero sekce, mřížky funkcí nebo CTA). Vývojáři definují schémata Bloků v dashboardu Storybloku a redaktoři skládají stránky přetahováním Bloků do Stories.

Představte si to jako LEGO. Stories jsou základní desky, stránky, které stavíte. Bloks jsou jednotlivé kostičky – hero sekce, karta s recenzí, cenová tabulka. Definujete, jaká pole má každý typ Bloku (nadpis, obrázek, text CTA), a redaktoři je spojují dohromady.

Stories: Vaše záznamy obsahu

Každá stránka, článek nebo záznam obsahu ve Storybloku je Story. Stories existují ve struktuře složek (podobně jako souborový systém) a každá Story má slug, který se mapuje na URL. Tělo Story je složeno z Bloků, je to v podstatě kontejner.

Stories mohou také obsahovat obsah, který není stránkou. Můžete mít Story nazvanou „site-settings“, která ukládá vaše navigační odkazy, text patičky a URL sociálních médií. Flexibilita je podobná tomu, jak byste používali singleton dokumenty v Sanity.

Bloks: Znovu použitelné stavební bloky

Bloks přicházejí ve dvou variantách: vnořitelné (nestable) a typ obsahu (root-level). Bloks typu obsahu definují schéma nejvyšší úrovně pro Story (například „Page“ nebo „BlogPost“). Vnořitelné Bloks jsou komponenty, které redaktoři přetahují do těla Story – hero sekce, galerie obrázků, FAQ akordeony.

Každý Blok má schéma, které definuje jeho pole. Vytváříte je v dashboardu Storybloku v sekci „Components“ (nikoliv v kódu, což je klíčový rozdíl oproti přístupu schema-as-code u Sanity).

Modelování obsahu v praxi

Zde vypadá schéma Hero Bloku, když jej definujete prostřednictvím 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
  }
}

A React komponenta, která tento Blok vykresluje:

// 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>
  );
}

Volání storyblokEditable(blok) je to, co umožňuje kliknutí pro úpravu ve vizuálním editoru. Bez něj se komponenta vykreslí správně, ale redaktoři na ni nemohou kliknout pro úpravu polí. Snadno se zapomene, těžko se ladí.

API Storybloku: REST vs GraphQL vs Management

Storyblok nabízí tři API: Content Delivery API (REST, doporučeno pro většinu projektů), GraphQL API (pouze pro čtení, užitečné, když potřebujete selektivní načítání polí) a Management API (pro programové operace s obsahem, jako jsou migrace a hromadné aktualizace). Storyblok doporučuje REST pro nové projekty.

Většina průvodců headless CMS zcela ignoruje vrstvu API. To je chyba, zvolené API ovlivňuje doby sestavování, strategii cachování a rezervu pro rate limity.

Content Delivery API (REST)

Toto je primární API, které budete používat v 90 % případů. Podporuje filtrování, řazení, stránkování a řešení vztahů mezi Stories. Rate limity jsou štědré: 50 požadavků za sekundu na placených plánech.

// 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 data

GraphQL API

GraphQL API je pouze pro čtení a má odlišné rate limity (100 bodů složitosti za sekundu). Je užitečné, když chcete silné typování a nepotřebujete celý payload Story, můžete vyžádat přesně ta pole, která potřebujete.

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

Management API

Management API zpracovává CRUD operace ve vašem prostoru Storyblok: vytváření Stories, aktualizace schémat komponent, správa assetů a spouštění migrací. Použijete jej pro CI/CD pipeline, hromadné aktualizace obsahu nebo budování vlastních nástrojů kolem Storybloku.

Které API byste měli použít?

Pro většinu projektů v Next.js, Nuxt nebo Astro stačí REST Content Delivery API s storyblok-js-client nebo oficiálním SDK. Sáhněte po GraphQL, pokud je váš model obsahu složitý a načítáte hluboce vnořené struktury s mnoha poli, která nepotřebujete.

Ceník Storybloku v roce 2026

Ceník Storybloku začíná bezplatným plánem Starter. Placené plány začínají na 99 USD/měsíc za Growth (5 uživatelů). Vyšší úrovně zahrnují Growth Plus, Premium (střední trh) a Elite (neomezeně). Nový ceník nabyl účinnosti 7. dubna 2026 s 60denní lhůtou pro stávající měsíční předplatitele.

Zde je rozpis aktuálních cenových úrovní:

Storyblok také nabízí 45denní bezplatnou zkušební verzi Growth Plus, což je neobvykle štědré ve srovnání s 30denní zkušební verzí Contentful nebo bezplatnou úrovní Sanity založenou na využití.

Upřímný pohled na ceny: Storyblok může být ve velkém měřítku drahý. Vlákna na Redditu od agentur konzistentně zmiňují eskalaci cen随着随着随着随着随着随着随着随着随着随着随着随着随着随着随着随着随着随着随着随着随着随着随着随着随着随着随着随着随着随着随着随着随着随着随着随着随着随着随着随着随着随着随着随着随着随着随着随着随着随着随着随着随着随着随着随着随着随着随着随着随着随着随着随着随着随着随着随着随着随着随着随着随着随着随着随着随着随着随着随着随着随着随着随着随着随着随着随着随着随着随着随着随着随着随着随着随着随着随着随着随着随着随着随着随着随着随着随着随着随着随着随着随着随着随着随着随着随着随着随着随着随着随着随着随着随着随着随着随着随着随着随着随着随着随着随着随着随着随着随着随着随着随着随着随着随着随着随着随着随着随着随着随着随着随着随着随着随着随着随着随着随着随着随着随着随着随着随着随着随着随着随着随着随着随着随着随着随着随着随着随着随着随着随着随着随着随着随着随着随着随着随着随着随着随着随着随着随着随着随着随着随着随着随着随着随着随着随着随着随着随着随着随着随着随着随着随着随着随着随着随着随着随着随着随着随着随着随着随着随着随着随着随着随着随着随着随着随着随着随着随着随着随着随着随着随着随着随着随着随着随着随着随着随着随着随着随着随着随着随着随着随着随着随着随着随着随着随着随着随着随着随着随着随着随着随着随着随着随着随着随着随着随着随着随着随着随着随着随着随着随着随着随着随着随着随着随着随着随着随着随着随着随着随着随着随着随着随着随着随着随着随着随着随着随着随着随着随着随着随着随着随着随着随着随着随着随着随着随着随着随着随着随着随着随着随着随着随着随着随着随着随着随着随着随着随着随着随着随着随着随着随着随着随着随着随着随着随着随着随着随着随着随着随着随着随着随着随着随着随着随着随着随着随着随着随着随着随着随着随着随着随着随着随着随着随着随着随着随着随着随着随着随着随着随着随着随着随着随着随着随着随着随着随着随着随着随着随着随着随着随着随着随着随着随着随着随着随着随着随着随着随着随着随着随着随着随着随着随着随着随着随着随着随着随着随着随着随着随着随着随着随着随着随着随着随着随着随着随着随着随着随着随着随着随着随着随着随着随着随着随着随着随着随着随着随着随着随着随着随着随着随着随着随着随着随着随着随着随着随着随着随着随着随着随着随着随着随着随着随着随着随着随着随着随着随着随着随着随着随着...... (Note: The previous sentence was cut off in thought process, translating fully below) ...s růstem projektů, více uživatelů, více volání API, více prostorů pro nastavení více webů. Pokud máte omezený rozpočet, bezplatná self-hosted možnost Strapi nebo open-source model Payloadu vám poskytne větší flexibilitu za cenu správy vlastní infrastruktury.

Pro vedlejší projekty a prototypy funguje bezplatný plán Starter. Pro produkční projekty s 2–5 redaktory obsahu je plán Growth za 99 USD/měsíc konkurenceschopný. Nad tuto úroveň si nechte připravit custom nabídku od obchodního týmu Storybloku, zveřejněný ceník vypovídá pouze část příběhu.

Novinky v roce 2026: FlowMotion, Blueprints a AI

V roce 2026 spustil Storyblok FlowMotion (31. března), vrstvu pro automatizaci pracovních postupů založenou na n8n s více než 500 integracemi. Blueprints, spuštěné v červenci 2025, poskytují guidované nastavení projektu se startery specifickými pro framework. Funkce AI zahrnují AI Translate (více než 34 jazyků), Ideation Room pro brainstorming obsahu a nástroje AI SEO.

Žádný z ostatních průvodců Storyblokem tyto funkce zatím nepokrývá. Zde je přehled toho, co je skutečně dostupné.

FlowMotion: Automatizace pracovních postupů

FlowMotion je odpovědí Storybloku na úzké hrdlo operací s obsahem. Podle jejich tiskového oznámení stráví 75 % marketérů 6+ hodin týdně koordinací obsahu, což zahrnuje věci jako informování stakeholderů, spouštění překladů a plánování příspěvků na sociálních sítích.

FlowMotion je postaveno na spravovaném n8n (open-source nástroj pro automatizaci workflow) a připojuje se k více než 500 integracím. Nastavíte trigger na události obsahu (vytvoření, aktualizace, schválení, překlad, plánování, publikování) a FlowMotion automaticky spustí workflow. Představte si toto: editor publikuje blogový příspěvek a FlowMotion automaticky spustí AI překlad do 10 jazyků, upozorní tým sociálních médií přes Slack a naplánuje příspěvek na Twitter/X.

Jedná se o doplněk pro Enterprise/Elite, takže menší týmy k němu nebudou mít přístup. Pro organizace spravující obsah napříč více trhy a kanály je to však významná úspora času.

Blueprints: Guidované nastavení projektu

Blueprints řeší skutečný bolestivý bod: počáteční nastavení projektu Storyblok. Průzkum z roku 2024 zjistil, že 24 % senior vývojářů uvádí, že počáteční nastavení CMS projektu trvá dny, nikoliv hodiny.

Storyblok nabízí dvě úrovně Blueprintů:

• Core Blueprint: Minimální nastavení, připojí váš framework (Next.js, Nuxt nebo Astro), vytvoří prostor a nasadí základní starter. Dobré pro vývojáře, kteří chtějí čistý start.
• Business Blueprint: Produkčně připravené nastavení s předpřipravenými komponentami, nakonfigurovaným modelem obsahu a nasazením na Vercel nebo Netlify. Blíže k zážitku „spuštění za 30 minut“.

Vyberete svůj framework, zvolíte Core nebo Business a Storyblok vytvoří propojený GitHub repozitář s deployment pipeline. To skutečně ušetří hodiny nastavování boilerplate kódu ve srovnání se startem od nuly.

Funkce AI: Translate, Ideation Room a další

Funkce AI Storybloku využívají přístup „přines si vlastního poskytovatele“. Připojíte svůj API klíč OpenAI nebo Google Gemini a Storyblok jej použije pro:

• AI Translate: Překlad obsahu do více než 34 jazyků přímo v editoru. Není to náhrada za profesionální překlad u kritického obsahu, ale vynikající pro koncepty a interní obsah.
• Ideation Room: Kolaborativní AI brainstorming pro nápady na obsah. Redaktoři popíší, co potřebují, a AI vygeneruje osnovy, nadpisy a koncepty.
• AI Alt Text: Automatické generování alt textu pro obrázky.
• AI SEO: Návrhy meta titulků a popisů na základě vašeho obsahu.

Model s vlastním klíčem znamená, že kontrolujete náklady a vyhýbáte se vendor lock-in u cen AI. Storyblok má také ve vývoji funkci „Concept Room“, která má kombinovat ideaci s vizuálním plánováním obsahu.

Internacionalizace se Storyblokem

Storyblok zpracovává i18n prostřednictvím překladu na úrovni polí, což znamená, že máte jednu Story s přeloženými poli pro každý jazyk, místo abyste duplikovali celý dokument pro každý jazyk. To je zásadně odlišné od Contentful a Sanity, které používají překlad na úrovni dokumentů, a na škálovatelnosti to záleží.

Proč vítězí překlad na úrovni polí? Zvažte marketingový web v 10 jazycích. S i18n na úrovni dokumentů (Contentful, Sanity) byste měli 10 samostatných dokumentů pro každou stránku. Změna layoutu? Aktualizace 10 dokumentů. S přístupem Storybloku na úrovni polí máte jednu Story. Struktura zůstává stejná, pouze textová pole mají jazykové varianty. Změňte layout jednou, aktualizují se všechny 10 jazyků.

AI Translate to dělá ještě rychlejší. Redaktoři napíšou obsah ve svém primárním jazyce, kliknou na „Translate“ a AI vyplní ostatní jazyky pomocí jejich připojeného poskytovatele OpenAI nebo Gemini. Podporuje více než 34 jazyků.

Zde je způsob, jak načíst přeložený obsah:

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

Parametr language odvede veškerou práci. Nepřeložená pole automaticky fallbackují na výchozí jazyk, takže nikdy nezískáte rozbitou stránku z neúplných překladů.

Storyblok vs Alternativy

Po otestování všech pěti těchto CMS pro naše vlastní projekty, zde je jejich porovnání podle funkcí, které skutečně záleží při rozhodování o projektu:

Zvolte Storyblok, pokud váš projekt zahrnuje jak vývojáře, tak netechnické redaktory obsahu, kteří potřebují vidět změny vizuálně. Vizuální editor je bezkonkurenční a i18n na úrovni polí je nejlepší ve třídě pro vícejazyčné weby.

Zvolte Sanity, pokud je váš tým silný ve vývoji a chcete maximální flexibilitu schémat. Přístup schema-as-code a dotazovací jazyk GROQ v Sanity vám dávají více kontroly, ale redaktoři dostávají UI založené na formulářích, nikoliv vizuální náhled. Přečtěte si našeho průvodce Sanity pro kompletní obraz.

Zvolte Strapi nebo Payload, pokud potřebujete self-hosting nebo kontrolu open-source. Ani Storyblok, ani Sanity, ani Contentful vám nedovolí provozovat CMS na vlastních serverech. Strapi a Payload ano. Podívejte se na našeho průvodce Strapi nebo našeho průvodce Payload pro detaily.

Zvolte Contentful, pokud jste v enterprise prostředí, které si cení zralosti ekosystému, rozsáhlých integrací na marketplace a zavedených nástrojů pro vývojáře. Přečtěte si našeho průvodce Contentful.

Pro úplné srovnání s bodováním a doporučeními pro reálné projekty se podívejte na naše kompletní srovnání headless CMS.

Kdy NEpoužívat Storyblok

Každé CMS má dealbreakery pro určité projekty. Zde jsou ty Storybloku:

Potřebujete self-hosting. Storyblok je pouze SaaS, neexistuje žádná on-premises možnost, žádný Docker image, žádné self-managed nasazení. Pokud vaše organizace vyžaduje suverenitu dat nebo on-prem hosting, podívejte se na Payload pro self-hosted projekty nebo raději na Strapi.

Chcete schema-as-code. Schémata komponent Storybloku jsou definována v UI dashboardu, nikoliv ve vaší codebase. Můžete je exportovat a importovat prostřednictvím Management API, ale nežijí ve vašem Git repozitáři jako zdroj pravdy. Pokud jsou pro váš tým důležitá verzovaná schémata, Sanity i Payload nabízejí code-first modelování obsahu.

Jste rozpočtově omezeni ve velkém měřítku. Ceník Storybloku funguje dobře pro malé až střední týmy. Ale pokud provozujete 15+ prostorů napříč více značkami s desítkami editorů, náklady rostou. Self-hosted Strapi nebo Payload zcela eliminují náklady na licenci CMS.

Váš tým tvoří pouze vývojáři. Vizuální editor je prémiovou funkcí Storybloku. Pokud nikdo ve vašem týmu nepotřebuje vizuální náhled, pokud jsou všichni pohodlní s editací JSON nebo používáním UI založeného na formulářích, platíte za funkci, kterou nevyužijete.

Potřebujete přímý přístup k databázi. Storyblok plně abstrahuje svou úložišťovou vrstvu. Neexistuje žádné připojení Postgres, žádné SQL dotazy, žádný přímý přístup k datům. Pokud váš projekt vyžaduje custom databázové dotazy nebo joiny s jinými zdroji dat na úrovni databáze, Payload (postavený na MongoDB/Postgres) vám to poskytne.

Z našich zkušeností s budováním napříč více CMS vyniká Storyblok tam, kde vývojáři a redaktoři obsahu spolupracují na stejném projektu. Pokud je váš tým tvořen pouze vývojáři, prémium za vizuální editor nestojí za zaplacení.

Začínáme se Storyblokem

Nejrychlejší cesta od nuly k funkčnímu projektu Storybloku trvá asi 30 minut s Blueprints, nebo hodinu bez nich. Zde je posloupnost:

Krok 1: Registrace. Vytvořte si bezplatný účet na storyblok.com. Plán Starter vám dá jeden prostor s 25 tisíci voláními API měsíčně, což stačí pro vývoj a prototypování.

Krok 2: Vyberte Blueprint nebo začněte prázdný. Pokud chcete předkonfigurovaný projekt, vyberte Blueprint (Core pro minimální, Business pro produkčně připravený). Pokud preferujete stavbu od nuly, vytvořte prázdný prostor.

Krok 3: Připojte svůj frontend. Storyblok má oficiální SDK a startery pro Next.js, Nuxt, Astro, SvelteKit, Remix, Angular a Gatsby. Pro projekt Next.js App Router:

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

Krok 4: Nastavte URL pro náhled vizuálního editoru. V nastavení prostoru Storybloku nastavte URL pro náhled na váš lokální dev server (např. https://localhost:3000/). Vizuální editor vyžaduje HTTPS, použijte next dev --experimental-https nebo nástroj jako mkcert.

Krok 5: Definujte svůj první Blok a vytvořte Story. Přejděte do „Components“ v dashboardu Storybloku, vytvořte typ obsahu „Page“ s polem body, poté vytvořte vnořitelný Blok „Hero“. Vytvořte svou první Story pomocí typu obsahu „Page“. Přetáhněte do ní Hero Blok. Podívejte se, jak se vykresluje ve vizuálním editoru.

Pro průvodce rychlým startem specifické pro framework udržuje Storyblok stránku technologií s tutoriály nastavení pro každý podporovaný framework. Pokud se rozhodujete mezi frameworky pro svůj frontend, naše srovnání Next.js vs Remix pokrývá kompromisy a náš průvodce Vercel vs Netlify pomáhá s rozhodováním o platformě pro nasazení.

FAQ

Co je CMS Storyblok?

Storyblok je headless systém pro správu obsahu s vestavěným vizuálním editorem, založený v roce 2017 v Linci v Rakousku. Pro modelování obsahu používá architekturu založenou na komponentách nazvanou Bloks a doručuje obsah prostřednictvím REST a GraphQL API. Storyblok používají společnosti jako Adidas, Tesla a Oatly pro webové stránky, aplikace a doručování obsahu na více kanálech.

Je Storyblok zdarma k použití?

Ano, Storyblok nabízí bezplatný plán Starter s jedním uživatelem, jedním prostorem a 25 000 voláními API měsíčně. Placené plány začínají na 99 USD/měsíc za úroveň Growth s pěti uživateli. Storyblok také poskytuje 45denní bezplatnou zkušební verzi Growth Plus, což je štědřejší než zkušební období většiny konkurentů.

Jak funguje vizuální editor Storybloku?

Vizuální editor Storybloku načte vaši frontendovou aplikaci uvnitř iframe a překryje každou komponentu (Blok) upravitelnými oblastmi. Redaktoři obsahu klikají přímo na prvky stránky pro jejich úpravu a vidí změny v reálném čase. Vyžaduje knihovnu JavaScriptu StoryblokBridge ve vašem frontendovém kódu pro propojení iframe s rozhraním pro editaci Storybloku.

Je Storyblok lepší než Contentful?

Záleží na vašich prioritách. Storyblok nabízí superior vizuální editor a internacionalizaci na úrovni polí, což jej činí lepším pro marketingové týmy spravující vícejazyčný obsah. Contentful má zralější ekosystém, větší marketplace integrací a hlubší adopci v enterprise sektoru. Obě jsou pouze SaaS s podobnými cenovými strukturami.

Jaké frameworky Storyblok podporuje?

Storyblok poskytuje oficiální SDK a šablony starterů pro Next.js, Nuxt, Astro, SvelteKit, Remix, Angular a Gatsby. React SDK (@storyblok/react) a Vue SDK (@storyblok/vue) pokrývají dva nejpopulárnější ekosystémy. Blueprints aktuálně podporují Next.js, Nuxt a Astro pro guidované nastavení projektu.

Lze Storyblok self-hostovat?

Ne. Storyblok je platforma pouze SaaS bez možnosti self-hostingu nebo on-premises nasazení. Pokud je self-hosting požadavkem pro váš projekt kvůli suverenitě dat, compliance nebo nákladům, zvažte jako alternativy Strapi (open-source, založené na Node.js) nebo Payload CMS (open-source, nativní pro Next.js), které podporují plně self-hosted nasazení.

Co je FlowMotion ve Storybloku?

FlowMotion je funkce pro automatizaci pracovních postupů Storybloku spuštěná 31. března 2026. Postavena na spravovaném n8n, připojuje se k více než 500 integracím a automatizuje operace s obsahem, jako jsou triggery překladu, upozornění stakeholderů a publikování napříč platformami. FlowMotion je dostupný jako doplněk Enterprise/Elite, není součástí plánů Growth nebo Growth Plus.

Jak Storyblok zpracovává internacionalizaci?

Storyblok používá překlad na úrovni polí, což znamená, že jedna Story obsahuje přeložené varianty každého pole, místo aby duplikovala celý dokument pro každý jazyk. Tento přístup škáluje lépe než i18n na úrovni dokumentů (používané Contentful a Sanity) pro weby s mnoha jazyky. AI Translate podporuje více než 34 jazyků pomocí vašeho vlastního API klíče OpenAI nebo Gemini.

Kdo používá Storyblok?

Seznam zákazníků Storybloku zahrnuje Adidas, Tesla, Oatly, Virgin Media O2, dm-drogerie markt, Spendesk a Panini. Platforma slouží jak enterprise organizacím spravujícím operace s obsahem na více trzích, tak rostoucím startupům, které potřebují vizuální editor pro posílení netechnických týmů pro obsah. Storyblok získal celkové financování 138 milionů dolarů prostřednictvím série C.

Co jsou Storyblok Blueprints?

Blueprints jsou šablony pro guidované nastavení projektu spuštěné v červenci 2025 společností Storyblok. Vyberte si Core Blueprint (minimální starter) nebo Business Blueprint (produkčně připravený s předpřipravenými komponentami). Vyberte svůj framework, Next.js, Nuxt nebo Astro, a Storyblok vytvoří propojený GitHub repozitář s deployment pipeline na Vercel nebo Netlify během několika minut.