Spline integration guide · English edition October 10, 2026

How to Embed a Spline Scene Without an iframe

A Spline public-page iframe is a quick way to show an interactive scene. A code export gives you a different integration: a canvas within your own page. Hosting a scene file yourself does not automatically remove runtime dependencies, branding conditions, or export restrictions.

The editable project is not the web export

The .spline file in a resource pack is an editable project containing objects, materials, lights, camera settings, and animation. Do not rename it and assume it has become a browser-ready scene. Export the version you want to publish and use the files and runtime initialization supplied for that export.

A supported starting workflow

1. Open a copy of the project in Spline. Adjust the camera and materials for the space available on your page.
2. Use Export → Code and choose the code target appropriate for your site, such as Vanilla JS.
3. Review the generated code and available download options. Keep its dependencies and file paths together; serve it through HTTP rather than opening module-based exports as local file URLs.
4. Integrate the canvas and exported files, then test loading, framing, scroll behavior, and errors on your target devices.

See Spline's code export documentation for the current workflow. Available options depend on your account and export target.

The earlier local-runtime example

The Spanish source shows a version-specific integration used by Lienzo: a canvas, a pinned runtime from Spline's CDN, and an exported binary passed to Application.start. It also describes extracting an embedded byte array from a published page. That page structure is not a stable export API, and the working project in the resource ZIP is not that binary. Prefer the supported export workflow above for a new integration.

The following source example is retained for context. Its scene path is a placeholder; it is not a ready-to-run conversion of a downloaded project. Verify the runtime API and the export you actually have before adapting it.

<div style="position:relative;aspect-ratio:16/9">
  <canvas id="escena" style="width:100%;height:100%;display:block"></canvas>
</div>

<script type="module">
  const { Application } = await import(
    'https://cdn.spline.design/@splinetool/runtime@2.0.8/build/runtime.js'
  );
  const app = new Application(document.getElementById('escena'), {
    htmlContentMode: 'inline'
  });
  const datos = await fetch('/ruta/a/tu/escena.spline');
  await app.start(new Uint8Array(await datos.arrayBuffer()));
</script>

The runtime URL is pinned to the source example's version, not claimed to be the latest release. A file you host locally may still depend on a remote runtime or external assets. Measure all requests in the Network panel rather than using the project ZIP size as your page's loading cost.

Code export and fully self-hosted export are different

Spline separately documents a Self-Hosted export that bundles the runtime and assets. Its documentation currently identifies this as an Enterprise feature. Check the options and conditions of your account; a custom canvas does not itself grant permission to redistribute the runtime.

Three integration problems to catch

• Cropped framing: the camera composition and container aspect ratio both matter. Match the ratio or adjust the camera; a canvas that fills its box does not guarantee the object fits.
• The scene captures page scrolling: review Zoom and Page Scroll, including touch settings. Confirm that a visitor can scroll past the scene on a real phone.
• A renderer is unavailable: review the renderer options for the exported scene and test the devices you support. Provide a static fallback when the interactive renderer cannot run.

The current Play Settings documentation recommends Auto for WebGPU with WebGL fallback. Branding removal is controlled by the eligible subscription and export settings, not by replacing an iframe.

When an iframe is enough

For a one-off page in a visual site builder, a public embed may be the simpler choice. A canvas integration is useful when the scene is a lasting part of your site and you need control over its placement or loading. It still needs a renderer, a supported device, and maintenance as the export changes.

Practice with editable scenes

Try the five-scene pack or the eight web development scenes. Read the resource-specific credits before using a scene in a client project.