Introducing the Lightning Playground

Have you ever found yourself wanting to build a quick example of how to do something in Lightning so you can share it with others? Or maybe you’ve found a bug and could use a quick way to write up a simple repro to share with the Lightning team. Or you might be learning Lightning for the first time and just want a place to play around with it. Good news! You can just pop open the official Lightning Playground in your favorite web browser and get right to it.

The Lightning Playground is a web-based live IDE environment developed by the talented Jeffrey Boevé for creating/sharing examples, bug reproductions or just experimenting with the capabilities of Lightning in a streamlined intuitive way. Think of it like JSFiddle or the TypeScript Playground but tailor-made for Lightning.

To use it, simply navigate to lightningjs.io/playground where you’ll be greeted by a simple Hello World Lightning app:

From this point, you’re free to start playing. Any changes you make are instantly reflected in the preview panel on the right. It includes a mini-bundler supporting multiple code files that allows you to easily build isolated components that you can then import into your main app file. You can even set specific Lightning Core and SDK versions as well as install other NPM packages from the “Packages” menu. This puts reproducing a bug in a specific version of Lightning right at your fingertips.

When you’re ready to share your creation simply click the “Share” button, which will allow you to copy a URL permalink to your Playground project. All the data from your project is compressed and encoded directly into the URL so nothing you create in the Playground is uploaded to our servers. That also happily means there’s no need to sign up for any new accounts!

Please give the new Lightning Playground a whirl and let us know what you think! We encourage all Lightning application developers to make good use of it, especially when asking/answering questions in the forums or when making bug reports to our GitHub repositories.

Happy playing!
The Lightning Team

1 Like

@Jeffrey - Can you add some sample images for folks to create playgrounds with different shaders?

Hi all,
While working with Lightning Playground, I accidentally typed the wrong letters, but it’s still working without throwing any errors. I have even changed the values, but it’s still functioning properly. Is that okay?

@AB_248 The Lightning Playground does not type check your code. The invalid keys you’ve provided are simply ignored by Lightning.

1 Like