Storyblok CMS: Kapsamlı Geliştirici Rehberi [2026]

Storyblok CMS: Kapsamlı Geliştirici Rehberi [2026]

Storyblok, içerik editörlerinin gerçekten ne düzenlediğini görebildiği ender headless CMS'lerden biri -- ve bu tek özellik, geliştirici ile editör arasındaki iş akışını baştan aşağı değiştiriyor. 80 milyon dolarlık Seri C yatırım turunu tamamlayıp Mart 2026'da iş akışı otomasyonunu hayata geçirdikten sonra Storyblok'un gerçekte neyi iyi yaptığını, nerede yetersiz kaldığını ve bir sonraki projenize uyup uymadığını anlamaya değer.

Storyblok Nedir?

Storyblok, 2017 yılında Avusturya'nın Linz kentinde Dominik Angerer (CEO) ve Alexander Feiglstorfer (CTO) tarafından kurulan, yerleşik görsel editöre sahip bir headless CMS'tir. Bloks adını verdiği bileşen tabanlı bir mimari kullanır ve içeriği REST ile GraphQL API'leri üzerinden sunar. Adidas, Tesla ve Oatly gibi markalar tarafından kullanılan Storyblok, Seri C turu dahil toplamda 138 milyon dolar yatırım aldı.

Headless bir CMS içeriğinizi frontend'inizden ayırır -- içeriği bir API aracılığıyla yönetir, React, Vue veya Astro uygulamanız da onu tüketir. Bu kısım Contentful, Sanity, Strapi ve diğer tüm headless seçeneklerde aynıdır. Storyblok'u farklı kılan şey görsel editördür.

Dört üretim web sitesini farklı headless CMS'ler üzerinde çalıştırıyoruz (bu blogu da destekleyen Sanity dahil). Storyblok'u doğrudan deneyimlerimize göre karşılaştırdığımızda şunu gördük: görsel editör, geliştiriciler ile içerik ekipleri arasındaki gidip-gelmeyi gerçekten azaltıyor. Editörler form doldurup "bu nasıl görünecek?" diye sormak yerine gerçek sayfayı görüyor. Bu, pazarlama materyallerinde yazılanın ötesinde gerçek bir iş akışı kazanımı.

Temel mimari iki kavrama dayanır: Story'ler (sayfalarınız veya içerik girişleriniz) ve Blok'lar (hero bölümleri, özellik ızgaraları veya CTA'lar gibi yeniden kullanılabilir bileşenler). Geliştiriciler Blok şemalarını tanımlar, editörler bunları Story'lere sürükleyip bırakır. İçerik Content Delivery API üzerinden frontend'inize ulaşır.

Adidas ve Tesla'nın ötesindeki önemli müşteriler arasında Virgin Media O2, dm-drogerie markt, Oatly, Spendesk ve Panini yer alıyor. Storyblok'un tüm büyük seçeneklerle nasıl karşılaştırıldığına daha ayrıntılı bakmak için headless CMS karşılaştırmamıza göz atın.

Storyblok Görsel Editörü Nasıl Çalışır?

Storyblok'un görsel editörü, frontend'inizi bir iframe içinde yükler ve her bileşenin üzerine düzenlenebilir bölgeler yerleştirir. İçerik editörleri, ziyaretçilerin göreceği şeyi birebir görür ve her Blok üzerinde tıkla-düzenle işlevi bulunur. Bunun çalışması için frontend uygulamanıza StoryblokBridge JavaScript kütüphanesini kurmanız gerekir.

Bu özellik, Storyblok'u Contentful'ın form tabanlı yaklaşımından, Sanity'nin şema-kod-olarak yaklaşımından ve Strapi'nin yönetici panelinden ayıran şeydir. Diğer CMS'ler editörlere alanların bulunduğu bir form verir. Storyblok, editörlere gerçek sayfayı verir.

iframe Mimarisi

İşin arka planında şu gerçekleşir: bir editör Storyblok kontrol panelinde bir Story açtığında görsel editör, frontend uygulamanızı bir iframe içinde yükler. Storyblok her Blok'un verisine (yalnızca taslak içerikte) _editable özelliği ekler ve StoryblokBridge JavaScript kütüphanesi değişiklikleri dinler. Bir editör bir bileşene tıkladığında bridge, doğru alan editörünü açmak için üst Storyblok penceresine mesaj iletir.

Sonuç? Editörler başlığı düzenlemek için doğrudan hero bölümüne tıklar. Fiyatlandırma bölümünün altına yeni bir referans Blok sürüklerler. Değişiklikleri önizlemede anında görürler. "Kaydet ve hazırlama sitesine bak" döngüsü ortadan kalkar.

Bir uyarı: görsel editör yalnızca taslak içerikle çalışır, yayınlanmış içerikle değil. Önizleme URL'niz taslak veriyi çeken bir uygulama sürümüne işaret etmek zorundadır. Bu durum kurulum sırasında insanları sıklıkla şaşırtır.

StoryblokBridge Kurulumu

Bir Next.js App Router projesinde tipik kurulum şu şekildedir. @storyblok/react kurulu olması gerekir:

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

Ardından layout'unuzu provider ile sarın ve canlı düzenlemeyi etkinleştirmek için StoryblokStory bileşenini kullanı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} />;
}

