Storyblok CMS: Hướng dẫn đầy đủ cho nhà phát triển [2026]

Storyblok CMS: Hướng dẫn đầy đủ cho nhà phát triển [2026]

Storyblok là một trong số ít các hệ thống quản lý nội dung (CMS) headless nơi biên tập viên nội dung thực sự có thể nhìn thấy những gì họ đang chỉnh sửa, và chỉ riêng tính năng này đã thay đổi hoàn toàn động lực làm việc giữa developer và biên tập viên. Sau khi gọi vốn thành công 80 triệu USD ở vòng Series C và ra mắt tính năng tự động hóa quy trình làm việc vào tháng 3 năm 2026, đã đến lúc tìm hiểu xem Storyblok thực sự làm tốt điều gì, những điểm hạn chế của nó ở đâu, và liệu nó có phù hợp với dự án tiếp theo của bạn hay không.

Storyblok là gì?

Storyblok là một CMS headless tích hợp sẵn trình soạn thảo trực quan, được thành lập năm 2017 tại Linz, Áo bởi Dominik Angerer (CEO) và Alexander Feiglstorfer (CTO). Nền tảng này sử dụng kiến trúc dựa trên component gọi là Bloks và phân phối nội dung thông qua API REST và GraphQL. Được sử dụng bởi Adidas, Tesla và Oatly, Storyblok đã huy động được 138 triệu USD vốn đầu tư thông qua vòng gọi vốn Series C.

Một CMS headless tách biệt nội dung khỏi giao diện người dùng (frontend); bạn quản lý nội dung thông qua API, và ứng dụng React, Vue hoặc Astro của bạn sẽ tiêu thụ nội dung đó. Phần này giống hệt nhau trên Contentful, Sanity, Strapi và mọi lựa chọn headless khác. Điểm khiến Storyblok khác biệt chính là trình soạn thảo trực quan.

Chúng tôi vận hành bốn trang web production trên các CMS headless khác nhau (bao gồm cả Sanity, nền tảng powering blog này). Dưới đây là cách Storyblok được so sánh từ kinh nghiệm thực tế: trình soạn thảo trực quan thực sự giảm thiểu đáng kể sự trao đổi qua lại giữa developer và đội ngũ nội dung. Thay vì biên tập viên điền vào các biểu mẫu và hỏi "nhìn nó sẽ như thế nào?", họ có thể thấy trực tiếp trang web thực tế. Đó là một cải tiến quy trình làm việc thực sự, không phải chỉ là một gạch đầu dòng marketing.

Kiến trúc cốt lõi được chia thành hai khái niệm: Stories (các trang hoặc mục nội dung của bạn) và Bloks (các component tái sử dụng như phần hero, lưới tính năng hoặc nút kêu gọi hành động - CTA). Developer định nghĩa sơ đồ (schema) cho Blok, còn biên tập viên kéo và thả chúng vào Stories. Nội dung được chuyển đến frontend của bạn thông qua Content Delivery API.

Các khách hàng nổi bật khác ngoài Adidas và Tesla bao gồm Virgin Media O2, dm-drogerie markt, Oatly, Spendesk và Panini. Để xem xét kỹ hơn về cách Storyblok sánh ngang với mọi tùy chọn lớn khác, hãy tham khảo bài so sánh CMS headless của chúng tôi.

Trình soạn thảo trực quan của Storyblok hoạt động như thế nào?

Trình soạn thảo trực quan của Storyblok tải frontend của bạn trong một iframe và phủ lên các vùng có thể chỉnh sửa trên mỗi component. Biên tập viên nội dung xem trước trực tiếp chính xác những gì khách truy cập sẽ thấy, với chức năng nhấp để chỉnh sửa trên mọi Blok. Tính năng này yêu cầu thư viện JavaScript StoryblokBridge được thiết lập trong ứng dụng frontend của bạn.

Đây là tính năng phân biệt Storyblok với cách tiếp cận dựa trên biểu mẫu của Contentful, cách tiếp cận schema-as-code của Sanity hoặc bảng quản trị của Strapi. Các CMS đó cung cấp cho biên tập viên một biểu mẫu với các trường dữ liệu. Storyblok cung cấp cho biên tập viên chính trang web thực tế.

