Search icon CANCEL
Arrow left icon
Explore Products
Best Sellers
New Releases
Books
Videos
Audiobooks
Learning Hub
Conferences
Free Learning
Arrow right icon

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

Save for later
  • 3 min read
  • 13 Aug 2018

article-image
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:

Unlock access to the largest independent learning library in Tech for FREE!
Get unlimited access to 7500+ expert-authored eBooks and video courses covering every tech area you can think of.
Renews at AU $24.99/month. Cancel anytime


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.

A good starting point, continue anywhere you like


If you have just started using Electron, Electron Fiddle provides you with a basic introduction of the Fiddle and usage examples for every single Electron APIs. You can export your project with or without electron-forge and then use your favorite editor for further development.

With an easy installation process you can start using and experimenting with Electron Fiddle now! You can download it from its GitHub repository.

To know more, refer to the announcement on Medium by Felix Rieseberg.

HTML5 and the rise of modern JavaScript browser APIs [Tutorial]

How to build a weather app using Kotlin for JavaScript

Firefox 60 arrives with exciting updates for web developers: Quantum CSS engine, new Web APIs and more