Resources
See the integration before you build it.
Use the live examples to evaluate the editor experience, inspect the returned reference, and understand which responsibilities remain inside your CMS.
Minimal example
Picker quickstart
A single button opens the hosted modal and prints the redeemed reference. Use it to confirm modal behaviour, multi-select, version choice, cancellation and the SDK result shape.
Open Picker quickstart ↗- 01
Open and closeThe CMS page remains in place and keyboard focus returns to the trigger.
- 02
Choose a versionEach artwork exposes only its uploaded crop and/or original, labelled from that asset's actual resolution, orientation and ratio.
- 03
Inspect the resultThe page receives validated artwork references only—never launch or selection capabilities.
Complete lifecycle
CMS integration demo
A realistic editor shows selected artwork alongside content fields. It demonstrates saving the reference and rendition, resolving current metadata, and handling an unavailable item.
Open CMS demo ↗- 01
Editor stateSelection is integrated into an ordinary CMS authoring workflow.
- 02
Reference persistenceThe saved CMS value is provider, type, ID and artwork rendition.
- 03
Metadata refreshThe CMS resolves current preview-safe facts rather than trusting a permanent snapshot.
Hosted assets
Use the versioned SDK directly.
The browser module is a dependency-free classic script. Type declarations are available separately for TypeScript projects.
Versioning and lifecycle
The major version is part of the asset URL. Reuse one client per editor page and call picker.destroy() during permanent page teardown. Calling open() while an active flow exists returns the same Promise and focuses the existing Picker.
const picker = VieunitePicker.create(config);
window.addEventListener(
"pagehide",
() => picker.destroy(),
{ once: true },
);const picker: VieunitePicker.PickerClient = VieunitePicker.create(config);
window.addEventListener(
"pagehide",
() => picker.destroy(),
{ once: true },
);
async function chooseArtwork(): Promise<VieunitePicker.PickerResult> {
const result = await picker.open({ allowedTypes: ["artwork"] });
if (result.status === "selected") {
const selection: VieunitePicker.SelectedReference[] = result.selection;
await saveReferences(selection);
}
return result;
}