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
How to Export
- Once you’re happy with your scene, press the
Export
button on the toolbar. - Select “Code” from the main dropdown and choose from any of the code types available on the secondary 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.
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:
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:
👉 Next Steps
…or learn