End CMS Asset Chaos

Reduce CMS bandwidth costs, eliminate overages, and serve assets through your own global edge proxy.

Platform totals

284 Requests served

859 MB Bandwidth proxied

$0.22 Saved this month

How It Works

A Simple Flow for Teams and Clients

CMS Assets places your edge proxy between your site and CMS provider. Without changing your content workflow, asset URLs are served through your own domain to reduce costs, improve control, and keep performance stable.

1. Connect Your CMS

Add a tenant, choose Prismic or Contentful, and provide repository/space settings.

2. Enable the Proxy

Every tenant gets a dedicated `*.cmsassets.com` domain for serving asset files.

3. Track Savings

Bandwidth is routed through your edge and reduces CMS overage costs.

Savings Calculator

See How Much You Save

Compare the cost of serving assets directly through your CMS versus routing them through CMS Assets. Adjust the sliders to match your usage.

CMS Provider

Monthly Bandwidth

Monthly Requests

Prismic Direct$15.00per month50 GB × $0.30/GB

CMS Assets Pro$15.00per month$15.00 base

Your Savings$0.00 per month

$0.00per year

Cost comparison$15.00

CMS Assets Pro Prismic bandwidth cost

For Developers

Transform CMS Responses in a Few Lines

@synchronized-studio/response-transformer automatically replaces Prismic, Contentful, Sanity, Shopify, Cloudinary, or Imgix asset URLs with your CMS Assets domain, keeping integrations clean and consistent.

What You Get

- One helper for Prismic, Contentful, Sanity, Shopify, Cloudinary, Imgix, and Generic origins
- Support for project-specific custom transformers
- Works on any JSON-serializable payload
- Automatic HTTPS enforcement in production
- Post-processing and custom error handling hooks
- Environment variable auto-detection

Install

Add the package once and use the same helper for every supported CMS.

Copy command

npm install @synchronized-studio/response-transformer

Usage

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

const spaceId = 'exampleSpaceId'
const contentfulToken = process.env.CONTENTFUL_DELIVERY_TOKEN

const contentfulResponse = await fetch(
  `https://cdn.contentful.com/spaces/${spaceId}/environments/master/entries`,
  {
    headers: {
      Authorization: `Bearer ${contentfulToken}`,
    },
  }
)
const cmsData = await contentfulResponse.json()

const transformed = transformCmsAssetUrls(cmsData, {
  cms: 'contentful',
  spaceId,
  cmsAssetsUrl: 'https://example.cmsassets.com',
})

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

const repository = 'example-repo'

const repoResponse = await fetch(`https://${repository}.cdn.prismic.io/api/v2`)
const repoData = await repoResponse.json()
const masterRef = repoData.refs.find((ref) => ref.isMasterRef)?.ref

const prismicResponse = await fetch(
  `https://${repository}.cdn.prismic.io/api/v2/documents/search?pageSize=20&ref=${encodeURIComponent(masterRef)}`
)
const cmsData = await prismicResponse.json()

const transformed = transformCmsAssetUrls(cmsData, {
  cms: 'prismic',
  repository,
  cmsAssetsUrl: 'https://example.cmsassets.com',
})

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

const projectId = 'z5k7abcd'
const dataset = 'production'
const query = encodeURIComponent('*[_type == "page"]{ title, mainImage }')

const sanityResponse = await fetch(
  `https://${projectId}.api.sanity.io/v2024-01-01/data/query/${dataset}?query=${query}`
)
const cmsData = await sanityResponse.json()

const transformed = transformCmsAssetUrls(cmsData, {
  cms: 'sanity',
  projectId,
  dataset,
  cmsAssetsUrl: 'https://example.cmsassets.com',
})

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

const storeDomain = 'your-store.myshopify.com'
const storefrontToken = process.env.SHOPIFY_STOREFRONT_TOKEN

const shopifyResponse = await fetch(
  `https://${storeDomain}/api/2024-01/graphql.json`,
  {
    method: 'POST',
    headers: {
      'Content-Type': 'application/json',
      'X-Shopify-Storefront-Access-Token': storefrontToken,
    },
    body: JSON.stringify({
      query: '{ products(first: 10) { edges { node { title featuredImage { url } } } } }',
    }),
  }
)
const cmsData = await shopifyResponse.json()

const transformed = transformCmsAssetUrls(cmsData, {
  cms: 'shopify',
  storeDomain,
  cmsAssetsUrl: 'https://example.cmsassets.com',
})

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

const cloudName = 'my-cloud'
const apiKey = process.env.CLOUDINARY_API_KEY
const apiSecret = process.env.CLOUDINARY_API_SECRET

const cloudinaryResponse = await fetch(
  `https://api.cloudinary.com/v1_1/${cloudName}/resources/image`,
  {
    headers: {
      Authorization: `Basic ${btoa(apiKey + ':' + apiSecret)}`,
    },
  }
)
const cmsData = await cloudinaryResponse.json()

const transformed = transformCmsAssetUrls(cmsData, {
  cms: 'cloudinary',
  cloudName,
  cmsAssetsUrl: 'https://example.cmsassets.com',
})

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

const imgixDomain = 'my-source.imgix.net'

const response = await fetch('https://your-api.com/content')
const cmsData = await response.json()

const transformed = transformCmsAssetUrls(cmsData, {
  cms: 'imgix',
  imgixDomain,
  cmsAssetsUrl: 'https://example.cmsassets.com',
})

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

const originUrl = 'https://my-bucket.s3.amazonaws.com'

const response = await fetch('https://your-api.com/content')
const cmsData = await response.json()

const transformed = transformCmsAssetUrls(cmsData, {
  cms: 'generic',
  originUrl,
  cmsAssetsUrl: 'https://example.cmsassets.com',
})

FAQ

Common questions from teams adopting CMS Assets

Who is CMS Assets for?

CMS Assets is for teams using a headless CMS (Prismic, Contentful, Sanity, etc.) who want faster asset delivery, predictable caching, and tighter control over bandwidth costs — especially when running multiple sites or tenants.

What problem does CMS Assets solve?

It adds a controllable edge layer in front of your CMS media. Assets are cached globally, origin requests drop dramatically, and you can prevent unexpected CDN overages by tracking and limiting usage per tenant.

How do we integrate it into an existing site?

Typically it’s a minimal change: route media URLs through your tenant domain (e.g. tenant.cmsassets.com) using our SDK or a small URL rewrite step in your CMS client. No infrastructure rebuild required.

Does it work with multiple sites or brands?

Yes. CMS Assets is multi-tenant by design. Each tenant has its own domain, origin config, cache behavior, and usage tracking — ideal for agencies and teams managing multiple properties.

Will this break image transformations or query params?

No. Query parameters are forwarded 1:1 to the origin (for Imgix-style transforms, format, width, etc.). You can also choose whether query strings affect caching per file type.

What about video and large files?

Videos and large assets are supported, including Range requests for streaming. CMS Assets can cache full responses and safely handle partial content requests when needed.