# Turn Your Spline Designs into Interactive Web Experiences - Spline 101 | Build Your First Interactive Scene - 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. [Courses](https://spline.design/academy/collections)
3. [Spline 101 | Build Your First Interactive Scene](https://spline.design/academy/collections/spline-101-build-your-first-interactive-scene)
4. Turn Your Spline Designs into Interactive Web Experiences

# Turn Your Spline Designs into Interactive Web Experiences

Lesson 16 of 16Spline 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

## Last lesson

That’s the end of Spline 101 | Build Your First Interactive Scene.

[Back to the course](https://spline.design/academy/collections/spline-101-build-your-first-interactive-scene)

[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.