SupaSync
SupaSync lets you connect your Supabase database directly to your Framer collections, so your data stays updated automatically. It's a no-code bridge between your backend and Framer components.
What is SupaSync?
SupaSync is a Framer plugin that connects your Supabase tables to Framer collections. It keeps your content in sync and removes the need for manual updates. Whether you're showing blog posts, user testimonials, or product data—SupaSync keeps it updated.
Installation
Open your Framer project
Go to Menu → Insert → Plugin
Search for SupaSync
How It Works
SupaSync works in both directions:
From Supabase to Framer: Pulls your database rows into a Framer collection
From Framer to Supabase (optional): Pushes changes made in Framer back to your database
You choose the direction and what fields to sync.
Step-by-Step Setup
Step | Action |
---|---|
1 | Create or select a collection in Framer |
2 | Right-click the collection and choose "Configure SupaSync" |
3 | Enter your Supabase Project URL and Service Role Key |
4 | Copy and run the setup SQL code in your Supabase SQL Editor |
5 | Choose the Supabase table you want to sync |
6 | Match each Supabase field with a Framer field |
7 | Click “Save & Sync” to finish setup and begin syncing |
Sync Options
Type | Description |
---|---|
Full Sync | Replaces all collection data with Supabase data |
Incremental | Only updates new or modified records |
Merge Sync | Combines data, preserving changes from both sides |
Database setup
To ensure smooth synchronization between Supabase and Framer using SupaSync, you need to configure your database permissions correctly.
Important: These rules allow SupaSync to access and update the data securely. You must run this only once per project you want to sync.
Supported Data Types
Supabase Type | Framer Type | Notes |
---|---|---|
text | String | Max 65535 chars |
varchar | String | Max 65535 chars |
int4 | Number | -2147483648 to 2147483647 |
int8 | Number | -9223372036854775808 to 9223372036854775807 |
float4 | Number | 6 decimal digits precision |
float8 | Number | 15 decimal digits precision |
boolean | Boolean | true/false |
json | String | Stored as stringified JSON |
jsonb | String | Stored as stringified JSON |
timestamp | String | ISO 8601 format |
uuid | String | UUID v4 format |
supabase storage url | Image | Auto detection of image fields |
Using SupaSync with Framergenie
Framergenie is your go-to tool for creating dynamic, tiered, and social apps in Framer. By integrating SupaSync with Framergenie, you can build platforms where users can interact with each other, submit forms, upload images, and have that data synced to your Framer CMS.
Features You Can Build:
Tiered Sites: Create free or pro tiers, giving users access to different features based on their subscription plan. Use SupaSync to sync data like project limits, user access, and more.
User-Generated Content: Allow users to submit data through forms (including text, images, etc.), which will be synced to your Framer CMS and displayed dynamically.
Social App Features: Allow users to submit posts, upload profile pictures, and interact with your platform in real-time, syncing it all to Supabase and Framer.
Steps to Build a Form-Driven App:
Create a Form:
Use Framergenie to create user forms. The form can include text fields, file upload fields (for images), and dropdowns for user data.
Map Fields:
Map the form fields to the corresponding Supabase columns.
Ensure each form entry is synced to your Framer collection via SupaSync.
Allow Users to Upload Images:
You can add an image upload field in your form. When users upload images, they will be stored in Supabase (or another file storage service) and the file URL will sync to your Framer CMS.
Sync Form Data to Framer CMS:
Once the form is submitted, the data (including text, images, etc.) will be synced to your Framer collection automatically.
Display the Data:
Set up your Framer CMS to display the submitted data in a dynamic layout, like a profile page, a social feed, or a testimonials page.
Common Issues
Issue | What to Check |
---|---|
Data not showing | Ensure the table has data and field mapping is accurate |
Connection errors | Confirm your Supabase credentials are correct |
Permissions denied | Your key must allow reading/writing the table |
Slow performance | Try reducing the number of synced fields or rows |
Incorrect data | Double-check your mappings and collection setup in Framer |