Evaluate Lightning Web Components Playground

Salesforce has introduced an online editor to try out Lightning Web Components. Lightning Web Components playground is the new UI development approach that Salesforce has; this is an evolution from the current Aura framework. Salesforce is to allow both Lightning Web Components and Aura frameworks to exist side-by-side.

To not just experiment, but also evaluate design considerations lightning playground can be used. By using the instructions here, new Lightning Web Components playground can also be created on the interactive code Playground editor.

Dual Listbox is a control that that just shows a bunch of values on the left-side and allows user to choose the values and move them to right-side.

Lightning Web components playground

Can dual listbox handle thousands of values on the left-side? Playground lightning makes it quite easy to change the values of the values loaded.

Loading the values

Step 1: To load a static list of 1000’s of values to the left-side of the dual listbox, use Excel to create some dummy values.

what is lightning playground

Step 2: Load the values

The simple.js can be edited to add more label values that are taken from the Excel.

Lightning playground


Time taken to load the dual picklist: 5 seconds

Time taken to choose the first value on the left: 60 seconds

Time taken to choose the subsequent values on the left: 22 seconds

Time taken to move a chosen value from left to right: 20 seconds

Lightning web components playground


Obviously, the dual picklist is not capable of loading 1000s of values as the user response times are quite high for simple operations performed on it.


Normally as a developer, we would create some dummy Lightning playground control with lot of plumbing to conclude a simple experiment like this. With the new online playground, playing with the controls becomes much easier.

However, the playground can’t access Salesforce organizations, so it doesn’t support features that require data from Salesforce. However, the code written in the lightning playground can be easily recreated in your own Org to work on real data.

Kabilan Giridharan

Over 20 years experience in leading product engineering and quality software delivery for business-critical enterprise applications. Expertise in agile digital transformation and business process re-engineering.
Posted in Salesforce, Salesforce Lightning, UI. Tagged with , , , .

Leave a Reply

Your email address will not be published. Required fields are marked *