Embed Options | STLViewer

Last updated: 2026-06-05

Adding ?embed=true to any /view/:shareId URL switches the viewer into chromeless embed mode — header, footer, and info panel are hidden, leaving only the 3D canvas (and optionally the toolbar). Additional query parameters let you control every meaningful aspect of the rendering without writing JavaScript.

URL form

https://stlviewer.online/view/{shareId}?embed=true&param=value&...

URL conventions

Unknown parameters are silently ignored — future params will not break existing embeds.
Invalid values fall back to defaults without throwing errors.
Boolean parameters accept 1, 0, true, or false.
Parameters survive React Router in-viewer navigation and browser back/forward.

Embedding an externally hosted model (?url=)

If you already host your STL or 3MF file somewhere (GitHub, a CDN, your own server), you can display it without uploading to STLViewer first. Use the /view?url= form with a URL-encoded link to the file, and add &embed=true for chromeless embedding. Every embed parameter above works alongside ?url= — for example &background=transparent&autoRotate=0.

https://stlviewer.online/view?url={encodedFileUrl}&embed=true&param=value&...

The file URL must use HTTPS and end in .stl or .3mf — other protocols and extensions are rejected and redirect to the home page.
The model is fetched client-side, directly from the visitor's browser — no model bytes pass through STLViewer's servers.
Because the fetch is cross-origin, the host server must return permissive CORS headers (e.g. Access-Control-Allow-Origin: *). Without them the embed shows a 'Cannot load this model' message instead of the model.
URL-encode the file link before placing it in the url parameter so its own query string (e.g. presigned S3 signatures) survives intact.
The whole file is loaded into browser memory, so keep externally hosted models under roughly 100 MB for reliable rendering on typical devices.

Parameter reference

All parameters are optional. Defaults differ between standalone and embed mode.

Parameter	Values	Standalone default	Embed default	Description
`axis`	`z \| y`	z	z	Which world axis points up. Affects auto-rotation plane and camera orientation.
`autoRotate`	`boolean`	1	1	Whether the model spins continuously on load.
`render`	`solid \| wireframe \| xray`	solid	solid	Render mode.
`grid`	`boolean`	1	0	Floor grid beneath the model.
`light`	`studio \| neutral`	studio	studio	Lighting environment preset.
`background`	`auto \| light \| dark \| transparent \| hex \| env:<id>`	auto	auto	Canvas backdrop. auto follows the page theme; light/dark force a fixed colour; transparent makes the embed see-through so the host page shows behind the model; a 6-char hex (e.g. 1a2b3c) sets a custom colour; env:<id> uses an environment image (studio, sunset, dawn, forest, city, warehouse).
`material`	`preset ID`	—	—	Named material preset. See preset ID list below.
`ui`	`none \| minimal \| full`	full	none	Chrome visibility. none = canvas only. minimal = toolbar shown. full = toolbar + side panels.
`attribution`	`boolean`	1	1	Show the 'Powered by STLViewer' badge. false hides badge but keeps favicon + tooltip.

Material preset IDs

Use the preset ID as the value for the material parameter.

color

color-blue — Blue
color-pastel-green — Green
color-pastel-red — Red
color-pastel-yellow — Yellow

metal

metal-steel — Steel
metal-copper — Copper
metal-gold — Gold
metal-aluminium — Aluminium
metal-chrome — Chrome

wood

wood-oak — Oak
wood-walnut — Walnut
wood-pine — Pine

stone

stone-marble — Marble
stone-granite — Granite
stone-concrete — Concrete

plastic

plastic-white — White
plastic-black — Black

ceramic

ceramic-white-glossy — Porcelain

Examples

Minimal embed (default settings):

<iframe src="https://stlviewer.online/view/{shareId}?embed=true"
  title="My part" style="width:100%;height:600px;border:0;"
  loading="lazy" allowfullscreen></iframe>

Auto-rotating steel model:

<iframe src="https://stlviewer.online/view/{shareId}?embed=true&material=metal-steel&autoRotate=1"
  title="My part" style="width:100%;height:600px;border:0;"
  loading="lazy" allowfullscreen></iframe>

Static chromeless (no toolbar, no attribution badge):

<iframe src="https://stlviewer.online/view/{shareId}?embed=true&autoRotate=0&attribution=0"
  title="My part" style="width:100%;height:600px;border:0;"
  loading="lazy" allowfullscreen></iframe>

Transparent background (shows the host page behind the model):

<iframe src="https://stlviewer.online/view/{shareId}?embed=true&background=transparent"
  title="My part" width="800" height="600"
  frameborder="0" loading="lazy" allowfullscreen></iframe>

Externally hosted file (no upload — CORS-enabled host required):

<iframe src="https://stlviewer.online/view?url=https%3A%2F%2Fcdn.example.com%2Fmodel.stl&embed=true&autoRotate=0"
  title="My part" style="width:100%;height:600px;border:0;"
  loading="lazy" allowfullscreen></iframe>