openpencil/packages/docs/programmable/sdk/api/composables/use-shared-style-binding.md
Danila Poyarkov c96f87bf9b feat(editor): add shared style bindings
- Model imported fill, stroke, text, effect, and grid style definitions and references

- Add SDK and app selectors with mixed-selection batching, detach-on-edit, and undo restoration

- Preserve style definitions through .fig export and extracted subgraphs

- Document the shared-style composable and update compatibility coverage
2026-07-17 20:28:22 +03:00

1.5 KiB

title description
useSharedStyleBinding Apply and detach local fill, stroke, text, effect, and grid styles.

useSharedStyleBinding

useSharedStyleBinding(kind) exposes the selected nodes' shared-style reference, compatible local style definitions, and undo-aware bind/detach actions.

import { useSharedStyleBinding } from '@open-pencil/vue'

const fillStyle = useSharedStyleBinding('fill')

fillStyle.bind('1:120')
fillStyle.unbind()

Supported kinds are fill, stroke, text, effect, and grid.

  • active requires every selected node to support the requested style domain.
  • styleId is the shared ID, null, or MIXED.
  • styles lists compatible local definitions imported with the document.
  • bind(id) applies supported style properties and the reference in one undo step.
  • unbind() keeps the resolved properties and removes only the reference.
  • Multi-selection changes are grouped into one undo entry.

Manual edits to fills, strokes, supported text properties, effects, or layout grids automatically detach the matching style reference. Other style domains remain bound.

OpenPencil currently consumes styles already present in a document. Creating, renaming, publishing, and synchronizing style libraries is outside this composable's scope.