Quickstart

Connect KnotCMS once, map your fields, and sync Notion rows into a Framer CMS collection.

The setup wizard has three steps — always in this order: Framer → Notion → Mapping.

What you’ll need

• A Framer site with CMS access
• A Notion database with the content you want to sync
• A Google account (for KnotCMS sign-in)
• About 5 minutes

Note

The Basic plan is free: 1 project and 3 manual syncs. That is enough to verify the pipeline before upgrading.

1. Sign in to KnotCMS

Open app.knotcms.com and click Continue with Google.

Use the same Google account you will use at checkout if you subscribe later.

2. Start a new project

From the dashboard, click + Create project (empty state) or + New project (top right). This opens the setup wizard.

Either button opens the setup wizard.

3. Connect Framer (wizard step 1)

On Step 1 · Framer:

1. Paste your Framer project URL and Server API key (from Framer → Site settings → General).
2. Click Load collections.
3. CMS collections (optional) — see below, then click Continue.

Load collections before Continue is enabled.

After collections load, KnotCMS shows an optional CMS collections list. You choose whether to pick one here based on how you will connect Notion in step 2:

Step 2 option	Select a Framer collection in step 1?
Option 3 — new Framer collection from Notion (quickstart)	No — leave unselected and continue
Option 2 — connect existing databases	Yes — select the Framer CMS collection to sync into
Option 1 — bootstrap Notion from Framer CMS	Yes — select the Framer collection to import from

The wizard copy says this is optional because the exact link happens in step 2 — but paths that start from existing Framer content require a selection here.

Optional: select a collection only if you are connecting to or bootstrapping from existing Framer CMS content.

Tip

See Framer Server API key if you need help finding the key. All three setup paths are compared in Connect Notion.

4. Connect Notion (wizard step 2)

On Step 2 · Notion:

Choose a setup path

Under What do you want to do?, pick how Framer and Notion should link. The wizard lists three options in this order:

#	Option in the wizard	When to use	Framer step 1
1	Create new Notion database using an existing Framer CMS collection	Content lives in Framer CMS first — bootstrap into Notion	Select a Framer collection
2	Connect existing databases	You already have both a Notion database and a Framer CMS collection	Select a Framer collection
3	Create a new Framer CMS collection and sync with existing Notion database	You write in Notion — KnotCMS creates a synced Framer collection	No selection needed

For this quickstart, choose option 3, connect Notion, then pick your database from the list.

Pick a path first — the screen below changes depending on which option you chose.

Note

Options 1 and 2 require a Framer CMS collection selected in step 3. Full walkthroughs: Bootstrap from Framer, Connect existing.

Authorize Notion

1. Click Connect on the Notion card (or Use this tab if the popup is blocked).
2. In Notion’s Connect with notion plugin screen, click Select pages.
3. Under Top level pages, check the database you want KnotCMS to sync (table icon — not a standalone page).
4. Click Allow access.

Grant access to the Notion database (table icon) that holds your CMS rows — not every page in your workspace.

Confirm with Allow access to return to KnotCMS.

What you’ll see after Notion is connected

After OAuth, KnotCMS shows a different screen for each path:

Option 1 — Create Notion database from Framer — set Rows to import from Framer, then click Create Notion database. Use 0 to create an empty database, or Select all to import published rows.

Enter 0 to create the Notion database structure without importing Framer rows.

If you import some but not all rows, KnotCMS shows a warning — skipped Framer rows stay in your collection but won’t sync from Notion until you add matching pages there.

Select all imports every published row; a lower number shows the partial-import disclaimer.

After Create Notion database, KnotCMS creates a new database in your Notion workspace (nested under a page named after your Framer collection). Open it in Notion to confirm the schema and imported rows.

The new database in Notion — columns match your Framer fields and rows reflect what you imported.

Option 2 — Connect existing databases — pick your Notion database from Choose Notion database. KnotCMS maps it to the Framer collection you selected in step 1.

Option 3 — New Framer collection from Notion (quickstart) — pick your Notion database from Choose Notion database. KnotCMS will create a new managed Framer CMS collection in the mapping step.

Quickstart: select the database you granted access to during OAuth.

5. Map fields and sync (wizard step 3)

On Step 3 · Mapping, what you see depends on your setup path:

Option 3 — New Framer collection (quickstart)

Map Notion fields, pick the slug, then Create & sync. KnotCMS creates a new managed Framer collection — there is no Where should Notion sync? section.

Placeholder — add screenshot

Save as /images/docs/get-started/quickstart/05-field-mapping.png

Capture instructions

Path 3: field mapping and Create & sync without sync destination picker.

Option 2 — Connect existing

If you chose Connect existing databases and selected a Framer collection in step 1, mapping starts with Where should Notion sync?:

First option — Update existing collection (in-place)

Sync into the Framer CMS collection you already use. Column names must match the fields you map.

In-place sync: updates matching fields in your existing collection.

Second option — Create new KnotCMS collection

Uses your selected collection as a template only. KnotCMS creates a separate ”… · KnotCMS” collection with columns from your Notion mapping. Your original Framer collection stays unchanged.

New managed collection: KnotCMS adds a separate synced collection in Framer.

Then map fields, pick the slug, review Automation, and click Create & sync:

Same field mapping UI for both sync destinations.

All paths

1. Turn on the Notion properties you want in Framer.
2. Choose which property is the slug.
3. Leave Auto-sync off on the Basic plan (it is gated anyway). If you are on a paid plan and turn it on, finish step 7 after setup — otherwise the project page shows a webhook warning even though your first sync succeeded.
4. Click Create & sync — this creates the project and runs your first sync (uses one Basic-plan sync).

6. Confirm your first sync

After Create & sync finishes, KnotCMS opens your new project page. Confirm the first sync ran:

• Last sync shows a recent time (not empty)
• Items in Framer matches your Notion row count
• Open Framer CMS and verify rows appeared in your collection

On the Basic plan, the status banner shows Manual sync only — use Sync now for later updates.

If you turned on Auto-sync during setup (paid), you may see Webhook setup required even though the sync succeeded — that is normal. Finish step 7 for automatic updates; the metrics below still confirm your first sync worked.

Last sync + item count confirm the sync from Create & sync ran. Webhook banner appears only when auto-sync is on.

7. Verify Notion webhook (if auto-sync is on)

Skip this step on Basic — manual sync does not need a webhook.

If you enabled Auto-sync on Notion changes during setup (paid plans), your first sync still succeeded — but the project page shows Webhook setup required until verification is done.

Last sync and Items in Framer confirm the sync worked — finish webhook setup for auto-sync.

Quick checklist

Step	Where	Action
1	KnotCMS	Copy webhook URL from Notion webhook setup
2	Notion	Integration → Webhooks → + Create a subscription → paste URL
3	Notion	Click Verify on the new subscription
4	KnotCMS	Copy the Verification token (Refresh token first if empty)
5	Notion	Paste token in Verify subscription → Verify subscription
6	KnotCMS	Click I’ve verified in Notion

When done, KnotCMS shows Sync pipeline active and Webhook: Active.

Test it

Add a row in Notion, wait ~10 seconds, then refresh your KnotCMS project page — Last sync should show Just now without clicking Sync now.

Auto-sync worked — item count and last sync time updated automatically.

Tip

Full walkthrough with every Notion screen: Webhooks & auto-sync. Test auto-sync for the end-to-end proof.

Next steps

• Manual sync (Basic plan)
• Webhooks & auto-sync (paid)
• Understand plans and project slots
• Field mapping in depth