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.