We use cookies to give you the best experience on our website. If you continue to browse, then you agree to our privacy policy and cookie policy. Image for the cookie policy date
Unfortunately, activation email could not send to your email. Please try again.
Essential JS2

Syncfusion jQuery based widgets are no longer in active development. Switch to our pure JavaScript based next generation Essential JS 2 library.

Syncfusion Feedback

How to create Electron based desktop apps using Essential JS for Windows, Mac OS and Linux?.

Platform: jQuery |
Control: General

How to create Electron based desktop apps using Essential JS for Windows, Mac OS and Linux?





Electron (Formerly known as Atom Shell) is used to create cross platform (Linux, Windows and OS X) desktop applications with pure JavaScript by providing a runtime with rich native (operating system) APIs. You could see it as a variant of the Node.js runtime that is focused on desktop applications instead of web servers.

This doesn't mean Electron is a JavaScript binding to graphical user interface (GUI) libraries. Instead, Electron uses web pages as its GUI, so you could also see it as a minimal Chromium browser, controlled by JavaScript.

 Electron uses Chromium and Node.js (Building block of Electron) so we can build the app with HTML, CSS, and JavaScript.

Prerequisites and Compatibility



Running this requires Node.js (which includes npm) on your system.



Only 64bit binaries are provided for OS X, and the minimum OS X version supported is OS X 10.9.


Windows 7 and later are supported, older operating systems are not supported (and do not work).

Both x86 and amd64 (x64) binaries are provided for Windows. Please note, the ARM version of Windows is not supported for now.


The prebuilt ia32(i686) and x64(amd64) binaries of Electron are built on Ubuntu 12.04, the arm binary is built against ARM v7 with hard-float ABI and NEON for Debian Wheezy.

Whether the prebuilt binary can run on a distribution depends on whether the distribution includes the libraries that Electron is linked to on the building platform, so only Ubuntu 12.04 is guaranteed to work, but following platforms are also verified to be able to run the prebuilt binaries of Electron:

  • Ubuntu 12.04 and later
  • Fedora 21
  • Debian 8

Using Syncfusion Essential JS controls with Electron Framework:

Syncfusion framework integrate with Electron framework and use the both framework in a single application.

Steps to add the sample and run the Application


Follow the below steps and enter the below commands using command prompt window.



To clone and run this repository you'll need Git and Node.js (which comes with npm) installed on your computer, then enter the below command line using terminal (Mac OS) or Command Prompt (Windows).


i)# Clone the Quick Start repository






ii)# Go into the repository



$ cd electron-quick-start



Electron quick start


iii)# Install the dependencies


$ npm install



npm install




Learn more about Electron and its API in the documentation.




Add the Syncfusion JS and CSS file reference as mentioned in the link in index.html file located in the below image.

project file



When refer jQuery reference add the below code in head tag.



        window.nodeRequire = require;

        delete window.exports;

        delete window.module;





Add the below sample code in in index.html file and render Button control.


Add <Button> element to create a Button control.

<div class="case1">




                    <input type="checkbox" id="play" />



                    <button id="start">Start</button>



                    <button id="stop">stop</button>



                    <button id="open">Open</button>



                    <button id="save">Save</button>

                    <ul id="menu1">










Initialize Button in the script with properties.


        $(function () {


                showRoundedCorner: true,

                defaultText: "Play",

                activeText: "Pause",

                size: "large",

                click: "playpause",

                contentType: "textandimage",

                defaultPrefixIcon: "e-icon e-mediaplay e-uiLight",

                activePrefixIcon: "e-icon e-mediapause e-uiLight",





                size: "large",

                showRoundedCorner: true,

                click: "start",





                showRoundedCorner: true,

                size: "large",

                click: "stop",




                showRoundedCorner: true,

                size: "large",




                size: "large",

                showRoundedCorner: true,

                targetID: "menu1",

                create: "spltbtnLoad",






Add the following styles.


        #play, #pause, #stop, #open, #bold, #italic, #underline {

            border-radius: 100px; /* for rounded corners*/



        ul li span {

            color: white;



        .case1 {

            margin: 100px;



        .officeribben {

            margin: 100px;



        .sample {

            margin: 100px;



        .audiodiv {

            margin: 100px;






Run the  Electron Application using the below command line.


$ npm start




project start


Now see the created Electron Application as below.


Application output

You must log in to leave a comment
Bruce Van Horn
Jan 21, 2017
For quite some time now I've been saying to myself, "Man, if I had time to figure out how to use Syncfusion with Electron, I could make some really cool apps!"  It's that whole "having time" part.  I'm looking forward to working through this example!  Thank you so much! Reply
Bruce Van Horn
Jan 21, 2017
The part that still isn't clear is probably the most crucial part - step 2.  If I just paste the sample code in, it doesn't work because I don't have the references set up, and this tutorial didn't show how to do that.  The easy fix is to just put a zip file up with the final running example in it, or show the entire final index.html file. Reply
Vignesh Kumar D R [Syncfusion]
Jan 23, 2017

Hi Bruce Van Horn,

We have attached the zip file for the Electron Application as we have described in this KB.

Electron App:



Please refer the below link for control initialization and adding references.




To Run the Electron Application using the below command (navigate to electron folder) as we have previously mentioned in this KB.


npm start


Vignesh Kumar DR


Bruce Van Horn
Apr 06, 2017
OK, I'm back 3 months later :-)  Thank you so much for this.  Stand back!  I'm about to build stuff!

Please sign in to access our KB

This page will automatically be redirected to the sign-in page in 10 seconds.

Up arrow icon

Warning Icon You are using an outdated version of Internet Explorer that may not display all features of this and other websites. Upgrade to Internet Explorer 8 or newer for a better experience.Close Icon

Live Chat Icon For mobile