openpencil/packages/docs/programmable/sdk/api/advanced/use-variables.md
Danila Poyarkov 29e0d3acf2
refactor(vue)!: remove the variables table composables (#908)
The variables dialog now uses the tokens panel, so useVariablesEditor, useVariablesTable, useVariablesDialogState, and the table-only formatModeValue, parseVariableValue, and shortName helpers have no users. Removing them drops the @tanstack/vue-table dependency; their SDK pages redirect to useVariables.
2026-10-06 12:35:41 +00:00

781 B

title description
useVariables Read and mutate variable collections, variables, and variable values.

useVariables

useVariables() is the lower-level variables composable behind the higher-level variables editor helpers.

Use it when you want direct control over collections, active modes, filtering, and CRUD operations without taking the full table/dialog abstraction.

Usage

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

const variables = useVariables()

Returns

  • collections
  • activeCollectionId
  • activeCollection
  • activeModes
  • variables
  • searchTerm
  • setSearchTerm()
  • setActiveCollection()
  • addCollection()
  • renameCollection()
  • addVariable()
  • removeVariable()
  • renameVariable()
  • updateVariableValue()