Kiến trúc Iframe

Dưới đây là cách nó hoạt động bên dưới: khi biên tập viên mở một Story trong bảng điều khiển Storyblok, trình soạn thảo trực quan sẽ tải ứng dụng frontend của bạn bên trong một iframe. Storyblok chèn thuộc tính _editable vào dữ liệu của mỗi Blok (chỉ đối với nội dung nháp), và thư viện JavaScript StoryblokBridge sẽ lắng nghe các thay đổi. Khi biên tập viên nhấp vào một component, bridge sẽ giao tiếp với cửa sổ cha của Storyblok để mở trình chỉnh sửa trường phù hợp.

Kết quả? Biên tập viên nhấp trực tiếp vào phần hero để chỉnh sửa tiêu đề. Họ kéo một Blok lời chứng thực mới xuống dưới phần giá. Họ thấy các thay đổi được phản ánh ngay lập tức trong bản xem trước. Không còn vòng lặp "lưu và kiểm tra trang staging" nữa.

Một điểm cần lưu ý: trình soạn thảo trực quan chỉ hoạt động với nội dung nháp, không phải nội dung đã xuất bản. URL xem trước của bạn cần trỏ đến phiên bản ứng dụng của bạn đang lấy dữ liệu nháp. Điều này thường gây bất ngờ cho mọi người trong quá trình thiết lập ban đầu.

Thiết lập StoryblokBridge

Dưới đây là thiết lập điển hình trong một dự án Next.js App Router. Bạn sẽ cần cài đặt @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;
}

Sau đó, bọc layout của bạn với provider và sử dụng component StoryblokStory để kích hoạt chỉnh sửa trực tiếp:

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

Component StoryblokStory xử lý kết nối bridge tự động; nó đăng ký trình lắng nghe iframe, áp dụng các thuộc tính _editable cho Bloks của bạn và kích hoạt chức năng nhấp để chỉnh sửa trong trình soạn thảo trực quan. Bạn không cần phải tự mình đấu nối các phần này.

Kiến trúc Component của Storyblok (Bloks và Stories)

Storyblok tổ chức nội dung bằng hai khái niệm cốt lõi: Stories (trang hoặc mục nội dung) và Bloks (các component tái sử dụng như phần hero, lưới tính năng hoặc CTA). Developer định nghĩa sơ đồ Blok trong bảng điều khiển Storyblok, và biên tập viên soạn các trang bằng cách kéo và thả Bloks vào Stories.

Hãy nghĩ về nó như LEGO. Stories là các tấm đế nền, các trang bạn đang xây dựng. Bloks là các viên gạch riêng lẻ: một phần hero, một thẻ lời chứng thực, một bảng giá. Bạn định nghĩa các trường mà mỗi loại Blok có (tiêu đề, hình ảnh, văn bản CTA), và biên tập viên ghép chúng lại với nhau.

Stories: Các mục nội dung của bạn

Mỗi trang, bài viết hoặc mục nội dung trong Storyblok đều là một Story. Stories tồn tại trong cấu trúc thư mục (giống như hệ thống tệp tin), và mỗi Story có một slug ánh xạ tới một URL. Phần thân (body) của một Story được cấu thành từ các Bloks; về cơ bản, nó là một container.

Stories cũng có thể chứa nội dung không phải là trang. Bạn có thể có một Story tên là "site-settings" lưu trữ các liên kết điều hướng, văn bản chân trang và URL mạng xã hội của bạn. Sự linh hoạt này tương tự như cách bạn sử dụng các tài liệu singleton trong Sanity.

Bloks: Các khối xây dựng tái sử dụng

Bloks có hai loại: nestable (có thể lồng nhau) và content type (cấp gốc). Content type Bloks định nghĩa sơ đồ cấp cao nhất cho một Story (như "Page" hoặc "BlogPost"). Nestable Bloks là các component mà biên tập viên kéo vào phần thân của Story, chẳng hạn như phần hero, thư viện ảnh hoặc accordion FAQ.

