Spline recently introduced a powerful feature: the ability to export your 3D scenes as self-hosted packages. This gives you full control over how and where your Spline scenes are hosted—ideal if you're building custom websites and want better performance, CDN-level speed, and independence from third-party hosting.

In this tutorial, I’ll show you how to export a Spline scene using the self-hosted feature, upload the files to BunnyCDN, and embed the scene in your Webflow site using a <canvas> element and the Spline runtime.

While BunnyCDN is used in this guide, any static file host that supports CORS and proper MIME types will work. Alternatives include Cloudflare R2, AWS S3, Netlify, Vercel, or a self-managed server. BunnyCDN is featured here for its excellent performance, affordability, and ease of use.

Step 1: Export Your Scene from Spline

1. Open your Spline scene.
2. Click Export in the top-right menu.
3. Choose Vanilla JS as the export type (not React or Next.js).
4. Click Download Self Hosted ZIP.
5. Unzip the downloaded archive.

You should see the following files:

• scene.splinecode
• process.js
• process.wasm
• runtime.js
• (optional) physics.js and opentype.js

Step 2: Upload the Files to BunnyCDN

1. Log in to your Bunny.net dashboard.
2. Navigate to your Pull Zone or create a new one.
3. Upload all the files from the ZIP into a folder like:
4. https://your-cdn.b-cdn.net/spline-scene/

5. Ensure these files are publicly accessible:
   • runtime.js
   • scene.splinecode
   • process.wasm
   • process.js
   • (optional) opentype.js
   • (optional) physics.js
6. In Bunny, go to Caching & Delivery > Request Settings > Add CORS Headers:
   • File extensions: js, wasm, splinecode
   • Header: Access-Control-Allow-Origin, value: *
7. Clear the cache (optional but recommended).

Step 3: Embed the Scene in Webflow

1. In Webflow, drag an Embed element into the desired section of your layout.
2. Paste the following code, replacing all URLs with your actual CDN paths:

<canvas id="spline-container" style="width:100%; height:600px;"></canvas>

<script type="module">
 import { Application } from 'https://your-cdn.b-cdn.net/spline-scene/runtime.js';

 const canvas = document.getElementById('spline-container');

 const app = new Application(canvas, {
   wasmPath: 'https://your-cdn.b-cdn.net/spline-scene/'
 });

 app.load('https://your-cdn.b-cdn.net/spline-scene/scene.splinecode')
   .then(() => console.log('Scene loaded'))
   .catch((err) => console.error('Load error', err));
</script>

⚠️ Common Pitfalls

• Double-check that you selected Vanilla JS during export.
• Ensure all runtime files come from the same export package.
• Confirm that CORS headers and MIME types are correctly set in Bunny.
• Webflow preview mode may not load external scripts—publish your site to test properly.

✅ You're Done!

If everything is set up correctly, your Spline scene will now render beautifully within your Webflow site. This setup gives you more flexibility, faster load times, and full ownership of your assets.

If something isn’t working, check your browser’s console for errors and verify that all URLs are correct and publicly accessible.

Stay tuned for updates from Spline, as new export formats and features continue to improve the self-hosting workflow.