---
title: "Web-component API | Customer's Canvas Hub"
canonical: "https://customerscanvas.com/docs/hub/dev-center/frontend-integration/workflow-elements/template-editor/web-component-api/"
---

# Web-component API

> The Web Component API allows you to interact with a web component by calling its methods or receiving and modifying data using its properties, as well as events that the web component sends.

To work with the Web Component API, you need to obtain the appropriate HTML element using any method available in the Document Object Model (DOM). For example, you can use the `getElementsByTagName` method:

```js
const editor = document.getElementsByTagName("au-template-editor")[0];
```

After obtaining the element, you can use the API as follows:

```js
const imageResolutionsData = editor.getImagesResolution();
```

The API of the web component will only be available after it has been loaded and initialized.

## Methods

### init(configuration)

**Description**: Initializes the component after reading parameters from the workflow and opening a design.

**Arguments**:

- `configuration`: `ITemplateEditorInitArgs`

**Returns**: `void`

The `configuration` object includes integration settings, the design to open, and editor settings. For details, refer to the [Initialization](https://customerscanvas.com/docs/hub/dev-center/frontend-integration/workflow-elements/template-editor/initialization.md), [Settings](https://customerscanvas.com/docs/hub/dev-center/frontend-integration/workflow-elements/template-editor/settings.md), and [Resources](https://customerscanvas.com/docs/hub/dev-center/frontend-integration/workflow-elements/template-editor/resources.md) topics.

**Example**:

```js
editor.init({
    configVersion: 2,
    integration: {
        tenantId: <yourTenantId>,
        user: {
            id: <userId>,
            token: <userToken>
        },
        storefrontId: <yourStorefrontId>,
        cchubApiGatewayUrl: "https://api.customerscanvashub.com"
    },
    input: {
        designTemplateId: <templateId>
    },
    settings: {
        itemBuilder: {
            image: { borderWidth: 10, borderColor: "rgb(255, 0, 13)" }
        },
        listSettings: { bulletChar: "*" }
    }
});
```

### update(configuration)

**Description**: Updates the editor configuration.

**Arguments**:

- **configuration**: `ITemplateEditorInitArgs` — Editor configuration with fields to be updated.

**Returns**: `void`

**Example**:

```js
editor.update({
    "settings": {
        "designViewer": { "unit": "in" }
    }
});
```

### getImagesResolution()

**Description**: Returns information about the resolution of images used in the design.

**Arguments**: None

**Returns**: `IImageResolution[]`

```ts
interface IImageResolution {
    item: Item;
    resolution: number;
    qualityState: "None" | "Good" | "Warning" | "Bad";
}
```

**Example**:

```js
const imageResolutionsData = editor.getImagesResolution();
const haveBadImages = imageResolutionsData.map(data => data.qualityState).includes("Bad");
```

### getSerializedDesignModel()

**Description**: Returns the serialized model of the current design.

**Arguments**: None

**Returns**: `object`

**Example**:

```js
const model = editor.getSerializedDesignModel();
console.log(model);
```

### save()

**Description**: Saves changes to the current design.

**Arguments**: None

**Returns**: `Promise<void>`

**Example**:

```js
await editor.save();
```

## Properties

### injector

**Description**: An [Angular injector](https://angular.io/api/core/Injector) that allows you to get the provider values.

**Type**: `Injector`

**Example**:

```js
const store = editor.injector.get("STORE_TOKEN");
console.log(store);
```

### viewer

**Description**: The viewer instance that renders the design. An instance of the `Viewer` class from the `@aurigma/design-atoms` library.

**Type**: `Viewer`

**Example**:

```js
const viewer = editor.viewer;
console.log(viewer);
```

## Events

### onload

**Description**: This event is triggered after the editor is loaded and initialized.

**Bubbles**: Yes

**Data**: None

**Example**:

```js
editor.addEventListener("onload", event => console.log(event));
```

### change

**Description**: This event is triggered after a design change.

**Bubbles**: Yes

**Data**: None

**Example**:

```js
editor.addEventListener("change", event => console.log(event));
```

### savedesignsuccess

**Description**: This event is triggered after the design has been saved successfully.

**Bubbles**: Yes

**Data**: None

**Example**:

```js
editor.addEventListener("savedesignsuccess", event => console.log(event));
```

### savedesignerror

**Description**: This event is triggered when an error occurs while saving the design.

**Bubbles**: Yes

**Data**: None

**Example**:

```js
editor.addEventListener("savedesignerror", event => console.log(event));
```