StoryblokStory bileşeni bridge bağlantısını otomatik olarak yönetir -- iframe dinleyicisini kaydeder, Blok'larınıza _editable özelliklerini uygular ve görsel editörde tıkla-düzenle özelliğini etkinleştirir. Bunları elle kurmanıza gerek yoktur.

Storyblok'un Bileşen Mimarisi (Blok'lar ve Story'ler)

Storyblok içeriği iki temel kavramla düzenler: Story'ler (sayfalar veya içerik girişleri) ve Blok'lar (hero bölümleri, özellik ızgaraları veya CTA'lar gibi yeniden kullanılabilir bileşenler). Geliştiriciler Blok şemalarını Storyblok kontrol panelinde tanımlar, editörler ise Blok'ları Story'lere sürükleyip bırakarak sayfa oluşturur.

LEGO gibi düşünün. Story'ler taban plakaları -- oluşturduğunuz sayfalar. Blok'lar ise tek tek parçalar -- bir hero bölümü, bir referans kartı, bir fiyatlandırma tablosu. Her Blok türünün hangi alanlara sahip olduğunu (başlık, görsel, CTA metni) siz belirlersiniz, editörler de bunları bir araya getirir.

Story'ler: İçerik Girişleriniz

Storyblok'taki her sayfa, makale veya içerik girişi bir Story'dir. Story'ler bir klasör yapısında (dosya sistemi gibi) bulunur ve her Story'nin bir URL'ye karşılık gelen bir slug'ı vardır. Story'nin gövdesi Blok'lardan oluşur -- temelde bir kapsayıcıdır.

Story'ler sayfa dışı içerikleri de barındırabilir. Navigasyon bağlantılarınızı, alt bilgi metninizi ve sosyal medya URL'lerinizi depolayan "site-settings" adlı bir Story oluşturabilirsiniz. Bu esneklik, Sanity'deki singleton belgeleri kullanma biçiminize benzer.

Blok'lar: Yeniden Kullanılabilir Yapı Taşları

Blok'lar iki türde gelir: iç içe geçebilir ve içerik türü (kök düzeyli). İçerik türü Blok'lar, bir Story'nin üst düzey şemasını tanımlar ("Page" veya "BlogPost" gibi). İç içe geçebilir Blok'lar ise editörlerin Story'nin gövdesine sürüklediği bileşenlerdir -- hero bölümleri, görsel galerileri, SSS akordeonları.

Her Blok'un alanlarını tanımlayan bir şeması vardır. Bunları Storyblok kontrol panelinin "Components" bölümünde oluşturursunuz (kodda değil -- bu, Sanity'nin şema-kod-olarak yaklaşımından temel bir farktır).

Pratikte İçerik Modelleme

Bir Hero Blok şemasının Management API aracılığıyla tanımlandığında nasıl göründüğü:

{
  "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
  }
}

Bu Blok'u render eden React bileşeni:

// 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) çağrısı görsel editörde tıkla-düzenle özelliğini etkinleştiren şeydir. Bu olmadan bileşen düzgün render olur ama editörler alanları düzenlemek için üzerine tıklayamaz. Unutması kolay, hata ayıklaması can sıkıcı bir durum.

Storyblok API'leri: REST, GraphQL ve Management

