Response Transformer

@synchronized-studio/response-transformer is the lighter integration path for CMS Assets. It rewrites CMS asset URLs in your API responses so they point to your tenant proxy domain instead of the origin CDN.

Use this package when you want asset URL rewriting without routing CMS API requests through the /~api proxy. If you want the full package (API proxy + asset rewriting), use @synchronized-studio/cmsassets-core instead.

Installation

npm install @synchronized-studio/response-transformer

When to use Response Transformer

• You only need asset proxy (media delivery and edge caching)
• Your CMS API calls are already handled and you don't want to change them
• You want the smallest integration footprint
• You prefer to rewrite URLs after fetching rather than proxying the entire request

If you also want server-side token injection, API response caching, and automatic URL rewriting before responses reach the app, use cmsassets-core with createCmsAssetsFetch instead.

Usage by CMS

Prismic

import { transformPrismicAssetUrls } from "@synchronized-studio/response-transformer"

const data = await prismicClient.getAllByType("page")

const transformed = transformPrismicAssetUrls(data, {
  repository: "your-repo",
  cmsAssetsUrl: "https://your-slug.cmsassets.com"
})

Contentful

import { transformContentfulAssetUrls } from "@synchronized-studio/response-transformer"

const entries = await contentfulClient.getEntries()

const transformed = transformContentfulAssetUrls(entries, {
  spaceId: "your-space-id",
  cmsAssetsUrl: "https://your-slug.cmsassets.com"
})

Shopify

import { transformShopifyAssetUrls } from "@synchronized-studio/response-transformer"

const data = await shopifyClient.request(productsQuery)

const transformed = transformShopifyAssetUrls(data, {
  storeDomain: "your-store.myshopify.com",
  cmsAssetsUrl: "https://your-slug.cmsassets.com"
})

Cloudinary

import { transformCloudinaryAssetUrls } from "@synchronized-studio/response-transformer"

const data = await cloudinaryClient.search.expression("folder:products").execute()

const transformed = transformCloudinaryAssetUrls(data, {
  cloudName: "my-cloud",
  cmsAssetsUrl: "https://your-slug.cmsassets.com"
})

Imgix

import { transformImgixAssetUrls } from "@synchronized-studio/response-transformer"

const data = await fetchCmsData()

const transformed = transformImgixAssetUrls(data, {
  imgixDomain: "my-source.imgix.net",
  cmsAssetsUrl: "https://your-slug.cmsassets.com"
})

Storyblok

import { transformCmsAssetUrls } from "@synchronized-studio/response-transformer"

const response = await fetch(`https://api.storyblok.com/v2/cdn/stories?token=${token}`)
const data = await response.json()

const transformed = transformCmsAssetUrls(data, {
  cms: "storyblok",
  identifier: "123456",
  cmsAssetsUrl: "https://your-slug.cmsassets.com"
})

Environment variable

Instead of passing cmsAssetsUrl directly, you can set the CMS_ASSETS_URL environment variable:

CMS_ASSETS_URL=https://your-slug.cmsassets.com

The transformer reads this automatically. In production, http:// URLs are upgraded to https://.

Automating with the CLI Agent

Instead of adding transformer calls manually, you can use the CLI Agent to scan your project and patch files automatically:

npx @synchronized-studio/cmsassets-agent init

The agent detects your framework and CMS, installs the transformer, and patches your source files. See CLI Agent for details.

Next steps

• Getting Started — Full setup walkthrough
• cmsassets-core SDK — The full API proxy + asset proxy integration
• CLI Agent — Automate transformer integration
• How It Works — Understand the proxy architecture