Mỗi Blok có một sơ đồ định nghĩa các trường của nó. Bạn tạo những thứ này trong bảng điều khiển Storyblok dưới mục "Components" (không phải trong code, đây là điểm khác biệt chính so với cách tiếp cận schema-as-code của Sanity).

Mô hình hóa nội dung trong thực tế

Đây là giao diện sơ đồ Hero Blok khi bạn định nghĩa nó thông qua 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
  }
}

Và component React hiển thị Blok này:

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

Lệnh gọi storyblokEditable(blok) là thứ kích hoạt chức năng nhấp để chỉnh sửa trong trình soạn thảo trực quan. Nếu thiếu nó, component vẫn hiển thị bình thường nhưng biên tập viên không thể nhấp vào nó để chỉnh sửa các trường. Rất dễ quên và rất đau đầu khi gỡ lỗi.

API của Storyblok: REST so với GraphQL so với Management

Storyblok cung cấp ba API: Content Delivery API (REST, được khuyến nghị cho hầu hết các dự án), GraphQL API (chỉ đọc, hữu ích khi bạn cần lấy chọn lọc các trường) và Management API (dành cho các thao tác nội dung theo chương trình như di chuyển dữ liệu và cập nhật hàng loạt). Storyblok khuyến nghị REST cho các dự án mới.

Hầu hết các hướng dẫn về headless CMS đều bỏ qua hoàn toàn lớp API. Đó là một sai lầm; API bạn chọn ảnh hưởng đến thời gian build, chiến lược caching và dư địa giới hạn tốc độ (rate limit) của bạn.

Content Delivery API (REST)

Đây là API chính và là cái bạn sẽ sử dụng 90% thời gian. Nó hỗ trợ lọc, sắp xếp, phân trang và giải quyết các mối quan hệ giữa các Stories. Giới hạn tốc độ khá hào phóng: 50 yêu cầu/giây trên các gói trả phí.

// 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 chỉ cho phép đọc và có giới hạn tốc độ khác (100 điểm độ phức tạp mỗi giây). Nó hữu ích khi bạn muốn kiểu dữ liệu mạnh mẽ và không cần toàn bộ payload của Story; bạn có thể yêu cầu chính xác các trường mình cần.

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

Management API

Management API xử lý các thao tác CRUD trên không gian làm việc Storyblok của bạn: tạo Stories, cập nhật sơ đồ component, quản lý tài sản và chạy các kịch bản di chuyển dữ liệu. Bạn sẽ sử dụng API này cho các pipeline CI/CD, cập nhật nội dung hàng loạt hoặc xây dựng các công cụ tùy chỉnh xung quanh Storyblok.

Bạn nên sử dụng API nào?

Đối với hầu hết các dự án Next.js, Nuxt hoặc Astro, REST Content Delivery API với storyblok-js-client hoặc SDK chính thức xử lý mọi thứ bạn cần. Hãy chuyển sang GraphQL nếu mô hình nội dung của bạn phức tạp và bạn đang lấy các cấu trúc lồng sâu với nhiều trường không cần thiết.

Bảng giá Storyblok năm 2026

Giá của Storyblok bắt đầu với gói Starter miễn phí. Các gói trả phí bắt đầu từ $99/tháng cho gói Growth (5 người dùng). Các cấp cao hơn bao gồm Growth Plus, Premium (thị trường trung cấp) và Elite (không giới hạn). Bảng giá mới có hiệu lực từ ngày 7 tháng 4 năm 2026, với thời gian ân hạn 60 ngày cho các thuê bao hàng tháng hiện tại.

Dưới đây là phân tích chi tiết các gói giá hiện tại:

Storyblok cũng cung cấp bản dùng thử miễn phí 45 ngày cho gói Growth Plus, điều này rộng rãi hơn hẳn so với bản dùng thử 30 ngày của Contentful hoặc gói miễn phí dựa trên mức sử dụng của Sanity.