Storyblok üç API sunar: Content Delivery API (REST, çoğu proje için önerilir), GraphQL API (salt okunur, seçici alan getirme için kullanışlı) ve Management API (migration'lar ve toplu güncellemeler gibi programatik içerik işlemleri için). Storyblok yeni projeler için REST'i önermektedir.

Headless CMS rehberlerinin çoğu API katmanını tamamen atlar. Bu bir hata -- seçtiğiniz API, derleme sürelerinizi, önbellekleme stratejinizi ve hız sınırı başlığınızı etkiler.

Content Delivery API (REST)

Zamanın %90'ında kullanacağınız birincil API budur. Filtreleme, sıralama, sayfalama ve Story'ler arasındaki ilişkileri çözümlemeyi destekler. Hız sınırları cömerttir: ücretli planlarda saniyede 50 istek.

// Content Delivery API aracılığıyla bir story getirme
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); // Blok verileriniz

GraphQL API

GraphQL API salt okunurdur ve farklı hız sınırlarına sahiptir (saniyede 100 karmaşıklık puanı). Güçlü tipleme istediğinizde ve tam Story yüküne ihtiyaç duymadığınızda kullanışlıdır -- tam olarak ihtiyacınız olan alanları talep edebilirsiniz.

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

Management API

Management API, Storyblok alanınızdaki CRUD işlemlerini yönetir: Story oluşturma, bileşen şemalarını güncelleme, varlıkları yönetme ve migration çalıştırma. CI/CD pipeline'ları, toplu içerik güncellemeleri veya Storyblok etrafında özel araçlar geliştirmek için kullanırsınız.

Hangi API'yi Kullanmalısınız?

Next.js, Nuxt veya Astro projelerinin büyük çoğunluğu için storyblok-js-client veya resmi SDK ile REST Content Delivery API ihtiyacınız olan her şeyi karşılar. İçerik modeliniz karmaşıksa ve ihtiyacınız olmayan çok sayıda alanla derin iç içe geçmiş yapılar getiriyorsanız GraphQL'e başvurun.

2026'da Storyblok Fiyatlandırması

Storyblok, ücretsiz Starter planıyla başlar. Ücretli planlar Growth için ayda 99 dolardan başlar (5 kullanıcı). Daha yüksek kademeler Growth Plus, Premium (orta ölçekli) ve Elite'i (sınırsız) kapsar. Yeni fiyatlandırma 7 Nisan 2026'da yürürlüğe girdi; mevcut aylık abonelere 60 günlük geçiş süresi tanındı.

Mevcut fiyatlandırma kademelerinin dökümü:

Storyblok ayrıca Growth Plus için 45 günlük ücretsiz deneme sunar; bu, Contentful'ın 30 günlük deneme süresine veya Sanity'nin kullanım tabanlı ücretsiz katmanına kıyasla oldukça cömert.

Fiyatlandırma konusundaki dürüst değerlendirme: Storyblok ölçeklendikçe pahalıya gelebiliyor. Ajansların Reddit tartışmalarında sürekli dile getirdiği konu, projeler büyüdükçe -- daha fazla kullanıcı, daha fazla API çağrısı, çoklu site kurulumları için daha fazla alan -- fiyatlandırmanın hızla artmasıdır. Bütçe kısıtlamanız varsa Strapi'nin ücretsiz self-hosted seçeneği veya Payload'ın açık kaynak modeli kendi altyapınızı yönetme maliyetiyle daha fazla esneklik sunar.

Yan projeler ve prototipler için ücretsiz Starter planı yeterlidir. 2-5 içerik editörlü üretim projeleri için ayda $99'luk Growth planı rekabetçidir. Bunun ötesinde Storyblok'un satış ekibinden özel teklif alın -- yayınlanan fiyatlandırma hikayenin yalnızca bir bölümünü anlatır.

2026'daki Yenilikler: FlowMotion, Blueprints ve Yapay Zeka

2026'da Storyblok, n8n üzerine inşa edilmiş 500'den fazla entegrasyon içeren iş akışı otomasyon katmanı FlowMotion'ı (31 Mart) hayata geçirdi. Temmuz 2025'te başlatılan Blueprints, framework'e özgü başlangıç noktalarıyla kılavuzlu proje kurulumu sağlıyor. Yapay zeka özellikleri arasında AI Translate (34'ten fazla dil), içerik beyin fırtınası için Ideation Room ve AI SEO araçları yer alıyor.

