Integrate Creative Editor
In this example, we will show you how to integrate CreativeEditor SDK with Vanilla JS.
- (Optional): Get the latest stable version of Node.js & NPM
No trial license key required.#The trial of CreativeEditor SDK works without a license key. A commercial license key is required for use in a production environment. Get a license key at Pricing
Note that, for convenience we serve all SDK assets (e.g. images, stickers, fonts etc.) from our CDN by default. For use in a production environment we recommend serving assets from your own servers.
1. Add CE.SDK to your Project#
The SDK is served entirely via CDN, so we just need to import the CE.SDK module and link the stylesheet containing the default theme settings.
If you use a bundler like Webpack, Rollup, or Parcel to build your app and want to integrate
the CreativeEngine module using your regular workflows, add the
package as a dependency to your project.
2. Create an empty Container#
We need to add an empty
<div> with an
class as container for the SDK. 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. We need to provide the aforementioned container and optionally a license file to instantiate the SDK.
See Initialization for a more detailed description of this step.
4. Serving Webpage locally#
In order to use the Editor we need to serve the
index.html. This can be achieved via
npx which comes with npm.
npx serve, which will bring up a local server at
5. Access the Engine APIs#
For programmatic access to engine specific API the editor exposes the engine. See Engine for more information about the engine capabilities and APIs.
5. Disposing the Editor#
When you are done working with the editor, consider disposing it to cleanup any pending references.
You've got CE.SDK up and running. Get to know the SDK and dive into the next steps, when you're ready: