diff --git a/starters/cms/public/data/articles.json b/starters/cms/public/data/articles.json
index 391a3d93..ef2bfae2 100644
--- a/starters/cms/public/data/articles.json
+++ b/starters/cms/public/data/articles.json
@@ -1,56 +1,68 @@
 {
     "id": "articles",
     "fields": [
+        { "name": "Id", "type": "string" },
         { "name": "Title", "type": "string" },
         { "name": "Content", "type": "formattedText" },
         { "name": "Reading Time", "type": "number" },
-        { "name": "Featured", "type": "boolean" }
+        { "name": "Featured", "type": "boolean" },
+        { "name": "Categories", "type": "multiCollectionReference", "dataSourceId": "categories" }
     ],
     "items": [
         {
+            "Id": { "type": "string", "value": "1" },
             "Title": { "type": "string", "value": "Getting Started" },
             "Reading Time": { "type": "number", "value": 3 },
             "Featured": { "type": "boolean", "value": true },
             "Content": {
                 "type": "formattedText",
                 "value": "Learn how to set up content fields, add CMS content to your canvas, and create pages that automatically populate with your data. With the right setup, you can quickly build index and detail pages for your collection."
-            }
+            },
+            "Categories": { "type": "multiCollectionReference", "value": ["1", "2"] }
         },
         {
+            "Id": { "type": "string", "value": "2" },
             "Title": { "type": "string", "value": "Latest Updates" },
             "Reading Time": { "type": "number", "value": 2 },
             "Featured": { "type": "boolean", "value": false },
             "Content": {
                 "type": "formattedText",
                 "value": "We’ve added powerful new features including reference fields and filtering capabilities for your collections. These updates allow you to keep content in a single collection while customizing how it’s presented across different pages."
-            }
+            },
+            "Categories": { "type": "multiCollectionReference", "value": ["3"] }
         },
         {
+            "Id": { "type": "string", "value": "3" },
             "Title": { "type": "string", "value": "Styling Elements" },
             "Reading Time": { "type": "number", "value": 4 },
             "Featured": { "type": "boolean", "value": false },
             "Content": {
                 "type": "formattedText",
                 "value": "Latest improvements to the canvas and layer panel make styling and layout work easier than ever. New features include enhanced component controls and automatic tinting support."
-            }
+            },
+            "Categories": { "type": "multiCollectionReference", "value": ["3"] }
         },
         {
+            "Id": { "type": "string", "value": "4" },
             "Title": { "type": "string", "value": "Importing Content" },
             "Reading Time": { "type": "number", "value": 6 },
             "Featured": { "type": "boolean", "value": false },
             "Content": {
                 "type": "formattedText",
                 "value": "Learn how to prepare your CSV file for import, including formatting for rich text, images, dates, colors, and toggle fields. Ensure each field in your CSV has a matching field in your CMS collection with the same name and compatible data type."
-            }
+            },
+            "Categories": { "type": "multiCollectionReference", "value": ["3"] }
         },
         {
+            "Id": { "type": "string", "value": "5" },
             "Title": { "type": "string", "value": "Best Practices" },
             "Reading Time": { "type": "number", "value": 8 },
             "Featured": { "type": "boolean", "value": true },
             "Content": {
                 "type": "formattedText",
                 "value": "Choose compelling topics based on audience needs and industry trends, while organizing your content with clear structure using proper HTML tags. Consider adding pagination for extensive content lists to enhance performance and improve SEO by reducing load times."
-            }
+            },
+            "Categories": { "type": "multiCollectionReference", "value": ["3"] }
         }
     ]
 }
