Embeds
Show a published shader in your app, pin a version, or preview a draft.
<Shader id /> shows the latest published version of a shader, or the one
you choose. Unpublished changes don't reach your site until you publish.
const id = "9f3c7b21-4d8e-4a10-9f2b-7c6d5e4f3a21";
<Shader id={id} /> // latest published version
<Shader id={id} version="1.2.0" /> // always this version
<Shader id={id} draft={previewToken} /> // your unpublished draftPass version or draft, not both.
Latest or pinned
Without version, the embed shows your latest publish. Add revalidate and
new versions appear on their own, without redeploying your app.
With version, the embed always shows that version.
Previewing a draft
To see unpublished work on a real page, pass a preview token as draft.
Create one under Draft preview on your organization's API keys page.
Anyone who can load the page can see the token and use it to view any draft in your organization. Use draft embeds on previews and staging only, not on a public page.
Choosing an output
If the shader has named outputs, pick one with output:
<Shader id="9f3c7b21-4d8e-4a10-9f2b-7c6d5e4f3a21" output="mask" />Staying up to date
<Shader revalidate={ms} revalidateOnFocus> checks for new versions. A few
seconds is a fine interval. New versions swap in without a flicker.
Anyone with a published shader's id can embed it, so treat ids like unlisted links. Embeds don't track your visitors.