Electron Fiddle: A ‘code playground’ for experimenting with cross-platform native apps

Another “code playground” Electron Fiddle comes into the market for enabling developers create, share, and play with small Electron experiments. Electron Fiddle attempts to bring this “fiddling effect” to Electron, a framework for creating cross-platform native applications with web technologies like JavaScript, HTML, and CSS.

It provides you with a quick-start template - just change few things, choose the Electron version you want to run it with, and play around. It also gives you an option of saving it as GitHub Gist or to a local folder and anyone can try your Fiddle by just entering it in the address bar.

How Electron Fiddle works?

1. Each Fiddle has three files:

A Main script

A renderer script

An HTML file

electron-fiddle-a-code-playground-for-experimenting-with-cross-platform-native-apps-img-0

Source: GitHub

2. Choose an Electron Version:

Electron Fiddle knows about all released Electron versions. Open the Preferences window to see all available versions, download them and delete the ones which you don’t need.

electron-fiddle-a-code-playground-for-experimenting-with-cross-platform-native-apps-img-1

Source: GitHub

3. Run your Fiddle:

Hit the RUN button to give your Fiddle a try and start it.

electron-fiddle-a-code-playground-for-experimenting-with-cross-platform-native-apps-img-2

Source: GitHub

4. Share your Fiddle:

Save your Fiddle as a public GitHub Gist - this will allow other users to load it by pasting the URL into the address bar. If they don't have Electron Fiddle, they can see and download your code directly from GitHub.

electron-fiddle-a-code-playground-for-experimenting-with-cross-platform-native-apps-img-3

Source: GitHub

You can also package your Fiddle as a standalone binary or as an installer from the Tasks menu:

electron-fiddle-a-code-playground-for-experimenting-with-cross-platform-native-apps-img-4

Source: GitHub

What are the features it comes with?

A good coding experience

It uses Monaco Editor by Microsoft, which also powers VS Code, giving users the common benefits of a modern code editor:

Code highlighting

Basic JavaScript error checking

Refactoring

Auto-completion

Share your work with the community

If you are eager to share your work or a bug with the Electron community, you can do that just with a click of a button. To make your Fiddle accessible to those who do not have Electron Fiddle installed, you can share it as a GitHub Gist.

Compile and package your Fiddle as an app

With the help of Electron Forge, a command line interface for Electron applications, you can turn your Fiddles into binaries and share it as a app for Windows, macOS, or Linux.