Dışarıdaki diğer Storyblok rehberlerinin hiçbiri bu özellikleri henüz kapsamıyor. İşte gerçekten sunulan şeyler.

FlowMotion: İş Akışı Otomasyonu

FlowMotion, içerik operasyonlarındaki darboğaza Storyblok'un yanıtı. Lansman duyurusuna göre pazarlamacıların %75'i, paydaşları bilgilendirme, çevirileri tetikleme ve sosyal medya gönderilerini planlama gibi içerik koordinasyon görevlerine haftada 6 saatten fazla harcıyor.

FlowMotion, yönetilen n8n (açık kaynaklı iş akışı otomasyon aracı) üzerine inşa edilmiş ve 500'den fazla entegrasyona bağlıdır. İçerik olaylarında tetikleyiciler ayarlarsınız -- oluşturma, güncelleme, onaylama, çevirme, planlama, yayınlama -- ve FlowMotion iş akışını otomatik olarak çalıştırır. Şöyle düşünün: bir editör blog yazısı yayınlar, FlowMotion otomatik olarak 10 dile yapay zeka çevirisi tetikler, Slack üzerinden sosyal medya ekibini bilgilendirir ve bir Twitter/X gönderisi planlar.

Enterprise/Elite eklentisi olduğundan küçük ekipler erişemez. Ancak birden fazla pazar ve kanalda içerik yöneten kuruluşlar için bu, önemli bir zaman tasarrufu sağlar.

Blueprints: Kılavuzlu Proje Kurulumu

Blueprints, gerçek bir sorunlu noktayı çözüyor: Storyblok projesinin başlangıç kurulumu. 2024 anketine göre kıdemli geliştiricilerin %24'ü başlangıç CMS proje kurulumunun saatler değil günler aldığını söylüyor.

Storyblok iki Blueprint kademesi sunar:

• Core Blueprint: Minimal kurulum -- framework'ünüzü (Next.js, Nuxt veya Astro) bağlar, bir alan oluşturur ve temel bir başlangıç noktası deploy eder. Temiz bir başlangıç isteyen geliştiriciler için uygundur.
• Business Blueprint: Önceden oluşturulmuş bileşenler, yapılandırılmış içerik modeli ve Vercel ya da Netlify'a deploy içeren üretime hazır kurulum. "30 dakikada yayına gir" deneyimine daha yakın.

Framework'ünüzü seçer, Core veya Business'ı tercih eder ve Storyblok bir deploy pipeline'ıyla bağlı bir GitHub deposu oluşturur. Sıfırdan başlamayla kıyaslandığında gerçekten saatlik şablon kurulumlarından kurtarır.

Yapay Zeka Özellikleri: Translate, Ideation Room ve Daha Fazlası

Storyblok'un yapay zeka özellikleri, kendi API anahtarınızı getirin yaklaşımını benimser. OpenAI veya Google Gemini API anahtarınızı bağlarsınız ve Storyblok bunu şunlar için kullanır:

• AI Translate: İçeriği doğrudan editörde 34'ten fazla dile çevirin. Kritik içerikler için profesyonel çevirinin yerini tutmaz, ancak taslaklar ve dahili içerik için mükemmeldir.
• Ideation Room: İçerik fikirleri için işbirlikli yapay zeka beyin fırtınası. Editörler ne istediklerini anlatır, yapay zeka ana hatlar, başlıklar ve taslaklar üretir.
• AI Alt Text: Görseller için otomatik alternatif metin oluşturma.
• AI SEO: İçeriğinize dayalı meta başlık ve açıklama önerileri.

Kendi anahtarını getir modeli maliyetleri kontrol etmenizi ve yapay zeka fiyatlandırmasında satıcı bağımlılığından kaçınmanızı sağlar. Storyblok ayrıca ideasyon ile görsel içerik planlamayı birleştirmeyi hedefleyen "Concept Room" özelliğini geliştirme aşamasında sunuyor.

Storyblok ile Uluslararasılaştırma

Storyblok, alan düzeyli çeviri yoluyla i18n'ı yönetir; yani her dil için tüm belgeyi kopyalamak yerine tek bir Story içinde her dil için çevrilmiş alanlar bulunur. Bu, belge düzeyli çeviri kullanan Contentful ve Sanity'den temelden farklıdır ve ölçekte önem kazanır.

