---
title: "Samples of Workflow Elements | Customer's Canvas Hub"
canonical: "https://customerscanvas.com/docs/hub/dev-center/samples/workflow-elements/"
---

# Samples of Workflow Elements

> The source code of the Workflow Element samples is available at:

https://github.com/aurigma/CCHubSample_WorkflowElements

This repo contains several examples that will allow you to try out the API in action:

- [Simple Editor](https://customerscanvas.com/docs/hub/dev-center/frontend-integration/workflow-elements/simple-editor.md)
- [Handy Editor](https://customerscanvas.com/docs/hub/dev-center/frontend-integration/workflow-elements/handy-editor.md)
- [Template Editor](https://customerscanvas.com/docs/hub/dev-center/frontend-integration/workflow-elements/template-editor.md)

These examples show how to authenticate in Customer's Canvas Hub, display an editor on a React page, and submit results to the server to start the rendering process.

## Technical details

This sample is based on React as a frontend framework and basic Node.js Express-based backend.

## Getting started

### Configuration

Once you clone this repo, you need to configure the **.env** file. To do this, create a copy of the **.env.sample** file and add your Customer's Canvas details to the new file.

The environment variables are divided into two groups:

1. **General Customer's Canvas Hub variables**: These are available only on the backend.
2. **Frontend-specific variables**: These are typically used for certain samples and have the `VITE_` prefix.

#### General variables

The following variables specify your tenant settings:

- `CCHUB_BASEURL`: Depending on your instance, it is either `https://customerscanvashub.com` (US), `https://eu.customerscanvashub.com` (Europe), or `https://au.customerscanvashub.com` (Australia).
- `CCHUB_STOREFRONTID`: A storefront (or *integration*) record ID, created as per the [Help Center > Admin's Guide > Settings > Integrations](https://customerscanvas.com/docs/hub/admin-guide/settings/integrations.md).
- `CCHUB_CLIENTID` and `CCHUB_CLIENTSECRET`: OAuth2 Client Credentials of your app, registered in your tenant as per the [Help Center > Admin's Guide > Settings > External Apps](https://customerscanvas.com/docs/hub/admin-guide/settings/external-apps.md).
- `CCHUB_TENANTID`: Specify your tenant ID. See the [Help Center > Admin's Guide > Settings > Tenant](https://customerscanvas.com/docs/hub/admin-guide/settings/tenant.md).
- `VITE_CCHUB_ENVIRONMENT`: The location of your Customer's Canvas instance — `us`, `eu`, or `au`.

#### Basic Samples-specific variables

For basic code examples, both Simple Editor and Handy Editor, specify:

- `VITE_BASICSAMPLE_CCHUB_PRODUCTID`: Create a product in Customer's Canvas as per the [Help Center > Admin's Guide > PIM Module > Creating products](https://customerscanvas.com/docs/hub/admin-guide/pim/creating-products.md) and set its ID here.

#### No-PIM Handy Editor-specific variables

Samples illustrating how to load the Handy Editor without the PIM module require:

- `VITE_NOPIMSAMPLE_CCHUB_PUBLICDESIGNID`: A public design ID. You can obtain it through the admin panel (Assets > Designs) as explained at [Help Center > Admin's Guide > Assets > File Manager](https://customerscanvas.com/docs/hub/admin-guide/manage-assets/file-manager.md#information).
- `VITE_NOPIMSAMPLE_CCHUB_EDITORMOCKUPID`: A comma-separated list of mockup IDs for the editor. You can obtain the ID through the admin panel [Assets > Mockups](https://customerscanvas.com/docs/hub/admin-guide/manage-assets/file-manager.md#information).
- `VITE_NOPIMSAMPLE_CCHUB_PREVIEWMOCKUPID`: A comma-separated list of mockup IDs for the preview. You can obtain the ID through the admin panel [Assets > Mockups](https://customerscanvas.com/docs/hub/admin-guide/manage-assets/file-manager.md#information).

#### Template Editor-specific variables

For the sample illustrating how to work with the Template Editor, specify:

- `VITE_TEMPLATEEDITOR_CCHUB_PUBLICDESIGNID`: A public design ID to open in the Template Editor.

### Install and run

Run

```bash
npm install
```

Then

```bash
npm run dev
```

The app opens at http://localhost:3000