Resources
See the integration before you build it.
Try choosing an artwork, changing its image version and returning it to an editor. These examples show what you’ll build with the SDK and your own backend routes.
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 versionChoose from that artwork’s available versions, which may include an uploaded crop, square, automatic 1080p or Original Ratio. Check that the result keeps your chosen rendition.
- 03
Inspect the resultThe final SDK result contains the artwork references. Temporary launch and selection codes are used during the SDK flow and are not part of that result.
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.
Load the SDK with a normal script tag; it needs no framework or separate stylesheet. Download the type declarations if you use TypeScript.
Versioning and lifecycle
The /sdk/v1/ path pins the major version. Create one client when your editor mounts and destroy it when that component is permanently removed. Repeated open() calls during a selection share the same Promise and focus the active Picker. In the example below, config is your endpoint and CSRF configuration from the quickstart.
const picker = VieunitePicker.create(config);
// Call this from your editor component's unmount / teardown hook.
function disposeArtworkPicker() {
picker.destroy();
}const picker: VieunitePicker.PickerClient = VieunitePicker.create(config);
// Call this from your editor component's unmount / teardown hook.
function disposeArtworkPicker() {
picker.destroy();
}
async function chooseArtwork(): Promise<VieunitePicker.PickerResult> {
return picker.open({ allowedTypes: ["artwork"] });
}