Overview

19 Apr 20172 minutes to read

Syncfusion JS Playground acts as editor for all JavaScript developers to get started with our controls. Using this, customers can save and share their own code with anyone.

Playground shown as below.

The options provided in this live editor are explained below.

New

Use the keyboard shortcut Ctrl + N or F4 or click the New icon to create the new editor. A dialog will be opened in which you can see an option (checkbox) to create the template with or without EJ Template. The EJ template will insert the basic HTML code to use Essential JavaScript controls.

Note: Chrome Ctrl + N will not work use F4

1. Web Template

2. Mobile Template

JS Playground with new option looks like as below.

Save

The code will be automatically saved into our database whenever we type in code section and also unique URL will be generated for the same code section. So if you want to share your code with someone you can provide the generated URL which can be accessible by everyone.

Download

We can download the content of the sample in HTML or PDF format. To download the content, you can clicking the download icon in the JS Playground while clicking the icon, it shows the dropdownlist whether you want to download the data into HTML or PDF.

Refer the below screenshot for downloading the content of the sample.

Output

Here you can see the final output of your custom code. The keyboard shortcut Ctrl + Enter is used to run your code instantly.

Platform View Change

You can check and test the output in mobile emulation in various mode like iOS, Android, Windows and Web browser

Please refer the below screenshot for selecting the platform.

Please refer the below screenshot for Android platform.

Library Switching

If you want to use specific EJ version library you can easily switch by selecting the option given in the dropdown.

Refer the below screenshot for selecting the library.

Third party controls

If you want to use external script references like jQuery, Bootstrap you can easily switch by selecting the option given in the dropdown. So that you can easily check how EJ controls are working across different external script versions.

Refer the below screenshot

Helper intellisense

User can get suggestion while typing the code by pressing Ctrl + Space keys. You can get the suggestion list for HTML, CSS and JavaScript.

Code Alignment

This feature helps to prettify your code automatically. The code will get auto align while pressing Shift + Tab.

If the codes are misaligned, after pressing the shift + tab codes are aligned properly.

Refer the below screenshot.

Tutorials

Here we are discussed about widget creation,configuring properties,invoking methods and events for mobile and web platforms.This option useful for Beginners to create Getting started samples.

Refer the below screenshot