Web Dev Academy 3D & graphics · Spline Tool 35 / 64
3D & graphics

Spline

No-code 3D for the web. You design interactive 3D scenes in a Figma-like editor, then drop them onto any page with a single <spline-viewer> web component — no shader code required.

Demo 01

A live 3D scene in one tag

Below we load Spline's official <spline-viewer> web component from its CDN and point it at a public demo scene. Drag to orbit. If the remote scene can't load, a clearly-labelled local 3D stand-in takes over automatically.

loading Spline viewer…contacting Spline CDN…
<!-- 1. load the official web component -->
<script type="module"
  src="https://unpkg.com/@splinetool/viewer/build/spline-viewer.js"></script>

<!-- 2. embed your scene by URL -->
<spline-viewer
  url="https://prod.spline.design/.../scene.splinecode">
</spline-viewer>
Workflow

How no-code 3D works

Spline collapses the whole 3D pipeline into a visual editor. Designers who'd never write GLSL can ship production 3D.

01

Model

Drag primitives, sculpt and arrange objects on an infinite canvas.

02

Style

Add materials, lights and post-effects with sliders, not code.

03

Interact

Wire mouse, scroll and click events to animations visually.

04

Embed

Export a URL and drop the <spline-viewer> tag anywhere.

Under the hood

It's still WebGL

The <spline-viewer> component renders your scene with Three.js/WebGL behind the scenes — Spline is the friendly authoring layer, the same GPU technology from the earlier pages does the drawing. The difference is who writes it: a visual editor instead of you.

i
Attempting to load Spline's real <spline-viewer> web component from unpkg with a public demo scene. If the remote scene loads, the viewport above is a genuine Spline embed. If not, it falls back to a clearly-labelled local Three.js stand-in so the page always shows working 3D. The shared CSS shell styles the page chrome.

↑ All 64 tools