---
title: "Simple Editor | Customer's Canvas Hub"
canonical: "https://customerscanvas.com/docs/hub/dev-center/frontend-integration/workflow-elements/simple-editor/"
---

# Simple Editor

> The Simple Editor is a Workflow Elements editor that lets customers customize a product right on a storefront page: the left side shows a preview of the design, and the right side contains input fields and options. When customers change any of them, the preview updates automatically.

![The Simple Editor with the design preview on the left and the input fields and options on the right.](images/simple-editor.png)

## What you can do

- Embed the editor into a page of an online store.
- Configure input fields, product options, and quantity.
- Customize the editor layout with slots and CSS variables.
- Receive the customized product after customers finish editing.

## Recommended path

1. [Launch the Simple Editor on your website](https://customerscanvas.com/docs/hub/dev-center/frontend-integration/workflow-elements/simple-editor/quick-start.md)
2. [Configure the editor appearance and behavior](https://customerscanvas.com/docs/hub/dev-center/frontend-integration/workflow-elements/simple-editor/settings.md)
3. [Handle the customization results](https://customerscanvas.com/docs/hub/dev-center/frontend-integration/workflow-elements/simple-editor/output-data.md)

## Reference

- **Configuration**: [Settings](https://customerscanvas.com/docs/hub/dev-center/frontend-integration/workflow-elements/simple-editor/settings.md), [Resources](https://customerscanvas.com/docs/hub/dev-center/frontend-integration/workflow-elements/simple-editor/resources.md), [Custom field order](https://customerscanvas.com/docs/hub/dev-center/frontend-integration/workflow-elements/simple-editor/custom-field-order.md)
- **Appearance**: [Slots](https://customerscanvas.com/docs/hub/dev-center/frontend-integration/workflow-elements/simple-editor/slots.md), [Styling](https://customerscanvas.com/docs/hub/dev-center/frontend-integration/workflow-elements/simple-editor/styling.md)
- **Integration**: [Web-component API](https://customerscanvas.com/docs/hub/dev-center/frontend-integration/workflow-elements/simple-editor/web-component-api.md), [Output data](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)