---
title: "Working with the object model | Customer's Canvas On-Premises"
canonical: "https://customerscanvas.com/docs/on-premises/design-atoms-js/howto/working-with-object-model/"
---

# Working with the object model

> In the overview, we have learned the basics of [Design Atoms Framework](https://customerscanvas.com/docs/on-premises/design-atoms-js.md) and how you can [create applications](https://customerscanvas.com/docs/on-premises/design-atoms-js/getting-started.md). In this topic, you will learn how to work with the object model on the back end.

You can work with the object model in your custom viewer as well as in the Customer's Canvas Design Editor through the [IFrame API](https://customerscanvas.com/docs/on-premises/design-editor/iframe-api.md).

## Creating a Product

To create a product design, you need to create an instance of the `Product` class and add a collection of `Surfaces` to this instance.

```typescript title="Creating a Product"
import { Product, Surface } from "@aurigma/design-atoms-model/Product";
const product = new Product([new Surface(800, 800)]);
```

## Adding Design Elements

This is how you can create the main surface container and add design elements to this container.

```typescript title="Adding Design Elements"
import { SurfaceContainer} from "@aurigma/design-atoms-model/Product";
import { ImageItem, PlaceholderItem, PlainTextItem } from "@aurigma/design-atoms-model/Product/Items";
import { PointF } from "@aurigma/design-atoms-model/Math";

// Create an image placeholder.
const placeholder = new PlaceholderItem();
placeholder.content = new ImageItem(null, new PointF(100, 100), 200, 200);
placeholder.name = "photo";

// Create a main container with the placeholder.
const mainContainer = new SurfaceContainer(placeholder);
mainContainer.name = "main";

// Add a text item to the main container.
const nameItem = new PlainTextItem("Cristopher Bennett", new PointF(100, 400), "Roboto-Bold", 25);
nameItem.name = "employee";
mainContainer.items.add(nameItem);

// Add the main container to the surface.
const surface = product.surfaces.get(0);
surface.containers.setRange([mainContainer]);
```

## Adding Mockups

In the following example, we add an overlaying mockup to a surface.

```typescript title="Adding Mockups"
import { MockupContainer } from "@aurigma/design-atoms-model/Product";
import { RectangleF } from "@aurigma/design-atoms-model/Math";

const mockupImg = new ImageItem();
mockupImg.sourceRectangle = new RectangleF(0, 0, surface.width, surface.height);
mockupImg.source = new ImageItem.ImageSource(null, "https://example.com/mugmockup.png");
surface.mockup.overContainers.add(new MockupContainer([mockupImg]));
```

## Changing Design Elements

You can find elements that fit a certain criterion and change their content. In the following example, the text element `employee` gets a new content.

```typescript title="Changing Design Elements"
const textItem = surface.containers.first().items.first(i => i.name === "employee") as BaseTextItem;
textItem.text = "John Wood";
```

## Deleting Design Elements

You can remove design elements by names, types, and predicates. In the following example, we remove the `employee` item and all image placeholders.

```typescript title="Deleting Design Elements"
product.removeItems(item => item.name === "employee" || item.type === "PlaceholderItem");
```

## Defining a Print Area

You can specify a print area and a bleed zone as follows:

```typescript title="Defining a Print Area"
import { PrintArea, SafetyLine, PdfBox, RgbColor } from "@aurigma/design-atoms-model/Product";
import { RgbColor } from "@aurigma/design-atoms-model/Colors";
import { RectangleF } from "@aurigma/design-atoms-model/Math";

// Define safety lines.
const safetyLine = new SafetyLine();
safetyLine.margin = 10;
safetyLine.pdfBox = PdfBox.Bleed;
safetyLine.color = new RgbColor("lime");

// Add the safety line to a print area.
const printArea = new PrintArea(new RectangleF(0, 0, surface.Width, surface.Height));
printArea.safetyLines.add(safetyLine);

surface.printAreas.add(printArea);

// Enable safety lines in the viewer.
viewer.safetyLinesHandler.visible=true;
```