Nhận định thẳng thắn về giá cả: Storyblok có thể trở nên đắt đỏ khi mở rộng quy mô. Các luồng thảo luận trên Reddit từ các agency luôn đề cập đến việc giá tăng vọt khi dự án phát triển: nhiều người dùng hơn, nhiều lệnh gọi API hơn, nhiều không gian hơn cho các thiết lập đa trang web. Nếu bạn bị hạn chế ngân sách, tùy chọn tự lưu trữ miễn phí của Strapi hoặc mô hình nguồn mở của Payload mang lại cho bạn sự linh hoạt hơn với cái giá phải trả là tự quản lý hạ tầng.

Đối với các dự án phụ và nguyên mẫu, gói Starter miễn phí hoạt động tốt. Đối với các dự án production có 2-5 biên tập viên nội dung, gói Growth ở mức $99/tháng là cạnh tranh. Vượt quá mức đó, hãy nhận báo giá tùy chỉnh từ đội ngũ bán hàng của Storyblok; bảng giá công khai chỉ kể một phần câu chuyện.

Có gì mới trong năm 2026: FlowMotion, Blueprints và AI

Năm 2026, Storyblok đã ra mắt FlowMotion (ngày 31 tháng 3), một lớp tự động hóa quy trình làm việc được xây dựng trên n8n với hơn 500 tích hợp. Blueprints, ra mắt tháng 7 năm 2025, cung cấp thiết lập dự án có hướng dẫn với các bộ khởi động cụ thể cho từng framework. Các tính năng AI bao gồm AI Translate (hơn 34 ngôn ngữ), Ideation Room để brainstorm ý tưởng nội dung và các công cụ AI SEO.

Chưa có hướng dẫn Storyblok nào khác bên ngoài kia đề cập đến các tính năng này. Dưới đây là những gì thực sự đang được triển khai.

FlowMotion: Tự động hóa quy trình làm việc

FlowMotion là câu trả lời của Storyblok cho nút thắt cổ chai trong vận hành nội dung. Theo thông báo ra mắt của họ, 75% nhà tiếp thị dành 6+ giờ mỗi tuần cho các nhiệm vụ phối hợp nội dung, chẳng hạn như thông báo cho các bên liên quan, kích hoạt dịch thuật và lên lịch đăng bài mạng xã hội.

FlowMotion được xây dựng trên n8n được quản lý (công cụ tự động hóa quy trình làm việc mã nguồn mở) và kết nối với hơn 500 tích hợp. Bạn đặt các trigger trên các sự kiện nội dung (tạo, cập nhật, phê duyệt, dịch, lên lịch, xuất bản) và FlowMotion sẽ tự động chạy quy trình làm việc. Hãy tưởng tượng thế này: một biên tập viên xuất bản một bài đăng blog, và FlowMotion tự động kích hoạt dịch AI sang 10 ngôn ngữ, thông báo cho đội ngũ mạng xã hội qua Slack và lên lịch đăng bài trên Twitter/X.

Đây là tiện ích bổ sung cho gói Enterprise/Elite, vì vậy các nhóm nhỏ hơn sẽ không có quyền truy cập. Nhưng đối với các tổ chức quản lý nội dung trên nhiều thị trường và kênh, đây là một công cụ tiết kiệm thời gian đáng kể.

Blueprints: Thiết lập dự án có hướng dẫn

Blueprints giải quyết một điểm đau thực sự: thiết lập ban đầu của một dự án Storyblok. Một cuộc khảo sát năm 2024 cho thấy 24% senior developer nói rằng việc thiết lập dự án CMS ban đầu mất vài ngày, chứ không phải vài giờ.

Storyblok cung cấp hai cấp độ Blueprint:

• Core Blueprint: Thiết lập tối thiểu, kết nối framework của bạn (Next.js, Nuxt hoặc Astro), tạo một không gian và triển khai một bộ khởi động cơ bản. Tốt cho các developer muốn bắt đầu từ một trang sạch.
• Business Blueprint: Thiết lập sẵn sàng cho production với các component được xây dựng trước, mô hình nội dung đã cấu hình và triển khai lên Vercel hoặc Netlify. Gần hơn với trải nghiệm "ra mắt trong 30 phút".