Alan düzeyli çeviri neden kazanır? 10 dilde bir pazarlama sitesi düşünün. Belge düzeyli i18n (Contentful, Sanity) ile her sayfa için 10 ayrı belgeye sahip olursunuz. Düzeni değiştirdiniz mi? 10 belgeyi güncelleyin. Storyblok'un alan düzeyli yaklaşımıyla tek bir Story'niz vardır. Yapı aynı kalır -- yalnızca metin alanlarının dil varyantları bulunur. Düzeni bir kez değiştirin, 10 dil de güncellenir.

AI Translate bunu daha da hızlandırır. Editörler birincil dilde içerik yazar, "Çevir"e tıklar ve yapay zeka bağlı OpenAI veya Gemini sağlayıcıları aracılığıyla diğer dilleri doldurur. 34'ten fazla dili destekler.

Çevrilmiş içerik nasıl getirilir:

// Almanca bir story getirme
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 artık Almanca çevirileri içerir
// Çevrilmemiş alanlar varsayılan dile geri döner

language parametresi tüm işi yapar. Çevrilmemiş alanlar otomatik olarak varsayılan dile geri döner; bu sayede eksik çevirilerden kaynaklanan bozuk sayfa sorunuyla karşılaşmazsınız.

Storyblok ve Alternatifleri

Bu beş CMS'in tamamını kendi projelerimizde test ettikten sonra proje kararları açısından gerçekten önem taşıyan özelliklerde karşılaştırma şu şekilde:

Storyblok'u seçin: projenizde hem geliştiriciler hem de değişiklikleri görsel olarak görmesi gereken teknik olmayan içerik editörleri varsa. Görsel editör eşsizdir; alan düzeyli i18n ise çok dilli siteler için sınıfının en iyisidir.

Sanity'yi seçin: ekibiniz geliştirici ağırlıklıysa ve maksimum şema esnekliği istiyorsanız. Sanity'nin şema-kod-olarak yaklaşımı ve GROQ sorgu dili size daha fazla kontrol sağlar, ancak editörler görsel önizleme yerine form tabanlı bir arayüz kullanır. Tam resim için Sanity rehberimizi okuyun.

Strapi veya Payload'ı seçin: self-hosting ya da açık kaynak kontrolüne ihtiyaç duyuyorsanız. Storyblok, Sanity ve Contentful'ın hiçbiri CMS'i kendi sunucularınızda çalıştırmanıza izin vermez. Strapi ve Payload verir. Ayrıntılar için Strapi rehberimize veya Payload rehberimize bakın.

Contentful'ı seçin: ekosistem olgunluğuna, kapsamlı pazar yeri entegrasyonlarına ve köklü geliştirici araçlarına değer veren kurumsal bir ortamdaysanız. Contentful rehberimizi okuyun.

Puanlama ve gerçek dünya proje önerileri içeren tam karşılaştırma için kapsamlı headless CMS karşılaştırmamıza bakın.

Storyblok Ne Zaman Kullanılmamalı?

Her CMS'in belirli projeler için vazgeçilmez koşulları vardır. İşte Storyblok'un kırılma noktaları:

Self-hosting gerekiyorsa. Storyblok yalnızca SaaS'tır -- şirket içi seçenek, Docker imajı veya kendi yönetimli deploy yoktur. Kuruluşunuz veri egemenliği veya şirket içi barındırma gerektiriyorsa self-hosted projeler için Payload'a veya Strapi'ye bakın.

Şema-kod-olarak istiyorsanız. Storyblok bileşen şemaları kontrol paneli UI'ında tanımlanır, kod tabanınızda değil. Bunları Management API aracılığıyla dışa ve içe aktarabilirsiniz ama Git deponuzda kaynak gerçeği olarak yaşamazlar. Ekibiniz için sürüm kontrollü şemalar önemliyse Sanity ve Payload her ikisi de kod öncelikli içerik modelleme sunar.

Ölçekte bütçe kısıtlamanız varsa. Storyblok'un fiyatlandırması küçük ve orta ölçekli ekipler için işe yarar. Ancak onlarca editörle birden fazla marka üzerinde 15'ten fazla alan yönetiyorsanız maliyetler birikir. Self-hosted Strapi veya Payload CMS lisans maliyetlerini tamamen ortadan kaldırır.

