Getting Started

CMS Assets takes about 5 minutes to set up. Create a project, connect your CMS, and choose your integration path — the full API proxy for cached API responses and automatic asset URL rewriting, or the lighter asset-only path for media delivery without touching your API calls.

1. Create an account

Sign up at cmsassets.com/sign-up. You can start with the free plan — no credit card required.

2. Create your project

After signing in, go to your dashboard and create a new project.

You'll need to provide:

FieldDescription
SlugA URL-friendly name for your project (e.g. my-project). This becomes your edge domain: my-project.cmsassets.com
CMSSelect your CMS type — Prismic, Contentful, Sanity, Shopify, Cloudinary, Imgix, Storyblok, or Generic Origin
Repository nameFor Prismic: your repository name (e.g. my-repo)
Space IDFor Contentful: your space ID
Project IDFor Sanity: your project ID (e.g. z5k7abcd)
Store domainFor Shopify: your store domain (e.g. your-store.myshopify.com)
Cloud nameFor Cloudinary: your cloud name (e.g. my-cloud)
Imgix domainFor Imgix: your source domain (e.g. my-source.imgix.net)
Storyblok space IDFor Storyblok: your numeric space ID
Origin URLFor Generic Origin: full HTTPS origin URL
Website domainThe domain of your frontend (used for Referer headers and origin requests when needed)

Once created, your edge domain is live:

https://your-project.cmsassets.com

3. Choose your setup path

Both setup paths use the same edge domain:

https://your-project.cmsassets.com

The recommended path for most teams. Route read-only CMS API requests through your project's edge domain and let CMS Assets handle credentials, caching, and asset URL rewriting automatically.

Choose this path when you want:

  • server-side token injection for CMS API calls
  • cached API responses at the edge
  • automatic asset URL rewriting in JSON responses
  • one tenant domain for both API and asset traffic

Use this path when you want the proxy to handle the full CMS delivery layer instead of only patching asset URLs later in the app.

Option B: Asset proxy only

This is the lighter alternative. Keep your existing CMS API calls unchanged and route only assets through the tenant domain.

Example:

Assets: https://your-project.cmsassets.com/path/to/image.jpg

Choose this path when you want:

  • edge caching for media
  • lower CMS bandwidth usage
  • minimal implementation changes
  • a simple rollout with the CLI, transformer, SDK, or a small URL rewrite step

You can add the API proxy later without changing anything about your project setup.

4. Activate the integration path you chose

For the full API + asset proxy package

Use the CMS Assets SDK or your project's API Proxy settings to route read-only CMS requests through:

https://your-project.cmsassets.com/~api/...

That gives you server-side token injection, edge caching, and proxy-ready asset URLs in API responses.

For asset proxy only

Use the response transformer or CLI to rewrite asset URLs in your app responses.

5. Install the response transformer

The response transformer rewrites CMS asset URLs in your API responses so they point to your CMS Assets proxy instead of the origin CDN.

The fastest way is to use the CLI Agent. From your project root:

npx @synchronized-studio/cmsassets-agent init

The agent will detect your framework and CMS, install the transformer, and patch your source files automatically. You can pass --slug your-project-slug so it uses your CMS Assets URL. See CLI Agent for all options and re-run instructions.

Option B: Manual installation

If you prefer to integrate by hand, install the package and wrap your fetch calls as below.

npm install @synchronized-studio/response-transformer

Prismic example

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

// After fetching data from Prismic
const data = await prismicClient.getAllByType("page")

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

Contentful example

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

// After fetching data from Contentful
const entries = await contentfulClient.getEntries()

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

Shopify example

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

// After fetching data from Shopify Storefront API
const data = await shopifyClient.request(productsQuery)

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

Cloudinary example

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

// After fetching data from Cloudinary
const data = await cloudinaryClient.search.expression("folder:products").execute()

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

Imgix example

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

// After fetching data from your CMS that uses Imgix URLs
const data = await fetchCmsData()

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

Storyblok example

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-project.cmsassets.com"
})

Environment variable

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

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

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

6. Deploy

That's it. Once deployed, your full setup runs through one edge domain. With the API proxy enabled, read-only CMS requests flow through https://your-project.cmsassets.com/~api/..., and parsed API responses already contain proxy-ready asset URLs. If you chose the lighter path, asset URLs still route through CMS Assets on their own.

Verify it's working

If you enabled the API proxy, test one GET request through https://your-project.cmsassets.com/~api/... and check:

  • X-Cache: HIT, MISS, or BYPASS
  • X-Parsed: true when URL rewriting is enabled
  • proxy URLs in the JSON body instead of raw CMS asset origins

Then inspect any image element or asset URL in the app. It should point to your-project.cmsassets.com instead of the raw CMS CDN.

Next steps

✦
Need help understanding this?Ask CMS Assets Copilot about features, setup, or integrations.
Ask Copilot →