Storyblok Has a Free API — Here's How to Use It for Visual Content Management

Storyblok is a headless CMS with a visual editor and a generous free tier. Its Content Delivery API and Management API let you build content-driven applications with ease.

Getting Started

Sign up at storyblok.com and create a space. Your API token is in Settings → Access Tokens.

Content Delivery API

import StoryblokClient from "storyblok-js-client";

const Storyblok = new StoryblokClient({
  accessToken: "your-preview-token"
});

// Get a single story
const { data } = await Storyblok.get("cdn/stories/home", {
  version: "draft"
});
console.log(data.story.content);

// List all stories
const response = await Storyblok.get("cdn/stories", {
  version: "published",
  per_page: 25,
  page: 1
});
response.data.stories.forEach(s => console.log(s.name));

Filtering and Sorting

// Filter by content type
const blogs = await Storyblok.get("cdn/stories", {
  content_type: "blog_post",
  sort_by: "created_at:desc",
  filter_query: {
    category: { in: "tech,dev" }
  }
});

Management API — Create Content

const mgmtClient = new StoryblokClient({
  oauthToken: "your-management-token"
});

await mgmtClient.post(`spaces/${spaceId}/stories`, {
  story: {
    name: "New Article",
    slug: "new-article",
    content: {
      component: "blog_post",
      title: "Created via API",
      body: "This content was created programmatically"
    }
  }
});

Visual Editor Integration

Storyblok's visual editor lets content editors drag-and-drop components while developers maintain full control over rendering. Works with React, Vue, Nuxt, Next.js, and more.

Use Cases

• Multi-language sites: Built-in i18n with field-level translations
• Component-based pages: Editors compose pages from developer-defined blocks
• E-commerce: Combine product data with rich editorial content

---

Need to extract or automate web content at scale? Check out my web scraping tools on Apify — no coding required. Or email me at [e-mail] for custom solutions.