What is Design Editor Web app?

Design Editor is an ASP.NET application that provides a user interface for editing designs in a browser. Designs may be created from scratch, loaded from templates created in InDesign or Photoshop, or from state files created in Customer's Canvas (both templates and previously saved users' designs).

Where do I get the Design Editor?

There are several options for getting a Design Editor instance:

1. A cloud version. We will provide you with access to the Customer's Canvas BackOffice application to manage its data as well as URLs to Design Editor and other applications and services you may want to deal with.
2. An on-premises version. If you purchase this option, you will be able to download Design Editor from your account on our site and install it as explained below.
3. An instance on your infrastructure managed by us. This is the same as the on-premises version, but you don't have to install it yourself. Just provide us with access to your infrastructure and we will do it for you. Contact us if you are interested in this option.

Installation and maintenance

Since the Design Editor is an ASP.NET application, it should be installed on IIS server (Windows only). All information about the Design Editor you may need to know as an IT Ops specialist can be found in the Installation and maintenance section.

Here are the most common topics:

• If you are planning your infrastructure and wondering what kind of machine Design Editor requires, refer to System requirements.

• The process of installation is described in the Installing and updating Design Editor section.

• A reference for the configuration files can be found at Design Editor configuration (the primary config is AppSettings.config).

• You can find best practice recommendations for configuring your server in the Managing applications section.

• If you encounter any problems, refer to the Troubleshooting section.

Integrating Design Editor into a frontend application

Now you have an instance of Design Editor up and running, and you need to display the editor in a frontend application. There are two ways to do this:

1. Use the IFrame API JavaScript library.
2. Use the UI Framework and create a configuration with a design-editor widget, which is a wrapper around IFrameApi.js.

If you decide to use the IFrame API, follow the guide that matches your installation type:

• Self-hosted Design Editor
• Cloud Design Editor

If you prefer UI Framework, follow the Design Editor widget tutorial.

REST API

To make calls to the Design Editor APIs, send HTTP requests as described in the Design Editor Web API section. Most of the APIs require authentication — the primary way is to send an API key, while certain APIs use token-based authentication. Learn how authentication works in the Authentication article.

If you use Design Editor standalone (not connected to the cloud), use these APIs to manipulate assets and user data. Use Personalized rendering whenever you want to generate images based on state files or templates without an editor, for example, in variable data printing scenarios.

Other editors and SDKs

Customer's Canvas includes several tools for editing designs and personalizing print products. Choose the one that fits your task:

• Design Editor IFrame API — embed the Design Editor application into your page and configure it.
• Design Editor Web API — work with assets and user data or render designs from the server side.
• UI Framework — describe multi-step editing workflows in a JSON configuration.
• Design Atoms JS — build your own editor with the design object model, rendering, and a viewer control.
• Design Atoms .NET — work with designs from a .NET backend, including rendering.