---
title: "Getting started | Customer's Canvas On-Premises"
canonical: "https://customerscanvas.com/docs/on-premises/design-atoms-js/getting-started/"
---

# Getting started

> Design Atoms may help you to import templates to Customer's Canvas and iterate all items in them to find, for example, text elements named `Date` and then change their values. You can also create a new design and pass it to Customer's Canvas.

:::important
This package won't work alone. The Design Atoms Framework consists of a front-end component and a back-end component. To use Design Atoms, you need to connect them together as described in this topic.
:::

## Installing the front-end library

To install the front-end part of Design Atoms, just run

```shell
npm install @aurigma/design-atoms --save
```

Then, you can import modules to your project and start using them.

```javascript
import { Product } from "@aurigma/design-atoms/Model/Product";

let product = new Product([new Surface(100, 100)]);
```

However, to use it for pracrical purposes, you need to connect a front end to a back end.

There are two main ways to get the back end:
- Create your own back end using the `Aurigma.DesignAtoms` NuGet package.
- Hook your front end to an existing Customer's Canvas instance.

## Creating a custom back end

This way is a good option if you don't need the editor but rather need to manipulate designs through the JavaScript/TypeScript or C# code and render the result in your application. Also, you may want to create a custom editor based on the `Viewer` control. Another purpose is to handle the output from Customer's Canvas in a separate application.

To do so, you need to create a .NET Web API project, add a reference to `Aurigma.DesignAtoms` NuGet package and expose the necessary endpoints.

For reference, you can download a [sample backend implementation](https://github.com/aurigma/DesignAtomsSamples) from GitHub. You can use this sample solution as a separate object or merge it with your existing ASP.NET application.

## Connecting to back end

You can use a running instance of either custom back end or Customer's Canvas. To connect to your back end, add the following code.

```javascript
import { Viewer } from "@aurigma/design-atoms/Viewer/Viewer";

const backendUrl = "http://<your-instance-url>";
const holderId = "#id-of-your-div";
const holder = document.querySelector(holderId) as HTMLDivElement;
const viewer = new Viewer({
    holderElement: holder,
    backendUrl: backendUrl,
    canvasBackground: { color: "white" }
});
```