Bạn chọn framework của mình, chọn Core hoặc Business, và Storyblok tạo một kho lưu trữ GitHub được kết nối với pipeline triển khai. Nó thực sự tiết kiệm hàng giờ thiết lập boilerplate so với việc bắt đầu từ con số 0.

Tính năng AI: Translate, Ideation Room và hơn thế nữa

Các tính năng AI của Storyblok áp dụng phương pháp "mang theo nhà cung cấp của riêng bạn". Bạn kết nối khóa API OpenAI hoặc Google Gemini của mình, và Storyblok sử dụng nó cho:

• AI Translate: Dịch nội dung sang hơn 34 ngôn ngữ trực tiếp trong trình soạn thảo. Không thay thế cho dịch thuật chuyên nghiệp đối với nội dung quan trọng, nhưng tuyệt vời cho bản nháp và nội dung nội bộ.
• Ideation Room: Brainstorm ý tưởng nội dung bằng AI có tính cộng tác. Biên tập viên mô tả những gì họ cần, và AI tạo ra dàn ý, tiêu đề và bản nháp.
• AI Alt Text: Tự động tạo văn bản thay thế (alt text) cho hình ảnh.
• AI SEO: Gợi ý tiêu đề meta và mô tả dựa trên nội dung của bạn.

Mô hình mang theo khóa của riêng bạn có nghĩa là bạn kiểm soát chi phí và tránh bị phụ thuộc vào nhà cung cấp về giá AI. Storyblok cũng đang phát triển tính năng "Concept Room" nhằm kết hợp ý tưởng với lập kế hoạch nội dung trực quan.

Quốc tế hóa với Storyblok

Storyblok xử lý i18n thông qua dịch thuật cấp trường (field-level translation), nghĩa là bạn có một Story với các trường đã được dịch cho mỗi ngôn ngữ thay vì sao chép toàn bộ tài liệu cho mỗi ngôn ngữ. Điều này khác biệt cơ bản so với Contentful và Sanity, những nền tảng sử dụng dịch thuật cấp tài liệu, và nó tạo ra sự khác biệt lớn khi mở rộng quy mô.

Tại sao dịch thuật cấp trường lại thắng thế? Hãy xem xét một trang web marketing bằng 10 ngôn ngữ. Với i18n cấp tài liệu (Contentful, Sanity), bạn sẽ có 10 tài liệu riêng biệt cho mỗi trang. Thay đổi bố cục? Cập nhật 10 tài liệu. Với cách tiếp cận cấp trường của Storyblok, bạn chỉ có một Story. Cấu trúc giữ nguyên, chỉ các trường văn bản có biến thể ngôn ngữ. Thay đổi bố cục một lần, tất cả 10 ngôn ngữ đều được cập nhật.

AI Translate làm cho điều này thậm chí còn nhanh hơn. Biên tập viên viết nội dung bằng ngôn ngữ chính của họ, nhấp vào "Translate" và AI điền vào các ngôn ngữ khác bằng cách sử dụng nhà cung cấp OpenAI hoặc Gemini đã kết nối của họ. Nó hỗ trợ hơn 34 ngôn ngữ.

Đây là cách bạn lấy nội dung đã dịch:

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

Tham số language thực hiện tất cả công việc. Các trường chưa được dịch tự động quay lại ngôn ngữ mặc định, vì vậy bạn không bao giờ gặp phải trang bị lỗi do dịch thuật không đầy đủ.

Storyblok so với các lựa chọn thay thế

Sau khi thử nghiệm cả năm CMS này cho các dự án của chính mình, dưới đây là cách chúng so sánh về các tính năng thực sự quan trọng đối với quyết định dự án:

Chọn Storyblok nếu dự án của bạn liên quan đến cả developer và biên tập viên nội dung không kỹ thuật, những người cần nhìn thấy thay đổi một cách trực quan. Trình soạn thảo trực quan là vô đối, và i18n cấp trường là tốt nhất trong lớp cho các trang web đa ngôn ngữ.