Ekibiniz tamamen geliştiricilerden oluşuyorsa. Görsel editör Storyblok'un premium özelliğidir. Ekibinizden hiç kimsenin görsel önizlemeye ihtiyacı yoksa -- herkes JSON düzenlemeye veya form tabanlı arayüz kullanmaya alışkınsa -- kullanmayacağınız bir özellik için ödeme yapıyorsunuz demektir.

Doğrudan veritabanı erişimine ihtiyacınız varsa. Storyblok depolama katmanını tamamen soyutlar. Postgres bağlantısı, SQL sorguları, doğrudan veri erişimi yoktur. Projeniz veritabanı düzeyinde özel veritabanı sorguları veya diğer veri kaynaklarıyla birleştirme gerektiriyorsa Payload (MongoDB/Postgres üzerine inşa edilmiş) bunu sağlar.

Birden fazla CMS üzerinde geliştirme deneyimimize göre Storyblok, geliştiriciler ve içerik editörlerinin aynı projede iş birliği yaptığı durumlarda parlar. Ekibiniz tamamen geliştiricilerden oluşuyorsa görsel editör primi buna değmez.

Storyblok ile Başlarken

Sıfırdan çalışan bir Storyblok projesine ulaşmanın en hızlı yolu Blueprints ile yaklaşık 30 dakika, Blueprints olmadan yaklaşık bir saattir. İşte sırası:

Adım 1: Kayıt olun. storyblok.com adresinde ücretsiz bir hesap oluşturun. Starter planı geliştirme ve prototip için yeterli olan ayda 25.000 API çağrısıyla bir alan sunar.

Adım 2: Blueprint seçin veya boş başlayın. Önceden yapılandırılmış bir proje istiyorsanız Blueprint seçin (minimal için Core, üretime hazır için Business). Sıfırdan inşa etmeyi tercih ediyorsanız boş bir alan oluşturun.

Adım 3: Frontend'inizi bağlayın. Storyblok'un Next.js, Nuxt, Astro, SvelteKit, Remix, Angular ve Gatsby için resmi SDK'ları ve başlangıç şablonları mevcuttur. Next.js App Router projesi için:

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

