---
title: "Class: EditorBuilder | Customer's Canvas On-Premises"
canonical: "https://customerscanvas.com/docs/on-premises/design-editor/iframe-api/reference/design-editor-iframe/classes/EditorBuilder.EditorBuilder/"
---

# Class: EditorBuilder

> Using this class you can load (Editor:class) instances to a specified iframe element and initialize them with a specified product and configuration.

## Constructors

### Constructor

> **new EditorBuilder**(`backendUrl`): `EditorBuilder`

Creates a new instance of the builder. Note, you may prefer to use a static method [EditorBuilder.for](#for) instead.

#### Parameters

##### backendUrl

`string`

a URL to your Design Editor instance (can be installed either on your server or hosted on Aurigma's servers). If you don't have it, contact Aurigma team at info@aurigma.com.

#### Returns

`EditorBuilder`

## Methods

### for()

> `static` **for**(`backendUrl`): `EditorBuilder`

The same as a constructor, but implemented as a static method.

#### Parameters

##### backendUrl

`string`

a URL to your Design Editor instance (can be installed either on your server or hosted on Aurigma's servers). If you don't have it, contact Aurigma team at info@aurigma.com.

#### Returns

`EditorBuilder`

#### Example

``` ts
const editor = EditorLoader.for('<your-URL>').build(...);
```

***

### preload()

> **preload**(): [`Promise`](https://customerscanvas.com/docs/on-premises/design-editor/iframe-api/reference/design-editor-iframe/interfaces/finally.Promise.md)\<`void`\>

Creates an invisible iframe and preloads all Design Editor scripts inside it to cache them in a browser.

#### Returns

[`Promise`](https://customerscanvas.com/docs/on-premises/design-editor/iframe-api/reference/design-editor-iframe/interfaces/finally.Promise.md)\<`void`\>

#### Remarks

Use this method in scenarios when instead of calling the [EditorBuilder.build](#build) method in the beginning of a page lifecycle, 
you do it later (e.g. when the user clicks a sort of a "Personalize" button). In this case, you should call the [EditorBuilder.preload](#preload) 
as early as possible. By the moment when you call [EditorBuilder.build](#build), all Design Editor scripts will be loaded to the browser cache and 
the editor will be opened very quickly. 

If you call the [EditorBuilder.build](#build) during the page initialization, there is no need to preload scripts.

Hint: Although this method is async, most likely you don't want to call it with `await`. You should just call it and let it work in 
the background.

***

### build()

> **build**(`target`, `productDefinition`, `config`): [`Promise`](https://customerscanvas.com/docs/on-premises/design-editor/iframe-api/reference/design-editor-iframe/interfaces/finally.Promise.md)\<[`Editor`](https://customerscanvas.com/docs/on-premises/design-editor/iframe-api/reference/design-editor-iframe/classes/Editor.Editor.md)\>

Builds an instance of (Editor:class) and loads it in a specified iframe element.

#### Parameters

##### target

`HTMLIFrameElement`

the IFrame element where you want to load the editor. If another instance of an editor is already loaded, it will be automatically disposed.

##### productDefinition

`string` \| `string`[] \| [`IProductDefinition`](https://customerscanvas.com/docs/on-premises/design-editor/iframe-api/reference/design-editor-iframe/interfaces/ObjectModel.IProductDefinition.md)

it can be either a [IProductDefinition](https://customerscanvas.com/docs/on-premises/design-editor/iframe-api/reference/design-editor-iframe/interfaces/ObjectModel.IProductDefinition.md) structure describing the template you want to load or a string (array of strings) containing the ID of state files. When multiple state files specified, they are merged to a single product.

##### config

[`IConfiguration`](https://customerscanvas.com/docs/on-premises/design-editor/iframe-api/reference/design-editor-iframe/interfaces/ConfigurationInterfaces.IConfiguration.md)

the editor configuration described with the [IConfiguration](https://customerscanvas.com/docs/on-premises/design-editor/iframe-api/reference/design-editor-iframe/interfaces/ConfigurationInterfaces.IConfiguration.md) structure.

#### Returns

[`Promise`](https://customerscanvas.com/docs/on-premises/design-editor/iframe-api/reference/design-editor-iframe/interfaces/finally.Promise.md)\<[`Editor`](https://customerscanvas.com/docs/on-premises/design-editor/iframe-api/reference/design-editor-iframe/classes/Editor.Editor.md)\>

The (Editor:class) class instance which allows manipulating the editor and its content.