Chọn Sanity nếu đội ngũ của bạn thiên về developer và bạn muốn sự linh hoạt tối đa về schema. Cách tiếp cận schema-as-code của Sanity và ngôn ngữ truy vấn GROQ mang lại cho bạn nhiều quyền kiểm soát hơn, nhưng biên tập viên sẽ nhận được giao diện dựa trên biểu mẫu, không phải bản xem trước trực quan. Đọc hướng dẫn Sanity của chúng tôi để có bức tranh toàn cảnh.

Chọn Strapi hoặc Payload nếu bạn cần tự lưu trữ hoặc kiểm soát mã nguồn mở. Cả Storyblok, Sanity và Contentful đều không cho phép bạn chạy CMS trên máy chủ của riêng mình. Strapi và Payload thì có. Kiểm tra hướng dẫn Strapi của chúng tôi hoặc hướng dẫn Payload của chúng tôi để biết chi tiết.

Chọn Contentful nếu bạn đang ở trong môi trường enterprise coi trọng sự trưởng thành của hệ sinh thái, các tích hợp marketplace phong phú và bộ công cụ developer đã được thiết lập. Đọc hướng dẫn Contentful của chúng tôi.

Để có bản so sánh đầy đủ với chấm điểm và khuyến nghị dự án thực tế, hãy xem bài so sánh CMS headless đầy đủ của chúng tôi.

Khi nào KHÔNG nên sử dụng Storyblok

Mọi CMS đều có những điểm gây cản trở đối với một số dự án nhất định. Dưới đây là những điểm của Storyblok:

Bạn cần tự lưu trữ. Storyblok chỉ là SaaS, không có tùy chọn on-premises, không có Docker image, không có triển khai tự quản lý. Nếu tổ chức của bạn yêu cầu chủ quyền dữ liệu hoặc lưu trữ on-prem, hãy xem xét Payload cho các dự án tự lưu trữ hoặc Strapi thay thế.

Bạn muốn schema-as-code. Sơ đồ component của Storyblok được định nghĩa trong giao diện dashboard, không phải trong codebase của bạn. Bạn có thể xuất và nhập chúng thông qua Management API, nhưng chúng không tồn tại trong kho Git của bạn như nguồn sự thật duy nhất. Nếu các schema được kiểm soát phiên bản quan trọng đối với đội ngũ của bạn, Sanity và Payload đều cung cấp mô hình hóa nội dung code-first.

Ngân sách hạn chế ở quy mô lớn. Giá của Storyblok hoạt động tốt cho các đội ngũ nhỏ và vừa. Nhưng nếu bạn đang chạy 15+ không gian làm việc trên nhiều thương hiệu với hàng chục biên tập viên, chi phí sẽ tăng lên. Strapi hoặc Payload tự lưu trữ loại bỏ hoàn toàn chi phí cấp phép CMS.

Đội ngũ của bạn toàn là developer. Trình soạn thảo trực quan là tính năng cao cấp của Storyblok. Nếu không ai trong đội ngũ của bạn cần xem trước trực quan, nếu mọi người đều thoải mái chỉnh sửa JSON hoặc sử dụng giao diện dựa trên biểu mẫu, bạn đang trả tiền cho một tính năng mà bạn sẽ không sử dụng.

Bạn cần truy cập trực tiếp vào cơ sở dữ liệu. Storyblok trừu tượng hóa hoàn toàn lớp lưu trữ của nó. Không có kết nối Postgres, không có truy vấn SQL, không có truy cập dữ liệu trực tiếp. Nếu dự án của bạn yêu cầu các truy vấn cơ sở dữ liệu tùy chỉnh hoặc join với các nguồn dữ liệu khác ở cấp độ cơ sở dữ liệu, Payload (xây dựng trên MongoDB/Postgres) cung cấp điều đó cho bạn.

