![Hero image showing the configuration abilities of CE.SDK](https://img.ly/static/cesdk_release_header.png)

# CreativeEditor SDK

The CreativeEditor SDK (**CE.SDK**) for Web is a fully customizable, simple-to-use design editor.

Seamlessly integrate it into any Web app with just a few lines of code. The editor combines the best of layout, typography and photo editing. **CE.SDK** also facilitates both template creation and adaption workflows, also featuring constraints and text placeholders for database automations.

Visit our [website](https://img.ly) for more tutorials on how to integrate and customize the editor for your specific use-case.

## Usage

## 1. Install the CreativeEditor SDK
Install the SDK with `npm`
```bash
npm install --save @cesdk/cesdk-js
```

or with `yarn`
```bash
yarn add @cesdk/cesdk-js
```

## 2. Create an empty Container
We need to add an empty `<div>` with an id or class as container for the SDK.

```html
<div id="cesdk_container" style="width: 100vw; height: 100vh"></div>
```

In this example, we set the inline style to create a `<div>` element that fills the whole browser window.

## 3. Instantiate SDK
The last step involves the configuration and instantiation of the SDK.

```JS
import CreativeEditorSDK from '@cesdk/cesdk-js'

CreativeEditorSDK
  .create('#cesdk_container', {license: '<your-api-key>'})
  .then(async (cesdk) => {
    await cesdk.addDefaultAssetSources();
    await cesdk.addDemoAssetSources({ sceneMode: 'Design' });
    await cesdk.createDesignScene();

    /** do something with the instance of CreativeEditor SDK **/
  });
```
## Documentation
The full documentation of the CreativeEditor SDK can be found at
[https://img.ly/docs/cesdk/](https://img.ly/docs/cesdk/).

## License

 The CreativeEditor SDK is a commercial product. To use it you need to unlock the SDK with a license file. You can purchase a license at https://img.ly/pricing.
