Item Types Overview

Every element on the canvas is an item. All items share a set of common properties and can be created with addItem from useStudio.

Available Types

Type	Description
Image	Raster images with filters, borders, masks, and cropping
Text	Text with full typography control
Shape	SVG-based vector shapes
Draw	Freehand pen strokes
ShapeDraw	Bezier shape drawing
Video	Video clips with trim, volume, and borders
Audio	Audio tracks with trim and volume

Common Properties

All item types share these base properties:

Property	Type	Description
id	string	Unique identifier (auto-generated on addItem).
type	string	The item type string.
x	number	X position on the canvas (pixels).
y	number	Y position on the canvas (pixels).
width	number	Width in pixels.
height	number	Height in pixels.
rotation	number	Rotation in degrees. Optional.
opacity	number	Opacity from 0 to 1. Optional.
locked	boolean	When true, the item cannot be selected or moved in the editor. Optional.
groupId	string	ID of the parent group. Optional.
enter	EnterAnimation	Animation played when the item enters the timeline. Optional.
exit	ExitAnimation	Animation played when the item exits the timeline. Optional.
effect	EffectAnimation	Continuous effect animation. Optional.

Creating Items

const { addItem } = useStudio();

// All items follow the same pattern:
addItem("Image", {
  x: 0,
  y: 0,
  width: 400,
  height: 300,
  itemProps: {
    // ... type-specific properties
  },
});

Updating Items

const { updateItem } = useStudio();

// Update base properties by item ID
updateItem(item.id, {
  x: 100,
  opacity: 0.8,
  rotation: 45,
});

// Update type-specific properties
updateItem(item.id, {
  itemProps: { color: "#ff0000" },
});