---
title: "Simple Editor | Customer's Canvas Hub"
canonical: "https://customerscanvas.com/docs/hub/admin-guide/workflows/workflow-elements/simple-editor/"
---

# Simple Editor

> Simple Editor is a Workflow Element that customers use directly on a product page. The left side of the screen shows a preview of the product, and the right side contains input fields and product options. When customers change an option or a field, the preview updates immediately.

Use this section to configure what the editor shows: the input fields, the product options, the design variant selector, proof images, and the images in the paginator next to the preview.

![Simple Editor with the product preview on the left and the options form on the right.](./images/simple-editor.png)

## What you can do

- Configure the input fields of the form, including text fields and image placeholders.
- Set up product options and the design variant selector.
- Configure proof images and the approval checkbox that customers select before they add the product to the cart.
- Provide quantity values and images for the paginator next to the preview.
- Hide the SKU and the price of the product.

## Configuration format

- Component: `simple-editor`
- Tag name: `au-simple-editor`
- Actual protocol version: `2`

```json
{
  "configVersion": 2,
  "component": "simple-editor",
  "tagName": "au-simple-editor",
  "input": {},
  "settings": {},
  "resources": {},
  "localization": {}
}
```

See the [workflow file format](https://customerscanvas.com/docs/hub/admin-guide/workflows/workflow-elements/format.md) to learn how one file combines several element configurations.

## Recommended path

If you configure the Simple Editor for the first time, follow these pages in order:

1. [Configure the editor behavior](https://customerscanvas.com/docs/hub/admin-guide/workflows/workflow-elements/simple-editor/settings.md)
2. [Provide quantity values and product images](https://customerscanvas.com/docs/hub/admin-guide/workflows/workflow-elements/simple-editor/resources.md)

## Developer's documentation

- [Launch the Simple Editor on your website](https://customerscanvas.com/docs/hub/dev-center/frontend-integration/workflow-elements/simple-editor/quick-start.md)
- [Embed your own HTML into the editor](https://customerscanvas.com/docs/hub/dev-center/frontend-integration/workflow-elements/simple-editor/slots.md)
- [Handle the customization results](https://customerscanvas.com/docs/hub/dev-center/frontend-integration/workflow-elements/simple-editor/output-data.md)
- [What's new](https://customerscanvas.com/docs/hub/dev-center/frontend-integration/workflow-elements/simple-editor/whats-new.md)