I built this Framer Code Component for one simple reason:
Making integration sections manually is painful.
Then I realized… integrations are only the beginning.
You could use this to create:
• SaaS integration ecosystems • AI agent architectures • API connection maps • Tech stack visuals • Product ecosystem sections • Automation workflows • Data flow diagrams • Multi-tool workflows • Partner ecosystems • “How our platform connects” sections • Infrastructure visuals • Before → system → output flows • Complex SaaS features that are normally hard to explain
The interesting part?
You’re not designing every connection manually.
Drop your Framer components in.
Choose the main component.
Arrange everything exactly where you want.
Move any item freely in any direction.
Build multiple layers and branches.
Then choose how everything connects: Fan, Merge, or Bus.
You can also control gradients, glow, pulses, line styles, connection shapes and more.
And once the structure is right, the complete arrangement can be saved as JSON.
What started as an integration component is slowly becoming something I wish Framer had built in.
Especially for SaaS websites where a screenshot just isn’t enough to explain how the product actually works.
I’m curious:
What else would you build with this?
