useComponentProperties
useComponentProperties() exposes compatible component properties for the selected instances and an undo-aware value action.
import { useComponentProperties } from '@open-pencil/vue'
const { active, controls, setValue } = useComponentProperties()
// Property IDs are stable Figma definition IDs when imported from .fig.
setValue('12:34', 'Enabled')Each item in controls contains:
idandnamefrom the component property definition;type:VARIANT,TEXT,BOOLEAN, orINSTANCE_SWAP;value: a string orMIXED;optionsfor variant and instance-swap controls.
active is true only when every selected node is an instance and each instance exposes the same ordered property IDs and types. Compatible multi-selection changes are grouped into one undo entry.
For live text inputs, call setTextValue(propertyId, value) on each model update and flush() on blur or Enter. Text appears immediately, while rapid changes share an undo entry. Batches also finish after an idle pause, a selection/page change, or scope disposal. setValue() remains a discrete edit.
Text and boolean properties update the referenced instance descendant. Instance-swap properties replace the referenced nested instance. Variant changes swap the main component and then reapply non-variant assignments, so custom labels, visibility, and nested swaps survive the change and its undo/redo cycle.
Imported .fig definitions retain typed defaults, property references, assignments, and preferred instance-swap values. Missing swap targets remain explicit rather than silently selecting another component.