Storyblok Integration

Cachely has first-class edge-proxy support for Storyblok: every regional CDN variant is rewritten and served from your your-tenant.cachely.io domain.

SDK runtime status: the @cachely-io/sdk runtime ships built-in provider: "contentful" and provider: "prismic". A built-in provider: "storyblok" is not available yet — use the createGenericProvider integration shown below. The Cachely CLI will detect Storyblok and write a cachely.config.json, but it will not patch your client; copy the snippet from this page.

Supported URL patterns

Storyblok serves assets from regional CDN hosts. Cachely handles all of them:

Europe (default):

https://a.storyblok.com/f/123456/1920x1080/abc123def/photo.jpg

US:

https://a-us.storyblok.com/f/123456/1920x1080/abc123def/photo.jpg

Other regions: a-ap.storyblok.com, a-ca.storyblok.com, a2.storyblok.com

All are rewritten to your tenant URL:

https://your-tenant.cachely.io/1920x1080/abc123def/photo.jpg

Tenant setup

When creating your tenant, select Storyblok as the CMS type and provide your space ID:

Field	Value
CMS	Storyblok
Space ID	`123456`
Website domain	`your-site.com`

Your numeric space ID can be found in the Storyblok dashboard under Settings → General.

Note: The space ID is the numeric identifier, not the space name. For example, if your asset URLs look like https://a.storyblok.com/f/123456/..., your space ID is 123456.

Cachely SDK

Install the Cachely SDK to route Storyblok API and asset requests through your edge domain:

npm install @cachely-io/sdk

Basic usage

Storyblok is supported via the SDK's generic provider:

import { createGenericProvider, createCachelyFetch } from '@cachely-io/sdk'

const storyblok = createGenericProvider({
  id: 'storyblok',
  apiHosts: ['api.storyblok.com'],
  assetHosts: [
    'a.storyblok.com',
    'a-us.storyblok.com',
    'a-ap.storyblok.com',
    'a-ca.storyblok.com',
    'a2.storyblok.com',
  ],
})

const cachelyFetch = createCachelyFetch({
  tenant: 'your-tenant',
  provider: storyblok,
})

// Use as a drop-in fetch — both API and asset URLs are rewritten

Rewriting URLs without intercepting fetch

If you can't replace the fetch implementation, use createCachelyUrlRewriter:

import { createCachelyUrlRewriter, createGenericProvider } from '@cachely-io/sdk'

const storyblok = createGenericProvider({
  id: 'storyblok',
  apiHosts: ['api.storyblok.com'],
  assetHosts: ['a.storyblok.com'],
})

const rewrite = createCachelyUrlRewriter({ tenant: 'your-tenant', provider: storyblok })

const { url } = rewrite('https://a.storyblok.com/f/123456/1920x1080/abc123/photo.jpg')
// → https://your-tenant.cachely.io/f/123456/1920x1080/abc123/photo.jpg

If your Storyblok space is hosted in a specific region, Cachely automatically handles all regional CDN variants. No additional configuration is required — the edge worker matches URLs from any Storyblok CDN host (a.storyblok.com, a-us.storyblok.com, a-ap.storyblok.com, a-ca.storyblok.com, a2.storyblok.com).

Image optimization

Storyblok supports image transformations via URL parameters:

https://a.storyblok.com/f/123456/1920x1080/abc123/photo.jpg/m/600x400/filters:quality(80)

These transformation paths are preserved through the proxy:

https://your-tenant.cachely.io/1920x1080/abc123/photo.jpg/m/600x400/filters:quality(80)

For options like disabling proxying selectively, classifying URLs by hand, or registering custom providers, see the Cachely SDK reference.