SDKs overview

Storyblok provides Software Development Kits (SDKs) and client libraries to facilitate the integration of its headless Content Management System (CMS) with various frontend frameworks and programming languages. These SDKs are designed to streamline content retrieval from the Storyblok Content Delivery API, enabling developers to build dynamic web and mobile applications. By abstracting the underlying HTTP requests and response parsing, Storyblok SDKs allow developers to focus on application logic rather than low-level API interactions. The comprehensive documentation for Storyblok's APIs and SDKs is available on their official documentation portal.

The SDK ecosystem includes officially maintained libraries for popular JavaScript frameworks, server-side languages, and mobile development environments. Additionally, the Storyblok community contributes and maintains a range of unofficial libraries and integrations, extending its compatibility. This approach supports a wide array of development stacks, from traditional server-rendered applications to modern single-page applications (SPAs) and mobile clients.

Official SDKs by language

Storyblok maintains official SDKs and client libraries that provide a structured way to interact with its Content Delivery API. These libraries are typically optimized for performance and integrate best practices for content fetching and caching. Each SDK offers language-specific methods for retrieving content, handling internationalization, and integrating with the Storyblok Visual Editor for a seamless content authoring experience. The official SDKs are designed to be framework-agnostic where possible, or specifically tailored for deep integration with particular frameworks like React, Vue, and Next.js.

The following table outlines the key official SDKs and their respective packages and installation commands:

Language/Framework Package/Library Installation Command (NPM/Composer/Pip) Maturity
JavaScript (Core) @storyblok/js npm install @storyblok/js or yarn add @storyblok/js Stable
React @storyblok/react npm install @storyblok/react or yarn add @storyblok/react Stable
Vue @storyblok/vue npm install @storyblok/vue or yarn add @storyblok/vue Stable
Angular @storyblok/angular npm install @storyblok/angular or yarn add @storyblok/angular Stable
Next.js @storyblok/next npm install @storyblok/next or yarn add @storyblok/next Stable
Nuxt.js @storyblok/nuxt npm install @storyblok/nuxt or yarn add @storyblok/nuxt Stable
Gatsby gatsby-source-storyblok npm install gatsby-source-storyblok Stable
Svelte @storyblok/svelte npm install @storyblok/svelte or yarn add @storyblok/svelte Stable
PHP storyblok/php-client composer require storyblok/php-client Stable
Ruby storyblok_ruby gem install storyblok_ruby Stable
Python storyblok-python-client pip install storyblok-python-client Stable
Dart (Flutter) storyblok_flutter (See Pub.dev for latest install) Stable
Swift StoryblokKit (See GitHub for latest install) Stable
Kotlin storyblok-kotlin (See GitHub for latest install) Stable

For detailed usage and configuration options for each SDK, refer to the specific Storyblok SDK documentation.

Installation

Installation of Storyblok SDKs typically follows standard package manager procedures for each respective language or framework. For JavaScript-based projects, npm or Yarn are the primary tools. For PHP, Composer is used, while Python projects utilize pip. Mobile development with Dart/Flutter or Swift involves their respective dependency management systems.

JavaScript/TypeScript (npm/Yarn)

For most frontend frameworks and Node.js projects, the installation process involves adding the relevant Storyblok package using npm or Yarn. For example, to install the core JavaScript SDK:

npm install @storyblok/js
# or
yarn add @storyblok/js

For framework-specific integrations, such as with React:

npm install @storyblok/react
# or
yarn add @storyblok/react

PHP (Composer)

PHP projects using Composer can add the Storyblok client:

composer require storyblok/php-client

Python (pip)

Python developers can install the official client via pip:

pip install storyblok-python-client

Other Languages

For other languages like Ruby, Dart (Flutter), Swift, and Kotlin, the installation instructions are typically found within their dedicated documentation sections on the Storyblok website or their respective package repositories (e.g., Rubygems for Ruby, Pub.dev for Dart, GitHub for Swift/Kotlin). Developers should consult the Storyblok SDK documentation for the most current and language-specific installation guides.

Quickstart example

This quickstart example demonstrates how to fetch content using the core @storyblok/js SDK in a basic JavaScript environment. It illustrates initializing the client and making a request to retrieve content from a Storyblok space.

JavaScript Quickstart

First, ensure you have installed the @storyblok/js package as described in the installation section.

import { storyblokInit, apiPlugin } from '@storyblok/js';

// Initialize Storyblok client
storyblokInit({
  accessToken: 'YOUR_STORYBLOK_PREVIEW_TOKEN', // Use your preview token for development
  use: [apiPlugin],
});

// Function to fetch a story
async function fetchStory(slug) {
  const { storyblokApi } = window;
  if (!storyblokApi) {
    console.error('Storyblok API not initialized.');
    return null;
  }

  try {
    const { data } = await storyblokApi.get(`cdn/stories/${slug}`, {
      version: 'draft', // Use 'published' for production
    });
    console.log('Fetched Story:', data.story);
    return data.story;
  } catch (error) {
    console.error('Error fetching story:', error);
    return null;
  }
}

// Example usage: fetch a story with a specific slug
fetchStory('home'); // Replace 'home' with the slug of your Storyblok story

This example initializes the Storyblok JavaScript client with an access token and defines an asynchronous function fetchStory to retrieve content based on a given slug. The version: 'draft' parameter is used for content currently in the editor, while 'published' should be used for live production content. The accessToken is crucial for authenticating your requests to the Storyblok Content Delivery API. You can obtain your preview and public tokens from your Storyblok space settings, as detailed in the Storyblok API-based SDK guide.

Community libraries

Beyond the official SDKs, the Storyblok community has developed and maintains a variety of libraries and integrations. These community-driven projects often address niche use cases, provide language support for less common environments, or offer specialized tooling that complements the official offerings. While not officially supported by Storyblok, these libraries can be valuable resources for developers seeking alternative integration paths or specific functionalities.

Examples of community contributions might include:

  • Third-party framework adapters: Libraries tailored for frameworks not officially supported, or offering different approaches to integration.
  • CLI tools: Command-line interface utilities for managing Storyblok content, components, or spaces programmatically.
  • Template engines: Integrations with specific templating languages to render Storyblok content.
  • Boilerplates and starters: Project templates pre-configured with Storyblok integration for rapid project setup.

Developers interested in community contributions should typically search platforms like GitHub, npm, or the Storyblok Discord server. When using community libraries, it is advisable to review their maintenance status, documentation, and community support. The Storyblok developer community forum is a good place to find and discuss these community-contributed libraries.

For example, while Storyblok offers official support for many JavaScript frameworks, the broader JavaScript ecosystem benefits from a wide range of open-source libraries. Resources like the Mozilla Developer Network's JavaScript reference can provide foundational knowledge for working with any JavaScript-based SDK, including those from Storyblok or its community.