Integrate CreativeEditor SDK with Vanilla JS
In this example, we will show you how to integrate CreativeEditor SDK with Vanilla JS.
Explore a full code sample of the integration on CodeSandbox or view the code on GitHub.
Prerequisites#
- (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 PricingSetup#
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.
2. Create an empty Container#
We need to add an empty <div>
with an id
or 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.
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.
Just execute npx serve
, which will bring up a local server at http://localhost:5000
.
Congratulations!#
You've got CE.SDK up and running. Get to know the SDK and dive into the next steps, when you're ready:
<!DOCTYPE html><html lang="en"><head><title>Integrate CreativeEditor SDK with Vanilla JS</title><meta charset="UTF-8" /><meta name="viewport" content="width=device-width, initial-scale=1.0" /><meta http-equiv="X-UA-Compatible" content="ie=edge" /><style>body {margin: 0;overflow: hidden;}html {overscroll-behavior-x: contain;}</style></head><body><div id="cesdk_container" style="width: 100%; height: 100vh"></div><script type="module">import 'https://cdn.img.ly/packages/imgly/cesdk-js/1.6.2/cesdk.umd.js';let config = {// Serve assets from IMG.LY cdn or locallybaseURL: 'https://cdn.img.ly/packages/imgly/cesdk-js/1.6.2/assets'};CreativeEditorSDK.init('#cesdk_container', config).then((instance) => {/** do something with the instance of CreativeEditor SDK **/});</script></body></html>