Once you have obtained the zip file from the CodeCanyon site, all you have to do is load the various files necessary for the plugin to work.

<!-- The main CSS file -->
<link rel="stylesheet" href="url/to/your/file/asukadesigner.min.css">

<!-- The main JS file -->
<script src="url/to/your/file/asukadesigner.min.js"></script>

<!-- The jspdf file - mandatory if you need PDF export -->
<script src="url/to/your/file/vendors~jspdf.addon.js"></script>

Create Asuka Designer HTML Layout

Now, we need to add Asuka Designer layout to our app :

<div id="myId">

Designer size

You can optionally set the size of the designer using a CSS rule. Otherwise the size of the designer will automatically adapt according to its content.

#myId {
    width: your width;
    height: your height;

Initialize Asuka Designer

We just have to initialize the designer :

var options = {
    mode: 'frontend',
    navigation: 'thumbnail'

var instance = new AsukaDesigner('#myId', options); // Create an instance of the main plugin class

instance.designer().addView('myView', {height: 500, width: 500}); // Access the subclasses from the main class

instance.on('loaded', function(){
    console.log('The plugin is loaded');

Was this article helpful to you? Yes No

How can we help?