Copy Collection

What is Copy Collection?

Copy Collection is a utility built to solve a specific pain point in the Webflow ecosystem: duplicating CMS collection structures between sites. You paste your source site's API token, copy a collection's JSON schema, paste it into the target site panel, and the tool handles all the formatting, reference remapping, and field validation needed to recreate that collection through the Webflow API.

The interface is a three-column layout — source site on the left, transfer panel in the center, verification panel on the right. Each column corresponds to a step in the workflow: copy the collection JSON, format and configure it, then verify it landed correctly on the destination site.

It's built with Next.js 15, the Webflow API SDK, and shadcn/ui components. The entire thing runs as a lightweight web app with API routes handling all Webflow interactions server-side.

The Problem

Webflow doesn't offer a native way to copy CMS collection structures between sites. If you've built a collection with 30 fields across multiple types — plain text, rich text, images, references, multi-references, options — and you need the same structure on a different site, your only option is to recreate it by hand. Field by field. Validation by validation.

This gets worse when reference fields are involved. A reference field in Webflow points to another collection by its ID, and those IDs are unique to each site. So even if you could somehow export and import a collection schema, every reference field would break because the target site has different collection IDs.

For agencies and freelancers who reuse collection patterns across client projects, this manual recreation is a recurring time sink. It's tedious, error-prone, and scales poorly.

Copy Collection automates the entire process. It reads the source collection schema, detects reference and multi-reference fields, prompts you for the corresponding collection IDs on the target site, reformats the data to match Webflow's creation API, and pushes it in one request.

How It Works

Fetching Site and Collection Data

The first step is authenticating with a Webflow API token. When you enter your source site's token and hit fetch, the app calls the Webflow API through a server-side route to retrieve the site details and all its collections. Each collection is listed with its display name, and you can expand any of them to inspect the full field schema — types, slugs, validation rules, help text, and reference targets.

There's a copy-to-clipboard button on each collection that serializes the entire collection details object as JSON. This is what you carry over to the middle panel.

Detecting and Handling References

This is where the interesting logic lives. When you paste a collection's JSON into the transfer panel, the tool parses it and scans every field for Reference or MultiReference types. If it finds any, it surfaces them in the UI with input fields asking for the corresponding collection IDs on the target site.

This step is necessary because Webflow's collection creation API expects reference fields to include a collectionId inside a metadata object — not inside validations like the read API returns. The tool handles this transformation automatically. For reference types, it moves the validations object into metadata and injects the new collection ID. For option fields, it does the same restructuring while also stripping internal IDs from each option. For all other field types, validations pass through unchanged.

if (isReferenceType && validations && field.slug) {
  return {
    ...restField,
    metadata: {
      ...validations,
      collectionId: referenceCollectionIds[field.slug] || "",
    },
  };
} else if (isOptionType && validations) {
  return {
    ...restField,
    metadata: {
      ...validations,
      options: validations.options
        ? validations.options.map(({ id, ...option }: any) => option)
        : [],
    },
  };
}

The tool also strips the id property from every field before submission, since the target site will generate its own IDs. Only displayName, singularName, slug, and the cleaned fields array are sent to the API.

Dependency Reordering

When you're copying multiple collections, order matters. A collection with reference fields can't be created until the collections it references already exist on the target site — otherwise you won't have the collection IDs to map.

The reorder feature fetches the details for every collection on the source site, counts the number of reference and multi-reference fields on each, and sorts them so that collections with no dependencies appear first. Collections with references are pushed to the bottom and tagged with badges showing their reference counts. This gives you a clear order of operations for the transfer.

Verification

The third column is a simple refresh panel. You enter the target site's API token, fetch its collections, and confirm that the newly created collection appears with the correct structure. It's a sanity check — nothing more, nothing less.

Tech Stack

The frontend is Next.js 15 with the app router and Turbopack for development. UI components come from shadcn/ui built on Radix primitives, styled with Tailwind CSS 4. Toast notifications use Sonner for non-blocking feedback on every action. The Webflow integration uses the official webflow-api SDK (v3.1.0) through three server-side API routes — one for fetching site and collection data, one for fetching a specific site by token, and one for creating collections on a target site. Everything is written in TypeScript.

API Architecture

The app uses three Next.js API routes to keep all Webflow SDK calls server-side. The main /api/webflow route handles two responsibilities: if called with just a token, it fetches the site details and all collections; if called with a token and a collectionId, it returns the detailed schema for that specific collection. The /api/sitemover route is a simplified endpoint that fetches just the first site associated with a token. The /api/addcollection route takes an access token, a site ID, and a prepared collection data object, then calls client.collections.create() to push the new collection to the target site.

All three routes validate their inputs, instantiate a fresh WebflowClient per request, and return structured error responses if anything fails.

Why I Built This

I was working on multiple Webflow projects that shared similar CMS structures, and I kept rebuilding the same collections from scratch. The Webflow API has everything you need to automate this, but the read and write schemas don't match — validations become metadata, IDs need stripping, reference fields need remapping. It's the kind of mismatch that's easy to miss and tedious to handle manually.

Copy Collection is a straightforward tool that removes that friction. Paste a token, copy a schema, map the references, push it to the target site. No manual field recreation, no missed validations, no typos in slugs. It does one thing and does it properly.

/RTSTIC