How to Add Spline to Framer: 1-Min Guide

How to Add Spline to Framer

Updated on:

June 5, 2026

By:

Use this interactive demo to learn how to embed a Spline scene directly into your Framer project.

Quick summary

Adding Spline to Framer lets you embed interactive 3D content into your web design using the built-in Embed option — no code required. Simply open the Insert menu, paste your Spline URL, preview the result, and publish your project live.

Steps

Open your Framer project to get started.
Open the Insert menu to explore embedding options for your project.
From the Insert menu, choose Embed to enhance your design's functionality.
Select the URL option to seamlessly integrate external web content.
Enter your Spline embed URL or code in the field to customize your integration.
Preview how your embedded content will display in the final design.
Click Apply to see your embed come to life within your Framer project.
Resize and position the embed frame as needed to fit your layout.
Click Publish to make your Framer project live.

📌 Why this matters

Embedding Spline in Framer allows designers to bring interactive 3D animations and scenes directly into their websites without writing a single line of code. This integration bridges the gap between powerful 3D design tools and no-code web publishing, making it easier than ever to ship visually rich, interactive experiences. For teams building modern marketing pages or product showcases, combining Spline's 3D capabilities with Framer's visual editor dramatically speeds up the design-to-publish workflow. It's the fastest way to add real-time 3D web content to a live Framer site.

Your product deserves an interactive demo

Start free

How to Add Adobe Fonts to Framer

Framer CRM Integration

How to Link to Section in Framer