TGC uses a hybrid architecture that gives you the best of both worlds: native Framer canvas editing with live Swell data in production.

The problem TGC solves

There are two obvious ways to connect Swell to Framer, and both have drawbacks:

TGC takes a third path.

The hybrid model

Design time (canvas): TGC syncs a lightweight snapshot of your products to Framer CMS. You design with real titles, images, and prices — no placeholders.

Runtime (live site): Components fetch fresh data directly from Swell. Prices, inventory, and variants are always current.

CANVAS                          LIVE SITE
↓                               ↓
Framer CMS snapshot             Swell API
(for designing)                 (source of truth)

What this means for you

For designing:

• Switch products in the canvas and see changes instantly

• No "Loading..." placeholders while you work

• Full Framer design experience with real content

For your live store:

• Prices update in Swell? Live site reflects it immediately.

• Stock runs out? Variants show as unavailable.

• No need to re-sync for price or inventory changes.

What's in the snapshot vs what's live

See What Swell controls vs Framer for the full breakdown.

The mental model

What you see in the canvas is a design snapshot. Live data comes from Swell once your site is published.

If you change something in Swell that affects layout (like adding a new product or changing a title), re-sync to update your canvas. If you change something dynamic (like a price or stock level), the live site handles it automatically.

See When to re-sync for guidance.

Related

• When to re-sync

• What Swell controls vs Framer

• Canvas shows different data than live site