# Turn Your Spline Designs into Interactive Web Experiences - Spline Academy (https://spline.design/academy/tutorials/turn-your-spline-designs-into-interactive-web-experiences)

> Learn how to bring your Spline 3D designs to life on the web! In this mini masterclass, we'll walk you through everything you need to know about integrating…

1. [Academy](https://spline.design/academy)
2. [Tutorials](https://spline.design/academy/tutorials)
3. Turn Your Spline Designs into Interactive Web Experiences

# Turn Your Spline Designs into Interactive Web Experiences

Spline 3DBeginner10 min

Learn how to bring your Spline 3D designs to life on the web! In this mini masterclass, we'll walk you through everything you need to know about integrating Spline scenes into your websites and web projects.

🎯 What You'll Learn:

- How to export and share Spline scenes using Public URLs
- Embedding with Spline Viewer for quick integration
- Code export options for Vanilla JS, Three.js, React, Next.js, and React Three Fiber
- Self-hosted deployment for full control
- Integrating Spline with web builders like Framer, Webflow, Wix, and Shopify

This tutorial is for anyone who wants to add interactive 3D elements to their sites or projects, so let’s dive in!

## Related resources

- [Likes ButtonTemplate](https://app.spline.design/academy/tutorials/turn-your-spline-designs-into-interactive-web-experiences?redirect-duplicate-template-uuid=0ffd92cf-735d-47e7-8cea-ad0bebdcd0d0&is-2d-file=false)
- [Exporting Your SceneDocument](https://docs.spline.design/#%F0%9F%8E%9E%EF%B8%8F-exporting-your-scene)
- [Exporting as Public URLsDocument](https://docs.spline.design/exporting-your-scene/web/exporting-as-public-ur-ls)
- [Exporting as Spline ViewerDocument](https://docs.spline.design/exporting-your-scene/web/exporting-as-spline-viewer)
- [Exporting as CodeDocument](https://docs.spline.design/exporting-your-scene/web/exporting-as-code)

## Overview

- Spline 3D
- 10 min
- Beginner

## Part of

- [Spline 101 | Build Your First Interactive Scene](https://spline.design/academy/collections/spline-101-build-your-first-interactive-scene/turn-your-spline-designs-into-interactive-web-experiences)

## Related tutorials

[All tutorials](https://spline.design/academy/tutorials)

[Designing a 3D website with Spline and FramerSpline 3DBeginner14 min](https://spline.design/academy/tutorials/designing-a-3d-website-with-spline-and-framer)[Build a Tilt-Controlled 3D Portal Experience in SwiftUISpline 3DAdvanced14 min](https://spline.design/academy/tutorials/build-a-tilt-controlled-3d-portal-experience-in-swiftui)[How to Build a Reactive 3D Orb with Motion and InteractionSpline 3DIntermediate7 min](https://spline.design/academy/tutorials/how-to-build-a-reactive-3d-orb-with-motion-and-interaction)

[Spline](https://spline.design/)

The 3D and 2D editor for teams and their agents. Ship to the web, iOS and Android.

#### Ask AI about Spline

#### Products

- [3D Design](https://spline.design/3d-design)
- [Hana](https://spline.design/hana)
- [Omma](https://omma.build)
- [AI 3D Generation](https://spline.design/ai-generate)
- [Spline MCP](https://spline.design/mcp)
- [Pricing](https://spline.design/pricing)
- [Enterprise](https://spline.design/enterprise)

#### Runtimes

- [Web](https://spline.design/web)
- [iOS](https://spline.design/ios)
- [Android](https://spline.design/android)

#### Apps

- [Download](https://spline.design/download)
- [Spline Mirror](https://spline.design/spline-mirror)
- [Download Spline Mirror](https://spline.design/download-mirror)

#### Learn

- [Docs](https://docs.spline.design/)
- [Academy](https://spline.design/academy)
- [Spline API](https://www.npmjs.com/package/@splinetool/runtime)
- [Solutions](https://spline.design/solutions)

#### Community

- [Spline Community](https://community.spline.design)
- [Blog](https://spline.design/blog)
- [Changelog](https://spline.design/changelog)
- [Education](https://spline.design/education)
- [Contra](https://spline.design/contra)
- [Affiliate](https://spline.design/affiliate)

#### Company

- [Customers](https://spline.design/customers)
- [Careers](https://www.ycombinator.com/companies/spline/jobs)
- [Security](https://spline.design/security)

#### Legal

- [Terms & Conditions](https://spline.design/terms)
- [Privacy](https://spline.design/privacy)

#### Contact

- [help@spline.design](mailto:help@spline.design)
- [jobs@spline.design](mailto:jobs@spline.design)

© 2026 - Spline, Inc.