Playground

Storyblok Playground

Generic Recipe

Run real requests through the Cachely edge proxy and see how server-side token injection, edge caching, asset URL rewriting, preview bypass, and AI transforms work for Storyblok.

Open docs

Generic fetch recipe — proxy Storyblok CDN stories through your tenant domain using createGenericProvider. No dedicated SDK submodule yet.

CDN stories endpoint via /~apiPreview/draft mode via bypassJSON content is AI-transform eligibleEdge caching for published stories

Integration facts (verified against the SDK)

SDK module
@cachely-io/sdk (generic recipe)
Built-in provider id
No — must use createGenericProvider (provider: 'storyblok' would throw)
Real SDK exports used
createGenericProvidercreateCachelyFetch
CLI setup
Writes a generic createGenericProvider recipe (the named "setup storyblok" subcommand records config only).

Recommended: Generic recipe — createGenericProvider + createCachelyFetch (no dedicated submodule)

✓ Supported ◐ Partial — Not applicable
Generic Recipe
  • ✓

    API proxy

    Supported
    What it does
    Routes CMS API calls through the Cachely edge.
    Use it for
    Hiding tokens, caching CMS responses, using one tenant domain.
    Benefit
    Faster repeated reads, safer public apps, unified delivery.
  • ✓

    Server-side token injection

    Supported
    What it does
    Keeps CMS credentials on the edge/server side.
    Use it for
    APIs that normally require private tokens.
    Benefit
    The token never ships to the browser.
  • ✓

    Edge cache

    Supported
    What it does
    Caches CMS/API responses at the edge.
    Use it for
    Repeated content reads and high-traffic pages.
    Benefit
    Lower origin/CMS usage, faster responses, better resilience.
  • ✓

    Asset URL rewriting

    Supported
    What it does
    Rewrites CMS asset URLs inside JSON responses to your tenant domain.
    Use it for
    Serving images/assets from the same delivery layer.
    Benefit
    Fewer third-party domains, edge delivery, simpler security policy.
  • ✓

    Preview / bypass mode

    Supported
    What it does
    Skips the cache for fresh CMS/editor preview content.
    Use it for
    Preview flows, draft content, editor QA.
    Benefit
    Editors see fresh content without disabling production cache.
  • ✓

    AI transforms

    Supported
    What it does
    Applies a named AI transform profile to eligible JSON/text responses.
    Use it for
    Localization, summaries, formatting, content adaptation.
    Benefit
    Transform responses without changing the CMS or app code.
  • ◐

    Native SDK integration

    Partial
    What it does
    Wraps the provider SDK and automatically proxies its requests.
    Use it for
    Nuxt/Next apps that already use the CMS SDK.
    Benefit
    Minimal code changes, safer defaults.

    No dedicated submodule yet — integrate via the generic recipe.

Integration

Ways to connect Storyblok

The recommended paths for Storyblok are shown first. Less common options are tucked under “Other options”.

CLI setup

Recommended

npx @cachely-io/sdk setup auto-detects your framework and writes a generic createGenericProvider recipe you can adjust.

Code changes
None by hand — the CLI generates them.
Cachely handles
Framework + CMS detection, a generic createGenericProvider recipe, env + proxy config.

Limitations: The named "setup storyblok" subcommand currently records config + a docs link only; the recipe is written by the bare "setup" (auto-detect).

Terminal
npx @cachely-io/sdk setup

Generic provider recipe

Recommended

No dedicated @cachely-io/sdk/storyblok submodule yet — wrap Storyblok's host with createGenericProvider + createCachelyFetch.

Code changes
Wrap your fetch with createCachelyFetch + createGenericProvider.
Cachely handles
API + asset proxying, edge caching, AI transforms.

Limitations: 'storyblok' is not a built-in provider id — pass a createGenericProvider definition, not a string (a bare string would throw "Unknown provider").

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

// No @cachely-io/sdk/storyblok submodule exists today — use the generic recipe.
const provider = createGenericProvider({
  id: 'storyblok',
  apiHosts: ['api.storyblok.com'],
  assetHosts: ['a.storyblok.com'],
})

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

const res = await cachelyFetch('https://api.storyblok.com/v2/cdn/stories?version=published')
Mode:Standard proxied request with edge cache

Request controls

Preset:

Original

https://api.storyblok.com/v2/cdn/stories?version=published

Proxied (preview)

https://storyblok.cachely.io/~api/v2/cdn/stories?version=published

Sends this request through storyblok.cachely.io. Cachely injects the token server-side, rewrites eligible asset URLs, and returns cache debug headers.

Fetch modes

Direct

Standard proxied request. Best for production traffic — the edge cache serves repeat reads.

Bypass Cache

Adds ?preview=1 so the proxy returns fresh content. Use for CMS preview/editor flows.

AI Transform

Applies a named profile to eligible JSON/text content. Transformed responses are cached separately. Skipped for metadata endpoints.

Integration: Generic recipe — no dedicated @cachely-io/sdk/storyblok submodule exists today. Use createGenericProvider with the provider host.

SDK Referenceupdates as you change modes
storyblok + @cachely-io/sdk
import { createGenericProvider, createCachelyFetch } from '@cachely-io/sdk'

// No @cachely-io/sdk/storyblok submodule exists today — use the generic recipe.
const provider = createGenericProvider({
  id: 'storyblok',
  apiHosts: ['api.storyblok.com'],
  assetHosts: ['a.storyblok.com'],
})

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

const res = await cachelyFetch('https://api.storyblok.com/v2/cdn/stories?version=published')
Storyblok — Storyblok is a generic recipe — no @cachely-io/sdk/storyblok submodule exists today. Use createGenericProvider with api.storyblok.com.

SDK snippets

Storyblok code examples

Copy-paste examples for Storyblok. Pick a variant below.

No dedicated @cachely-io/sdk/storyblok submodule yet — wrap the API host with createGenericProvider + createCachelyFetch.

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

// No @cachely-io/sdk/storyblok submodule exists today — use the generic recipe.
const provider = createGenericProvider({
  id: 'storyblok',
  apiHosts: ['api.storyblok.com'],
  assetHosts: ['a.storyblok.com'],
})

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

const res = await cachelyFetch('https://api.storyblok.com/v2/cdn/stories?version=published')