Theo kinh nghiệm của chúng tôi khi xây dựng trên nhiều CMS, Storyblok tỏa sáng khi developer và biên tập viên nội dung cộng tác trong cùng một dự án. Nếu đội ngũ của bạn toàn là developer, khoản phí trả thêm cho trình soạn thảo trực quan là không đáng.

Bắt đầu với Storyblok

Con đường nhanh nhất từ con số 0 đến một dự án Storyblok hoạt động mất khoảng 30 phút với Blueprints, hoặc một giờ nếu không có chúng. Dưới đây là trình tự:

Bước 1: Đăng ký. Tạo tài khoản miễn phí tại storyblok.com. Gói Starter cung cấp cho bạn một không gian làm việc với 25K lệnh gọi API/tháng, đủ cho phát triển và tạo nguyên mẫu.

Bước 2: Chọn Blueprint hoặc bắt đầu trống. Nếu bạn muốn một dự án được cấu hình sẵn, hãy chọn một Blueprint (Core cho tối thiểu, Business cho sẵn sàng production). Nếu bạn thích xây dựng từ đầu, hãy tạo một không gian làm việc trống.

Bước 3: Kết nối frontend của bạn. Storyblok có SDK và bộ khởi động chính thức cho Next.js, Nuxt, Astro, SvelteKit, Remix, Angular và Gatsby. Đối với dự án Next.js App Router:

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

