<spline-viewer>

Easily embed your 3d Spline scenes into your website.

Explore

Embedding

Copy and paste the script tags into the body of your site (or inside an HTML embed). That’s it!

<script type="module" src="https://unpkg.com/@splinetool/viewer/build/spline-viewer.js"></script>
<spline-viewer url="https://prod.spline.design/UWoeqiir20o49Dah/scene.splinecode"></spline-viewer>
Copy

Scroll

Create Scroll events and camera states to create scroll-based transitions.

<script type="module" src="https://unpkg.com/@splinetool/viewer/build/spline-viewer.js"></script>
<spline-viewer url="https://prod.spline.design/LEvjG3OETYd2GsRw/scene.splinecode"></spline-viewer>
Copy

Orbit & Zoom

Control the camera behavior from the Spline export settings.

<script type="module" src="https://unpkg.com/@splinetool/viewer/build/spline-viewer.js"></script>
<spline-viewer url="https://prod.spline.design/U9O6K7fXziMEU7Wu/scene.splinecode"></spline-viewer>
Copy

Follow

Make your objects follow the cursor or other objects by using the Follow event.

<script type="module" src="https://unpkg.com/@splinetool/viewer/build/spline-viewer.js"></script>
<spline-viewer url="https://prod.spline.design/PBQQBw8bfXDhBo7w/scene.splinecode" events-target="global"></spline-viewer>
Copy

Look At

You can make your objects look at the camera, the cursor, or other objects with Look At event.

<script type="module" src="https://unpkg.com/@splinetool/viewer/build/spline-viewer.js"></script>
<spline-viewer url="https://prod.spline.design/FVZWbQH2B6ndj9UU/scene.splinecode" events-target="global"></spline-viewer>
Copy

Change Background

Override the background color of your Spline scene by using the background property that accepts any css style color. This color will override the background color you defined in the editor.

<script type="module" src="https://unpkg.com/@splinetool/viewer/build/spline-viewer.js"></script>
<spline-viewer url="https://prod.spline.design/fJ2ptJKzT-sDkpfO/scene.splinecode" background="rgba(218,81,221,0.2)"></spline-viewer>
Copy
Original BG
background=""
background=""
rgba(218,81,221,0.2)#E0F0FF

Integrations

<spline-viewer> is a native html component and can be used with most web builders, frameworks, or browsers.

Checkmark
Latest Browsers
Checkmark
JS Frameworks
Checkmark
Web Builders

Learn More

Spline is always improving, join our community to learn more about new features, share your work, or get help/support!