Exporting as Code

Code Export Options

Spline allows you to export the code of your scene as:

Vanilla JS

📄 Runtime Docs: https://www.npmjs.com/package/@splinetool/runtime

Three.js

📄 Loader Docs: https://www.npmjs.com/package/@splinetool/loader

React

📄 React Docs: https://github.com/splinetool/react-spline

react-three-fiber

📄 r3f Docs: https://github.com/splinetool/r3f-spline

💡

Animations and events are only enabled when exporting to Vanilla js and React.

How to Export

Once you’re happy with your scene, press the Export button on the toolbar.
Select “Code” on the left sidebar and choose from any of the code types available on the top dropdown, then wait for the URL to be generated.
A toast notification will appear to let you know when your URL is ready.
You can copy the code, open it as a CodeSandbox project, or download the local files to host it yourself.
Multiple properties can be adjusted under Play Settings.

💡

You can download the code exports and host them on your own server.

About the Web Content Export (Vanilla JS)

Following the steps above you can export as Web Content by choosing Vanilla JS as the code type under the dropdown.
You will find a button at the bottom of the panel to download the content as a .zip file.
If you want to play the experience, you need to run a localserver. Open your OS terminal or console from the uncompressed folder path and run: python -m SimpleHTTPServer

The files saved from the "Web Content" option are the same used for the "Public URL". This is the way to add the files directly to your web project.

The file structure might look something like the following:

💡

Note: Inside the index.html there is a Canvas element, which runs the WebGL 3D graphics.

Drafts

You can use drafts to version your exports. Each Draft is a snapshot of your scene.

The Draft labeled Production is the one to which the main URL is pointing to. If there are additional changes on the scene or export settings, click Generate Draft or Promote to Production for the code to reflect the latest changes.

There is one production code, and many drafts can be created as needed under the Drafts tab. Any of the Drafts can be promoted to Production.

Handling events outside of Spline

You can handle events outside of Spline and use them to manipulate your spline objects.

Here are 2 examples:

Sandbox - CodeSandbox

t.co

Sandbox - CodeSandbox

t.co

👉 Next Steps

Play Settings

How to optimize your scene

…or learn

Exporting as Image

How to Import Content