---
title: "IItemData | Customer's Canvas On-Premises"
canonical: "https://customerscanvas.com/docs/on-premises/design-atoms-js/reference/design-atoms-interfaces/IItemData/"
---

# IItemData

> A structure containing parameters of custom design elements.

## Interfaces

### IItemData

#### Remarks

For details, you can refer to the [Toolbox https://customerscanvas.com/dev/editors/iframe-api/editor-configuration/toolbox.html\|Toolbox](https://customerscanvas.com/dev/editors/iframe-api/editor-configuration/toolbox.html) topic.

#### Example

```js
var configuration = {
   angle: 90,
   opacity: 0.5,
   textWrappingMode: "tight",
   themeBinding: {
       styles: [ "DimImages" ]
   },
   manipulationPermissions: {
       allowMoveHorizontal: false,
       allowMoveVertical: false
   },
   itemPermissions: {
       allowZOrderChange: false,
       allowOpacityChange: true
   }
};

CustomersCanvas.IframeApi.loadEditor(iframe, productDefinition, configuration);
```

#### Extended by

- [`IGroupItemData`](https://customerscanvas.com/docs/on-premises/design-atoms-js/reference/design-atoms-interfaces/IGroupItemData.md#igroupitemdata)
- [`ILineItemData`](https://customerscanvas.com/docs/on-premises/design-atoms-js/reference/design-atoms-interfaces/ILineItemData.md#ilineitemdata)
- [`IShapeItemData`](https://customerscanvas.com/docs/on-premises/design-atoms-js/reference/design-atoms-interfaces/IShapeItemData.md#ishapeitemdata)

#### Properties

##### adjustSize?

```ts
optional adjustSize?: boolean;
```

##### angle?

```ts
optional angle?: number;
```

An angle, which design elements are rotated to. By default, this value is `0`.

##### blendMode?

```ts
optional blendMode?: BlendMode;
```

A blend mode that applies to design elements being added to the canvas.

##### height?

```ts
optional height?: string | number;
```

The height of design elements being added to the canvas, in points or percent. For QR codes, the `width` value is used for both `width` and `height`.

##### isVariable?

```ts
optional isVariable?: boolean;
```

Marks a design element as a variable item. The default value is `false`.

##### itemPermissions?

```ts
optional itemPermissions?: IItemPermissionsData;
```

A structure defining the Item Menu and the Floating item toolbar for design elements.

##### location?

```ts
optional location?: ILocationData;
```

The coordinates of design elements being added to the canvas. By default, you can add them to the center of your product.

##### manipulationPermissions?

```ts
optional manipulationPermissions?: IManipulationPermissionsData;
```

A structure defining the manipulation permissions for design elements.

##### name?

```ts
optional name?: string;
```

The name of design elements being added to the canvas.

##### opacity?

```ts
optional opacity?: number;
```

An opacity that applies to design elements. This value can be from `0` to `1`. By default, it is `1`.

##### textWrappingMode?

```ts
optional textWrappingMode?: WrappingMode;
```

A wrapping mode that applies to wrap text around design elements, one of `"none"`, `"square"`, or `"tight"`. By default, it is `"none"`.

##### themeBinding?

```ts
optional themeBinding?: IThemeBindingData;
```

A style or a color that applies to new design elements.

##### violationSettings?

```ts
optional violationSettings?: IViolationSettings;
```

A structure defining the design validation parameters and warnings.

##### visible?

```ts
optional visible?: boolean;
```

Indicates whether the design element is visible on the canvas. The default value is `true`.

##### visualizationPermissions?

```ts
optional visualizationPermissions?: IVisualizationPermissionsData;
```

A structure defining the visualization permissions for design elements.

##### width?

```ts
optional width?: string | number;
```

The width of design elements being added to the canvas, in points or percent.