The hybrid model
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:
Approach | Problem |
|---|---|
Pure runtime fetch | Canvas shows loading spinners or placeholder text. Designing blind. |
Full CMS sync | Framer becomes a copy of Swell. Data drifts. Two sources of truth. |
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.
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
Data | Canvas (snapshot) | Live site (Swell) |
|---|---|---|
Product title | ✓ | ✓ |
Product images | ✓ | ✓ |
Price | ✓ (may be stale) | ✓ (always current) |
Sale price | ✓ (may be stale) | ✓ (always current) |
Variant labels | ✓ (for layout) | ✓ (with live availability) |
Inventory/stock | ✗ | ✓ |
Variant combinations | ✗ | ✓ |
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