---
title: "Output data | Customer's Canvas Hub"
canonical: "https://customerscanvas.com/docs/hub/dev-center/frontend-integration/workflow-elements/handy-editor/output-data/"
---

# Output data

> When the user finishes editing the product, the Handy Editor triggers the `addtocart` event. To process the result, handle this event as follows:

```js
handyEditor.addEventListener("addtocart", event => {
    const cartItem = event.detail;
    console.log(cartItem);
});
```

As a result, the following object will be returned:

```js
{
  key: string;               // the key of this lineItem, the same as `stateId`
  quantity: number;          // quantity of items in the order
  originalProductId: string; // product ID before editing
  sku: string;               // a product SKU 
  properties: {
    _stateId: string[]; // an array of state files generated by the customer
    _userId: string;    // a customer ID
    _hidden: {
      images: string[]; // an array of URL previews
    };
  };
}
```

Based on this data, you can create a project with the endpoint [`POST /api/storefront/v1/projects/with-single-item`](https://customerscanvas.com/docs/hub/dev-center/api/storefront.md#tag/projects/CreateWithSingleItem). For more details, refer to the [Working with projects](https://customerscanvas.com/docs/hub/dev-center/api/storefront/working-with-projects.md) topic.

To learn how you can reopen the editor with a customized design, refer to the [Recovery strategies](https://customerscanvas.com/docs/hub/dev-center/frontend-integration/workflow-elements/handy-editor/input.md#recovery-strategies) topic.