Bước 4: Thiết lập URL xem trước cho trình soạn thảo trực quan. Trong cài đặt không gian làm việc Storyblok của bạn, đặt URL xem trước trỏ đến máy chủ dev cục bộ của bạn (ví dụ: https://localhost:3000/). Trình soạn thảo trực quan cần HTTPS, hãy sử dụng next dev --experimental-https hoặc một công cụ như mkcert.

Bước 5: Định nghĩa Blok đầu tiên của bạn và tạo một Story. Đi tới "Components" trong bảng điều khiển Storyblok, tạo một content type "Page" với trường body, sau đó tạo một Blok "Hero" có thể lồng nhau. Tạo Story đầu tiên của bạn bằng cách sử dụng content type "Page". Kéo Blok Hero vào. Xem nó hiển thị trong trình soạn thảo trực quan.

Đối với các hướng dẫn khởi động nhanh cụ thể cho từng framework, Storyblok duy trì một trang công nghệ với các hướng dẫn thiết lập cho mọi framework được hỗ trợ. Nếu bạn đang phân vân giữa các framework cho frontend của mình, bài so sánh Next.js vs Remix của chúng tôi đề cập đến các đánh đổi, và hướng dẫn Vercel vs Netlify giúp đưa ra quyết định về nền tảng triển khai.

Câu hỏi thường gặp

Storyblok CMS là gì?

Storyblok là một hệ thống quản lý nội dung headless với trình soạn thảo trực quan tích hợp sẵn, được thành lập năm 2017 tại Linz, Áo. Nó sử dụng kiến trúc dựa trên component gọi là Bloks để mô hình hóa nội dung và phân phối nội dung thông qua API REST và GraphQL. Storyblok được các công ty như Adidas, Tesla và Oatly sử dụng cho các trang web, ứng dụng và phân phối nội dung đa kênh.

Storyblok có miễn phí không?

Có, Storyblok cung cấp gói Starter miễn phí với một người dùng, một không gian làm việc và 25.000 lệnh gọi API mỗi tháng. Các gói trả phí bắt đầu từ $99/tháng cho cấp Growth với năm người dùng. Storyblok cũng cung cấp bản dùng thử miễn phí 45 ngày cho gói Growth Plus, rộng rãi hơn hầu hết các đối thủ cạnh tranh.

Trình soạn thảo trực quan của Storyblok hoạt động như thế nào?

Trình soạn thảo trực quan của Storyblok tải ứng dụng frontend của bạn bên trong một iframe và phủ lên các vùng có thể chỉnh sửa trên mỗi component (Blok). Biên tập viên nội dung nhấp trực tiếp vào các phần tử trang để chỉnh sửa chúng và thấy các thay đổi trong thời gian thực. Nó yêu cầu thư viện JavaScript StoryblokBridge trong code frontend của bạn để kết nối iframe với giao diện chỉnh sửa của Storyblok.

Storyblok có tốt hơn Contentful không?

Tùy thuộc vào ưu tiên của bạn. Storyblok cung cấp trình soạn thảo trực quan vượt trội và quốc tế hóa cấp trường, khiến nó tốt hơn cho các đội ngũ marketing quản lý nội dung đa ngôn ngữ. Contentful có hệ sinh thái trưởng thành hơn, marketplace tích hợp lớn hơn và được doanh nghiệp áp dụng sâu rộng hơn. Cả hai đều chỉ là SaaS với cấu trúc giá tương tự.

Storyblok hỗ trợ những framework nào?

Storyblok cung cấp SDK và bộ mẫu khởi động chính thức cho Next.js, Nuxt, Astro, SvelteKit, Remix, Angular và Gatsby. SDK React (@storyblok/react) và SDK Vue (@storyblok/vue) bao phủ hai hệ sinh thái phổ biến nhất. Blueprints hiện hỗ trợ Next.js, Nuxt và Astro để thiết lập dự án có hướng dẫn.

Bạn có thể tự lưu trữ Storyblok không?

Không. Storyblok là nền tảng chỉ SaaS, không có tùy chọn tự lưu trữ hoặc on-premises. Nếu tự lưu trữ là yêu cầu đối với dự án của bạn, vì lý do chủ quyền dữ liệu, tuân thủ hoặc chi phí, hãy cân nhắc Strapi (mã nguồn mở, dựa trên Node.js) hoặc Payload CMS (mã nguồn mở, native Next.js) như các lựa chọn thay thế hỗ trợ triển khai tự lưu trữ đầy đủ.

FlowMotion trong Storyblok là gì?

FlowMotion là tính năng tự động hóa quy trình làm việc của Storyblok, ra mắt ngày 31 tháng 3 năm 2026. Được xây dựng trên n8n được quản lý, nó kết nối với hơn 500 tích hợp và tự động hóa các hoạt động nội dung như kích hoạt dịch thuật, thông báo cho các bên liên quan và xuất bản đa nền tảng. FlowMotion có sẵn dưới dạng tiện ích bổ sung Enterprise/Elite, không bao gồm trong các gói Growth hoặc Growth Plus.

Storyblok xử lý quốc tế hóa như thế nào?

Storyblok sử dụng dịch thuật cấp trường, nghĩa là một Story chứa các biến thể đã dịch của mỗi trường thay vì sao chép toàn bộ tài liệu cho mỗi ngôn ngữ. Cách tiếp cận này mở rộng quy mô tốt hơn so với i18n cấp tài liệu (được sử dụng bởi Contentful và Sanity) cho các trang web có nhiều ngôn ngữ. AI Translate hỗ trợ hơn 34 ngôn ngữ bằng cách sử dụng khóa API OpenAI hoặc Gemini của riêng bạn.

Ai sử dụng Storyblok?

Danh sách khách hàng của Storyblok bao gồm Adidas, Tesla, Oatly, Virgin Media O2, dm-drogerie markt, Spendesk và Panini. Nền tảng này phục vụ cả các tổ chức enterprise quản lý hoạt động nội dung đa thị trường và các startup đang phát triển cần trình soạn thảo trực quan để trao quyền cho các đội ngũ nội dung không kỹ thuật. Storyblok đã huy động tổng cộng 138 triệu USD vốn đầu tư thông qua vòng Series C.

Storyblok Blueprints là gì?

Blueprints là các mẫu thiết lập dự án có hướng dẫn được Storyblok ra mắt vào tháng 7 năm 2025. Chọn Core Blueprint (bộ khởi động tối thiểu) hoặc Business Blueprint (sẵn sàng production với các component được xây dựng trước). Chọn framework của bạn, Next.js, Nuxt hoặc Astro, và Storyblok tạo một kho lưu trữ GitHub được kết nối với pipeline triển khai lên Vercel hoặc Netlify trong vài phút.