useStudio

The primary hook for interacting with the canvas editor. Provides access to items, selection state, and all item manipulation functions.

Import

import { useStudio } from '@asset-studio/core'

Usage

function MyComponent() {
  const {
    items,
    selectedItem,
    addItem,
    updateItem,
    deleteItem,
  } = useStudio()

  // ...
}

Return Value

State

Property	Type	Description
items	Item[]	All items currently on the canvas.
selectedItemId	string | null	ID of the currently selected item.
selectedItem	Item | undefined	The full object of the selected item.
documentWidth	number	Canvas document width in pixels.
documentHeight	number	Canvas document height in pixels.
duration	number	Total timeline duration in milliseconds.
stageRef	React.RefObject<Konva.Stage>	Direct ref to the Konva stage for low-level access.

Item Management

Function	Signature	Description
addItem	(type: ItemType, data: Partial<Item>) => void	Add a new item to the canvas.
updateItem	(id: string, changes: Partial<Item>) => void	Update properties of an existing item.
updateItems	(updates: Array<{ id: string } & Partial<Item>>) => void	Update multiple items at once.
deleteItem	(id: string) => void	Remove an item from the canvas.
clearItems	() => void	Remove all items from the canvas and clear selection.
duplicateItem	(id: string) => void	Duplicate an item.
reorderItem	(fromIndex: number, toIndex: number) => void	Change the Z-order of items.

Selection

Function	Signature	Description
setSelectedItemId	(id: string | null) => void	Select an item by ID, or clear selection with null.

Document

Function	Signature	Description
setDocumentWidth	(width: number) => void	Change the canvas document width.
setDocumentHeight	(height: number) => void	Change the canvas document height.

History

Function	Signature	Description
handleBack	() => void	Undo the last action.
handleForward	() => void	Redo the last undone action.

Examples

Add a text item

const { addItem } = useStudio()

addItem('Text', {
  x: 100, y: 100,
  width: 400, height: 80,
  itemProps: {
    text: 'Hello, World!',
    fontSize: 48,
    color: '#ffffff',
    fontFamily: 'Inter',
  },
})

Update an item

const { updateItem, selectedItemId } = useStudio()

// Move the selected item
updateItem(selectedItemId, { x: 200, y: 150 })

// Change text content
updateItem(selectedItemId, { itemProps: { text: 'Updated text' } })

Delete selected item

const { deleteItem, selectedItemId } = useStudio()

if (selectedItemId) {
  deleteItem(selectedItemId)
}

Undo / Redo

const { handleBack, handleForward } = useStudio()

// Wire to keyboard shortcuts
useEffect(() => {
  function onKeyDown(e) {
    if (e.metaKey && e.key === 'z') handleBack()
    if (e.metaKey && e.shiftKey && e.key === 'z') handleForward()
  }
  window.addEventListener('keydown', onKeyDown)
  return () => window.removeEventListener('keydown', onKeyDown)
}, [])

Related

• Item Types
• usePlayer