Adım 4: Görsel editör önizleme URL'sini ayarlayın. Storyblok alan ayarlarınızda önizleme URL'sini yerel geliştirme sunucunuza (örn. https://localhost:3000/) ayarlayın. Görsel editörün HTTPS'e ihtiyacı var -- next dev --experimental-https veya mkcert gibi bir araç kullanın.

Adım 5: İlk Blok'unuzu tanımlayın ve bir Story oluşturun. Storyblok kontrol panelindeki "Components" bölümüne gidin, body alanına sahip bir "Page" içerik türü oluşturun, ardından iç içe geçebilir bir "Hero" Blok ekleyin. "Page" içerik türünü kullanarak ilk Story'nizi oluşturun. Hero Blok'u sürükleyin. Görsel editörde render olduğunu görün.

Framework'e özgü hızlı başlangıç rehberleri için Storyblok, desteklenen her framework için kurulum eğitimleri içeren bir teknolojiler sayfası sunmaktadır. Frontend için framework seçiyorsanız Next.js ve Remix karşılaştırmamız değerlendirmeleri, Vercel ve Netlify rehberimiz ise deploy platformu kararlarınıza yardımcı olur.

SSS

Storyblok CMS Nedir?

Storyblok, 2017 yılında Avusturya'nın Linz kentinde kurulmuş, yerleşik görsel editöre sahip headless bir içerik yönetim sistemidir. İçerik modelleme için Blok adını verdiği bileşen tabanlı mimariyi kullanır ve içeriği REST ile GraphQL API'leri üzerinden sunar. Storyblok, web siteleri, uygulamalar ve çok kanallı içerik dağıtımı için Adidas, Tesla ve Oatly gibi şirketler tarafından kullanılmaktadır.

Storyblok Ücretsiz mi?

Evet, Storyblok bir kullanıcı, bir alan ve ayda 25.000 API çağrısıyla ücretsiz Starter planı sunar. Ücretli planlar beş kullanıcılık Growth kademesiyle ayda $99'dan başlar. Storyblok ayrıca çoğu rakibin deneme süresinden daha cömert olan 45 günlük Growth Plus ücretsiz denemesi sağlar.

Storyblok Görsel Editörü Nasıl Çalışır?

Storyblok görsel editörü, frontend uygulamanızı bir iframe içinde yükler ve her bileşen (Blok) üzerine düzenlenebilir bölgeler yerleştirir. İçerik editörleri sayfa öğelerine doğrudan tıklayarak düzenler ve değişiklikleri gerçek zamanlı görür. iframe'i Storyblok düzenleme arayüzüne bağlamak için frontend kodunuzda StoryblokBridge JavaScript kütüphanesi gereklidir.

Storyblok, Contentful'dan Daha mı İyi?

Önceliklerinize bağlı. Storyblok daha iyi bir görsel editör ve alan düzeyli uluslararasılaştırma sunuyor; bu da onu çok dilli içerik yöneten pazarlama ekipleri için daha uygun kılıyor. Contentful daha olgun bir ekosisteme, daha geniş bir entegrasyon pazarına ve daha derin kurumsal benimsemeye sahip. Her ikisi de benzer fiyatlandırma yapılarına sahip yalnızca SaaS seçenekleridir.

Storyblok Hangi Framework'leri Destekler?

Storyblok, Next.js, Nuxt, Astro, SvelteKit, Remix, Angular ve Gatsby için resmi SDK'lar ve başlangıç şablonları sağlar. React SDK (@storyblok/react) ve Vue SDK (@storyblok/vue) en popüler iki ekosistemi kapsar. Blueprints şu an için kılavuzlu proje kurulumunda Next.js, Nuxt ve Astro'yu destekler.

Storyblok Self-hosted Kurulabilir mi?

Hayır. Storyblok, self-hosting veya şirket içi seçenek bulunmayan yalnızca SaaS bir platformdur. Self-hosting projeniz için bir gereksinimse -- veri egemenliği, uyumluluk veya maliyet nedeniyle -- tam self-hosted deploy destekleyen alternatiflere göz atın: Strapi (açık kaynak, Node.js tabanlı) veya Payload CMS (açık kaynak, Next.js yerel).

Storyblok'ta FlowMotion Nedir?

FlowMotion, 31 Mart 2026'da başlatılan Storyblok'un iş akışı otomasyon özelliğidir. Yönetilen n8n üzerine inşa edilmiş olup 500'den fazla entegrasyona bağlanır ve çeviri tetiklemeleri, paydaş bildirimleri ve platformlar arası yayın gibi içerik operasyonlarını otomatikleştirir. FlowMotion, Growth veya Growth Plus planlarına dahil değil; Enterprise/Elite eklentisi olarak sunulur.

Storyblok Uluslararasılaştırmayı Nasıl Yönetir?

Storyblok alan düzeyli çeviriyi kullanır; yani her dil için tüm belgeyi kopyalamak yerine tek bir Story, her alanın dil varyantlarını barındırır. Bu yaklaşım, çok dilli siteler için belge düzeyli i18n'dan (Contentful ve Sanity tarafından kullanılır) daha iyi ölçeklenir. AI Translate, kendi OpenAI veya Gemini API anahtarınızı kullanarak 34'ten fazla dili destekler.

Storyblok'u Kimler Kullanır?

Storyblok'un müşteri listesi arasında Adidas, Tesla, Oatly, Virgin Media O2, dm-drogerie markt, Spendesk ve Panini yer alıyor. Platform, teknik olmayan içerik ekiplerine görsel editör sunan büyüyen startupları ve çok pazarlı içerik operasyonları yürüten kurumsal kuruluşları birlikte hizmet veriyor. Storyblok, Seri C dahil toplamda 138 milyon dolar yatırım aldı.

Storyblok Blueprints Nedir?

Blueprints, Temmuz 2025'te Storyblok tarafından hayata geçirilen kılavuzlu proje kurulum şablonlarıdır. Core Blueprint (minimal başlangıç) veya Business Blueprint (önceden oluşturulmuş bileşenlerle üretime hazır) seçebilirsiniz. Framework'ünüzü -- Next.js, Nuxt veya Astro -- belirleyin ve Storyblok dakikalar içinde Vercel ya da Netlify'a deploy pipeline'ıyla bağlı bir GitHub deposu oluşturur.