diff --git a/starters/cms/public/data/categories.json b/starters/cms/public/data/categories.json
index efa652e9..4bd74423 100644
--- a/starters/cms/public/data/categories.json
+++ b/starters/cms/public/data/categories.json
@@ -1,27 +1,32 @@
 {
     "id": "categories",
     "fields": [
+        { "name": "Id", "type": "string" },
         { "name": "Title", "type": "string" },
         { "name": "Description", "type": "string" },
         { "name": "Color", "type": "color" }
     ],
     "items": [
         {
+            "Id": { "type": "string", "value": "1" },
             "Title": { "type": "string", "value": "CMS" },
             "Description": { "type": "string", "value": "Content Management System" },
             "Color": { "type": "color", "value": "orange" }
         },
         {
+            "Id": { "type": "string", "value": "2" },
             "Title": { "type": "string", "value": "Basics" },
             "Description": { "type": "string", "value": "Basic content management" },
             "Color": { "type": "color", "value": "red" }
         },
         {
+            "Id": { "type": "string", "value": "3" },
             "Title": { "type": "string", "value": "Updates" },
             "Description": { "type": "string", "value": "Updates to the CMS" },
             "Color": { "type": "color", "value": "blue" }
         },
         {
+            "Id": { "type": "string", "value": "4" },
             "Title": { "type": "string", "value": "Pro Tips" },
             "Description": { "type": "string", "value": "Tips for using the CMS" },
             "Color": { "type": "color", "value": "green" }
diff --git a/starters/cms/src/FieldMapping.tsx b/starters/cms/src/FieldMapping.tsx
index 6a67237a..097207c9 100644
--- a/starters/cms/src/FieldMapping.tsx
+++ b/starters/cms/src/FieldMapping.tsx
@@ -1,16 +1,24 @@
-import { type EditableManagedCollectionField, framer, type ManagedCollection } from "framer-plugin"
+import { type ManagedCollectionFieldInput, framer, type ManagedCollection } from "framer-plugin"
 import { useEffect, useState } from "react"
 import { type DataSource, dataSourceOptions, mergeFieldsWithExistingFields, syncCollection } from "./data"
 
 interface FieldMappingRowProps {
-    field: EditableManagedCollectionField
+    field: ManagedCollectionFieldInput
     originalFieldName: string | undefined
     disabled: boolean
     onToggleDisabled: (fieldId: string) => void
     onNameChange: (fieldId: string, name: string) => void
+    style?: React.CSSProperties
 }
 
-function FieldMappingRow({ field, originalFieldName, disabled, onToggleDisabled, onNameChange }: FieldMappingRowProps) {
+function FieldMappingRow({
+    field,
+    originalFieldName,
+    disabled,
+    onToggleDisabled,
+    onNameChange,
+    style,
+}: FieldMappingRowProps) {
     return (
         <>
             <button
@@ -19,6 +27,7 @@ function FieldMappingRow({ field, originalFieldName, disabled, onToggleDisabled,
                 aria-disabled={disabled}
                 onClick={() => onToggleDisabled(field.id)}
                 tabIndex={0}
+                style={style}
             >
                 <input type="checkbox" checked={!disabled} tabIndex={-1} readOnly />
                 <span>{originalFieldName ?? field.id}</span>
@@ -27,15 +36,15 @@ function FieldMappingRow({ field, originalFieldName, disabled, onToggleDisabled,
                 <path
                     fill="transparent"
                     stroke="#999"
-                    stroke-linecap="round"
-                    stroke-linejoin="round"
-                    stroke-width="1.5"
+                    strokeLinecap="round"
+                    strokeLinejoin="round"
+                    strokeWidth="1.5"
                     d="m2.5 7 3-3-3-3"
                 />
             </svg>
             <input
                 type="text"
-                style={{ width: "100%", opacity: disabled ? 0.5 : 1 }}
+                style={{ width: "100%", opacity: disabled ? 0.5 : 1, ...style }}
                 disabled={disabled}
                 placeholder={field.id}
                 value={field.name}
@@ -50,8 +59,10 @@ function FieldMappingRow({ field, originalFieldName, disabled, onToggleDisabled,
     )
 }
 
-const initialManagedCollectionFields: EditableManagedCollectionField[] = []
-const initialFieldIds: ReadonlySet<string> = new Set()
+const initialManagedCollectionFields: ManagedCollectionFieldInput[] = []
+
+const isMissingReferenceField = (field: ManagedCollectionFieldInput) =>
+    (field.type === "multiCollectionReference" || field.type === "collectionReference") && !field.collectionId
 
 interface FieldMappingProps {
     collection: ManagedCollection
@@ -68,12 +79,25 @@ export function FieldMapping({ collection, dataSource, initialSlugFieldId }: Fie
 
     const [possibleSlugFields] = useState(() => dataSource.fields.filter(field => field.type === "string"))
 
-    const [selectedSlugField, setSelectedSlugField] = useState<EditableManagedCollectionField | null>(
-        possibleSlugFields.find(field => field.id === initialSlugFieldId) ?? possibleSlugFields[0] ?? null
+    const [selectedSlugField, setSelectedSlugField] = useState<ManagedCollectionFieldInput | null>(
+        possibleSlugFields.find(field => field.id === initialSlugFieldId) ??
+            dataSource.slugField ??
+            possibleSlugFields[0] ??
+            null
     )
 
     const [fields, setFields] = useState(initialManagedCollectionFields)
-    const [ignoredFieldIds, setIgnoredFieldIds] = useState(initialFieldIds)
+    const [ignoredFieldIds, setIgnoredFieldIds] = useState(() => {
+        const initialFieldIds = new Set()
+
+        for (const field of dataSource.fields) {
+            if (isMissingReferenceField(field)) {
+                initialFieldIds.add(field.id)
+            }
+        }
+
+        return initialFieldIds
+    })
 
     const dataSourceName = dataSourceOptions.find(option => option.id === dataSource.id)?.name ?? dataSource.id
 
@@ -85,7 +109,9 @@ export function FieldMapping({ collection, dataSource, initialSlugFieldId }: Fie
             .then(collectionFields => {
                 if (abortController.signal.aborted) return
 
-                setFields(mergeFieldsWithExistingFields(dataSource.fields, collectionFields))
+                setFields(
+                    mergeFieldsWithExistingFields(dataSource.fields, collectionFields as ManagedCollectionFieldInput[])
+                )
 
                 const existingFieldIds = new Set(collectionFields.map(field => field.id))
                 const ignoredFields = dataSource.fields.filter(sourceField => !existingFieldIds.has(sourceField.id))
@@ -202,11 +228,18 @@ export function FieldMapping({ collection, dataSource, initialSlugFieldId }: Fie
                     {fields.map(field => (
                         <FieldMappingRow
                             key={`field-${field.id}`}
-                            field={field}
+                            field={{
+                                ...field,
+                                name: isMissingReferenceField(field) ? "Missing Collection" : field.name,
+                            }}
                             originalFieldName={dataSource.fields.find(sourceField => sourceField.id === field.id)?.name}
                             disabled={ignoredFieldIds.has(field.id)}
-                            onToggleDisabled={toggleFieldDisabledState}
+                            onToggleDisabled={() => {
+                                if (isMissingReferenceField(field)) return
+                                toggleFieldDisabledState(field.id)
+                            }}
                             onNameChange={changeFieldName}
+                            style={isMissingReferenceField(field) ? { cursor: "not-allowed" } : {}}
                         />
                     ))}
                 </div>
diff --git a/starters/cms/src/data.ts b/starters/cms/src/data.ts
index 5c269bb9..bd108373 100644
--- a/starters/cms/src/data.ts
+++ b/starters/cms/src/data.ts
@@ -1,10 +1,11 @@
 import {
-    type EditableManagedCollectionField,
+    type ManagedCollectionFieldInput,
     type FieldDataInput,
     framer,
     type ManagedCollection,
     type ManagedCollectionItemInput,
 } from "framer-plugin"
+import { createUniqueSlug, findAsync } from "./utils"
 
 export const PLUGIN_KEYS = {
     DATA_SOURCE_ID: "dataSourceId",
@@ -13,13 +14,15 @@ export const PLUGIN_KEYS = {
 
 export interface DataSource {
     id: string
-    fields: readonly EditableManagedCollectionField[]
+    fields: readonly ManagedCollectionFieldInput[]
     items: FieldDataInput[]
+    idField: ManagedCollectionFieldInput | null // to be used as id field
+    slugField: ManagedCollectionFieldInput | null // to be used as slug field
 }
 
 export const dataSourceOptions = [
-    { id: "articles", name: "Articles" },
-    { id: "categories", name: "Categories" },
+    { id: "articles", name: "Articles", idFieldId: "Id", slugFieldId: "Title" },
+    { id: "categories", name: "Categories", idFieldId: "Id", slugFieldId: "Title" },
 ] as const
 
 /**
@@ -38,14 +41,33 @@ export const dataSourceOptions = [
  *   ]
  * }
  */
+
 export async function getDataSource(dataSourceId: string, abortSignal?: AbortSignal): Promise<DataSource> {
     // Fetch from your data source
     const dataSourceResponse = await fetch(`/data/${dataSourceId}.json`, { signal: abortSignal })
     const dataSource = await dataSourceResponse.json()
 
     // Map your source fields to supported field types in Framer
-    const fields: EditableManagedCollectionField[] = []
+    const fields: ManagedCollectionFieldInput[] = []
     for (const field of dataSource.fields) {
+        if (field.type === "multiCollectionReference" || field.type === "collectionReference") {
+            if (!field.dataSourceId) {
+                console.warn(`No data source id found for collection reference field"${field.name}".`)
+            } else {
+                const collections = await framer.getManagedCollections()
+                const collection = await findAsync(collections, async collection => {
+                    const dataSourceId = await collection.getPluginData(PLUGIN_KEYS.DATA_SOURCE_ID)
+                    return dataSourceId === field.dataSourceId
+                })
+
+                if (!collection) {
+                    console.warn(`No collection found for data source "${field.dataSourceId}".`)
+                } else {
+                    field.collectionId = collection.id
+                }
+            }
+        }
+
         switch (field.type) {
             case "string":
             case "number":
@@ -54,17 +76,18 @@ export async function getDataSource(dataSourceId: string, abortSignal?: AbortSig
             case "formattedText":
             case "date":
             case "link":
+            case "collectionReference":
+            case "multiCollectionReference":
                 fields.push({
                     id: field.name,
                     name: field.name,
                     type: field.type,
+                    ...(field.collectionId && { collectionId: field.collectionId }),
                 })
                 break
             case "image":
             case "file":
             case "enum":
-            case "collectionReference":
-            case "multiCollectionReference":
                 console.warn(`Support for field type "${field.type}" is not implemented in this Plugin.`)
                 break
             default: {
@@ -75,17 +98,24 @@ export async function getDataSource(dataSourceId: string, abortSignal?: AbortSig
 
     const items = dataSource.items as FieldDataInput[]
 
+    const dataSourceOption = dataSourceOptions.find(option => option.id === dataSourceId)
+
+    const idField = fields.find(field => field.id === dataSourceOption?.idFieldId) ?? null
+    const slugField = fields.find(field => field.id === dataSourceOption?.slugFieldId) ?? null
+
     return {
         id: dataSource.id,
+        idField,
+        slugField,
         fields,
         items,
     }
 }
 
 export function mergeFieldsWithExistingFields(
-    sourceFields: readonly EditableManagedCollectionField[],
-    existingFields: readonly EditableManagedCollectionField[]
-): EditableManagedCollectionField[] {
+    sourceFields: readonly ManagedCollectionFieldInput[],
+    existingFields: readonly ManagedCollectionFieldInput[]
+): ManagedCollectionFieldInput[] {
     return sourceFields.map(sourceField => {
         const existingField = existingFields.find(existingField => existingField.id === sourceField.id)
         if (existingField) {
@@ -98,8 +128,8 @@ export function mergeFieldsWithExistingFields(
 export async function syncCollection(
     collection: ManagedCollection,
     dataSource: DataSource,
-    fields: readonly EditableManagedCollectionField[],
-    slugField: EditableManagedCollectionField
+    fields: readonly ManagedCollectionFieldInput[],
+    slugField: ManagedCollectionFieldInput
 ) {
     const sanitizedFields = fields.map(field => ({
         ...field,
@@ -119,6 +149,12 @@ export async function syncCollection(
             continue
         }
 
+        const idValue = item[dataSource.idField?.id ?? ""]
+        if (!idValue || typeof idValue.value !== "string") {
+            console.warn(`Skipping item at index ${i} because it doesn't have a valid id`)
+            continue
+        }
+
         unsyncedItems.delete(slugValue.value)
 
         const fieldData: FieldDataInput = {}
@@ -133,9 +169,11 @@ export async function syncCollection(
             fieldData[field.id] = value
         }
 
+        const existingSlugs = new Map<string, number>()
+
         items.push({
-            id: slugValue.value,
-            slug: slugValue.value,
+            id: idValue.value,
+            slug: createUniqueSlug(slugValue.value, existingSlugs),
             draft: false,
             fieldData,
         })
@@ -174,7 +212,42 @@ export async function syncExistingCollection(
             return { didSync: false }
         }
 
-        await syncCollection(collection, dataSource, existingFields, slugField)
+        const fields: ManagedCollectionFieldInput[] = []
+        for (const field of existingFields) {
+            if (field.type === "multiCollectionReference" || field.type === "collectionReference") {
+                fields.push({
+                    id: field.id,
+                    name: field.name,
+                    type: field.type,
+                    collectionId: field.collectionId,
+                })
+            } else if (field.type === "enum") {
+                fields.push({
+                    id: field.id,
+                    name: field.name,
+                    type: field.type,
+                    cases: field.cases.map(c => ({
+                        id: c.id,
+                        name: c.name,
+                    })),
+                })
+            } else if (field.type === "file") {
+                fields.push({
+                    id: field.id,
+                    name: field.name,
+                    type: field.type,
+                    allowedFileTypes: field.allowedFileTypes,
+                })
+            } else {
+                fields.push({
+                    id: field.id,
+                    name: field.name,
+                    type: field.type,
+                })
+            }
+        }
+
+        await syncCollection(collection, dataSource, fields, slugField)
         return { didSync: true }
     } catch (error) {
         console.error(error)
diff --git a/starters/cms/src/utils.ts b/starters/cms/src/utils.ts
new file mode 100644
index 00000000..b67d8997
--- /dev/null
+++ b/starters/cms/src/utils.ts
@@ -0,0 +1,37 @@
+function slugify(text: string) {
+    return text
+        .trim()
+        .slice(0, 60)
+        .replace(/^\s+|\s+$/g, "")
+        .toLowerCase()
+        .replace(/[^a-z0-9 -]/g, "")
+        .replace(/\s+/g, "-")
+        .replace(/-+/g, "-")
+}
+
+export function createUniqueSlug(text: string, existingSlugs: Map<string, number>) {
+    const slug = slugify(text)
+    let count = 0
+
+    if (existingSlugs.has(slug)) {
+        count = existingSlugs.get(slug) ?? 1
+        count++
+        existingSlugs.set(slug, count)
+    } else {
+        existingSlugs.set(slug, 0)
+    }
+
+    if (count === 0) {
+        return slug
+    }
+
+    return `${slug}-${count}`
+}
+
+// Find an item in an array using an async callback: https://stackoverflow.com/questions/55601062/using-an-async-function-in-array-find
+export async function findAsync<T>(arr: T[], asyncCallback: (item: T) => Promise<boolean>) {
+    const promises = arr.map(asyncCallback)
+    const results = await Promise.all(promises)
+    const index = results.findIndex(result => result)
+    return arr[index]
+}