Editor SDKs overview
- 5 minutes to read
Customer's Canvas is not a single application. It consists of multiple services and SDKs that can be used for various web-to-print tasks. The Editor SDKs combine tools with which you can create your own applications for editing designs and personalizing print products.
Let's briefly describe the components of the Editor SDK.
Design Editor IFrame API
The IFrame API is a JavaScript library that embeds the Design Editor application into your page and allows for configuring and saving it. This API is a great choice if you just want to show the editor on a screen without integrating it with an e-commerce platform.
This editor application exposes an API that allows you to configure the editor's features, pass the IDML or PSD template, and receive a URL to a proof image or PDF print file.
For example, here is a simple code snippet illustrating how to load the Design Editor to the page and open it with a template.
let product = {
"surfaces": ["cards/invitation"]
};
let config = {
"userId": "john.wood"
};
var editor = await CustomersCanvas.IframeApi.loadEditor(
document.getElementById("editorFrame"), product, config);
Design Editor Web App
The Design Editor Web App is a backend application for the editor you load through IFrame API. Design Editor + IFrame API is a full-fledged standalone WYSIWYG editor you can integrate to your web application that can load and edit designs based on PSD and IDML templates and produce PDF or raster print files.
The Design Editor can be also used without IFrame API. It exposes REST API to use this application without loading the editor directly.
For example, you can manipulate the product assets using these APIs:
Another API is the Personalization API that provides you with the ability to create and render personalized designs automatically without loading the editor. You may use it for variable data printing applications, generating template-based designs from data, or creating cross-selling images automatically.
Some examples of what you can do with this API:
- Use IDML and PSD templates
- Replace images, text, or QR/barcode values
- Change style or color
- Render both PDF and JPEG
For example, to render a business card based on a template and personal data, you can just make the following request.
POST <url-to-design-editor-app>/api/HiRes/GenerateHiRes
{
"productDefinitions": ["my-business-card-template"],
"itemsData": {
"Placeholder": {
"First Name": "Amanda",
"Last name": "Spencer",
"Position": "Realtor",
"Mobile": "812.354.3535",
"Email": "amandaspencer@yourwebsite.com"
},
"Agent Photo": {
"Image": "public:real-estate/agent/amanda-spencer.png"
}
}
}
UI Framework
This is a framework that allows for describing various editors in a single JSON file. UI Framework allows you to integrate very different editing workflows in a unified way. It can be used by developers as well as product managers, designers, and content managers to create user interfaces where end-users may change product options and reflect those changes in an online preview and in the print-ready file.
What you can do with this API:
- Create multistep workflows
- Add and configure widgets (editor, preflight, 3d model viewer, and various UI elements)
- Integrate editors with e-commerce platforms
- Write JSON + JavaScript one-liners
- Develop the test apps to see results immediately
The idea of this API is the following. You load the JS application and create a JSON config like this:
{
"widgets": [
{...},
{...}
],
"steps": [{
"mainPanel": {...},
"toolPanel": {...}
},
{
"mainPanel": {...},
"toolPanel": {...}
}]
}
First, you must define all the widgets used in your project — editors, dropdowns, image lists, etc. After that, you can specify which widgets will appear in which containers.
Design Atoms JS libraries
In addition, you can also build your own editors using the Design Atoms JavaScript library. Although creating a custom editor may be challenging, you may still find this front-end SDK useful for certain tasks.
Design Atoms JS consists of several important parts, which you can install from npm:
- Design Atoms Model - a data structure describing a design. It gives you access to its surfaces (pages), containers (layers), and elements.
- Design Atoms - a library implementing the most popular operations on designs.
- Viewer control - a visual control that displays a design model on a screen and allows for manipulations.
- Design Atoms Text - a library encapsulating operations for working with text in the viewer.
Design Atoms JS allows you to work with each individual element of a design loaded into the editor: iterate, query a specific element by its name, read and modify its properties, or add or remove elements. In other words, it's similar to the DOM API in JS.
What you can do with this API:
- Generate designs
- Manipulate elements through code
- Serialize and deserialize a design to exchange it with a server
For example, you can create a new product and add design elements as follows:
const product = new Product([new Surface(800, 800)]);
const nameItem = new PlainTextItem("Christopher Bennett", new PointF(100, 400), "Roboto-Bold", 25);
nameItem.name = "employee";
const mainContainer = new SurfaceContainer(nameItem);
mainContainer.name = "main";
const surface = product.surfaces.get(0);
surface.containers.setRange([mainContainer]);
Design Atoms .NET
If you are developing your backend application for .NET, you can also use Design Atoms to create your own service layer to work with designs.
Design Atoms .NET consists of two important parts, which you can install as NuGet packages:
- Design Atoms Model - the object model describing designs.
- Design Atoms - all necessary controllers for drawing objects, obtaining the necessary data, and rendering the object model.
What you can do with this API:
- Create a design from scratch or generate it with certain rules
- Manipulate elements through code
- Import designs from various source formats
- Render print files or proof images on your server
- Create completely custom editors