Storyblok JS Client

7.3.0 verified Sat Apr 25 auth: no javascript

Universal JavaScript SDK for Storyblok's Content Delivery and Management APIs. Version 7.3.0 supports Node.js 18+ and modern browsers, with full TypeScript types included. Released as part of the monoblok monorepo, this package is the core client for fetching and manipulating Storyblok content. It provides a thin wrapper around the REST APIs, with built-in caching, rich text rendering, and component resolver support. Key differentiators: isomorphic (works in Node and browser without polyfills), first-class TypeScript support, and seamless integration with Storyblok's visual editor and preview features. Alternatives like @storyblok/js offer framework-agnostic helpers, but this client is the foundational SDK.

Common errors

error TypeError: fetch is not a function ↓

cause Node.js version < 18 does not have native fetch, and no polyfill was provided.

fix

Install isomorphic-fetch: npm install isomorphic-fetch, then add import 'isomorphic-fetch' at the top of your entry file.

error Cannot find module 'storyblok-js-client' ↓

cause Package not installed or missing from node_modules.

fix

Run npm install storyblok-js-client and ensure your import path is correct.

error StoryblokClient is not a constructor ↓

cause Using CommonJS require without accessing the default export.

fix

Use const StoryblokClient = require('storyblok-js-client').default; instead of const { StoryblokClient } = require('storyblok-js-client');.

Warnings

breaking Version 7.0.0 dropped support for Node.js < 18 and removed the built-in polyfill for fetch. Users on older Node versions must provide a fetch polyfill like isomorphic-fetch. ↓

fix Upgrade to Node 18+ or install isomorphic-fetch and import it before using the client.

breaking Version 6.0.0 restructured exports: RichTextResolver moved from a separate package to a named export. ↓

fix Update imports: import { RichTextResolver } from 'storyblok-js-client' instead of requiring it from a separate package.

deprecated The method `get` is deprecated in favor of dedicated methods like `getStory`, `getStories`, `getDataSource`, etc. ↓

fix Replace `client.get('cdn/stories/home', ...)` with `client.getStory('home', ...)`.

gotcha When using CommonJS require(), the default export is nested under `.default`. Many users mistakenly import as `const StoryblokClient = require('storyblok-js-client')` which returns an object with a `default` property. ↓

fix Use `const StoryblokClient = require('storyblok-js-client').default;` or switch to ESM imports.

Install

npm install storyblok-js-client

yarn add storyblok-js-client

pnpm add storyblok-js-client

Imports

default (StoryblokClient)
wrong
```
const { StoryblokClient } = require('storyblok-js-client')
```
correct
```
import StoryblokClient from 'storyblok-js-client'
```
Default export is the class. CommonJS require works with default export: const StoryblokClient = require('storyblok-js-client').default.
StoryblokClient (named)
wrong
```
import StoryblokClient from 'storyblok-js-client'
```
correct
```
import { StoryblokClient } from 'storyblok-js-client'
```
Named export also available. Both work, but named export is preferred for clarity.

RichTextResolver

wrong

import RichTextResolver from 'storyblok-js-client'

correct

import { RichTextResolver } from 'storyblok-js-client'

RichTextResolver is a named export, not default. Available since v5.

Quickstart

Initializes the Storyblok client with an access token and in-memory caching, then fetches a story by slug in draft version.

import StoryblokClient from 'storyblok-js-client';

const client = new StoryblokClient({
  accessToken: process.env.STORYBLOK_ACCESS_TOKEN ?? '',
  cache: { type: 'memory', clear: 'auto' },
});

async function main() {
  try {
    const response = await client.getStory('home', { version: 'draft' });
    console.log('Story:', response.data.story);
  } catch (error) {
    console.error('Error:', error);
  }
}

main();