Framer
Copy a FeedSpring component into Framer and control it entirely through property controls.
Framer runs React components natively, and FeedSpring components are standard React components. That means the full library of pre-made FeedSpring layouts works inside Framer, with every setting exposed as a property control — no code required.
This is the best option if you want a visual workflow without losing flexibility.
When to use Framer
Use Framer components if you are:
Building in Framer
Designing visually inside the canvas
Wanting to control feed settings without writing raw code
Looking for a component you can copy, style, and extend
If you want complete control in code, use React or the API instead.
How it works
The Framer component connects to your FeedSpring feed and renders items using built-in layout and styling controls.
Instead of adding raw attributes to HTML, you edit the component through Framer's property controls — a sidebar of design-time options that match the rest of Framer's editing experience.
What you can control
The current component exposes visual controls for:
Feed ID
Number of items
Skip count
Font settings
Container settings
Card settings
Image sizing
Radius
Overlay colour
Background colour
Text truncation
Going beyond the controls
The property controls cover the common cases, but the component itself is editable code. To customise further — change the structure, add fields, or build a new layout — open the code component in Framer and edit the JSX directly. Everything is JavaScript and React under the hood.
Example workflow
Copy a FeedSpring component link below into your Framer project
Enter your Feed ID
Choose how many items to show
Adjust skip, typography, container, and card styles
Publish your site
Available components
Browse the full library at feedspring.com/components. A selection of components to copy and paste into Framer:
Google Reviews
For the complete and most up-to-date set, visit feedspring.com/components.
Post fields used in the Instagram component
The default Instagram Framer component reads the following from each post:
Post image
Post caption
Post permalink
Like count
Profile fields used in the Instagram component
For account-level elements, the component reads from the feed's profile data:
Profile avatar
Profile username
Different feed sources (Google Reviews, TikTok, Dribbble) expose different fields. See the Attributes Reference for the full list.
Building a fully custom component
If you need a layout the property controls can't reach, open a code component in Framer and write it yourself. You have two ways to get feed data into it:
Attributes — load the attributes script and use
feedspringandfeed-fieldattributes in your JSX. Fastest, no data layer.GraphQL API — fetch the feed yourself and render from raw data. Use this when you need to transform or combine data, or share one data layer across systems.
See React & Next.js for worked examples of both.
Next steps
React & Next.js — building your own components with the GraphQL API or attributes
Attributes Reference — every available field, for every feed source
Posts & Fields — how feeds and fields are structured
GraphQL API — fetching feed data directly
Last updated