electron/fiddle

:electron: 🚀 The easiest way to get started with Electron

Electron Fiddle

Electron Fiddle lets you create and play with small Electron experiments. It greets you with a quick-start template after opening – change a few things, choose the version of Electron you want to run it with, and play around. Then, save your Fiddle either as a GitHub Gist or to a local folder. Once published on GitHub, anyone can quickly try your Fiddle out by just entering it in the address bar.

Download Fiddle now!

Features

Explore Electron

Try Electron without installing any dependencies: Fiddle includes everything you'll need to explore the platform. It also includes examples for every API available in Electron, so if you want to quickly see what a BrowserView is or how the desktopCapturer works, Fiddle has got you covered.

Code with Types

Fiddle includes Microsoft's excellent Monaco Editor, the same editor powering Visual Studio Code. It also installs the type definitions for the currently selected version of Electron automatically, ensuring that you always have all Electron APIs only a few keystrokes away.

Compile and Package

Fiddle can automatically turn your experiment into binaries you can share with your friends, coworkers, or grandparents. It does so thanks to electron-forge, allowing you to package your fiddle as an app for Windows, macOS, or Linux.

Start with Fiddle, Continue Wherever

Fiddle is not an IDE – it is however an excellent starting point. Once your fiddle has grown up, export it as a project with or without electron-forge. Then, use your favorite editor and take on the world!

Contributing

Electron Fiddle is a community-driven project that welcomes all sorts of contributions. Please check out our Contributing Guide for more details.

License

MIT, please see the LICENSE file for full details.

When using the Electron or other GitHub logos, be sure to follow the GitHub logo guidelines.

fiddle's Issues

App not quitting after choosing to discard changes

Platform: MacOS

If you make unsaved modifications to one or more unsaved open fiddles, then attempt to close the app via the menu or ⌘+Q, the app will never quit automatically.

Fancy launch page

We have a protocol handler, it would be good to make a https://fiddle.electronjs.org/launch/{gist_id} endpoint that will use any of the fancy techniques we know to detect if fiddle is running and launch it, if it isn't running we can give them a fancy download page with an explanation / overview of what fiddle is.

I can build that page itself and the logic but would need some help making it look nice on the website side of things 👍

Toolbar covers editor widget

• Launch Fiddle
• Run Go To Definition on BrowserWindow in the first line
• A warning message pops up but it's covered by the toolbar
• You can see the same issue for Hover and other similar editor widgets as well

failing while make installers for fiddle

Hi
for my system the Make installer step is failing. Please find the debug log attached.
npm-debug.log

let me know if any further information is required.

• Soumalya

Fiddle fails to start on Mac OS

Hey guys, I just downloaded the Electron package from https://github.com/electron/fiddle/releases/tag/0.1 and I found out that Fiddle could not start on Mac OS. Does anyone have this problem? 😄

New icon

@felixrieseberg ... an icon that'll allow people to distinguish the default Electron app from Electron Fiddle

Notifications API don't work on Windows 10

I noticed that we need to add the electron.exe to the start menu. And add app.setAppUserModelId(process.execPath) to the Main Process. Creating a PR to the Readme to save other people's sanity & time.

Show Welcome Tour stuck app.

Version

• Fiddle: 0.4.0
• Operating system: Microsoft Windows [Version 10.0.18298.1000]

Steps to Reproduce

0. (I do not advise. Reproduced in screencast) Modify fiddle.
1. Open Show Welcome Tour dialog
2. Click Show me around
3. Click Continue

Expected Behavior

All works fine and welcome tour continued.

Actual Behavior

App stucks.

Screencast of reproducing

/cc @felixrieseberg

Can't run any fiddle as the download process does not complete

I've just downloaded Electron Fiddle, v. 0.1.0 for Mac (10.13.6).

After running the intro tour, I wanted to give it a quick try, so I hit the Run button. Unfortunately the in-app terminal gave this message: Could not start fiddle: Electron 2.0.7 not downloaded yet. Please wait for it to finish downloading before running the fiddle.

As my network monitor was not showing any download activity, I've tried to switch version.

When selecting any other version, the button Run switches to Downloading, but it looks like it is not actually downloading anything. My network monitor still says that the download speed is around 0-1 kb/s. If i press the button while is says Downloading, I still get the message Could not start fiddle: Electron 2.0.7 not downloaded yet. Please wait for it to finish downloading before running the fiddle..

I am on a fiber connection, usually the download speed is around 2 MB/s.

Additionally, before displaying the "still downloading message", in the console I also get the following messages:

Saving files to temp directory...
Saved files to /var/folders/3w/0pctr_7n4xl4g49yrfn147tr0000gn/T/tmp-86349BIhXmm8JA6i1

The path changes each time I press the Run/Downloading button, but if I try to locate it (cmg + g), Finder tells me that the folder does not exist.

Option to only list downloaded versions of Electron in the dropdown

The list of Electron versions to the left of the run button shows way too many items. Make it possible to only display the downloaded versions, which would keep the list small. New versions can always be downloaded in the settings.

Support a light theme

See https://news.ycombinator.com/item?id=17738709

Inconsistent tab spacing

In the main and HTML editor panes, 1 tab is converted into 2 spaces. In the renderer editor pane, 1 tab is converted into 4 spaces.

Old files showing

Whenever I open a new "Show me" Fiddle, the old contents for renderer.js and index.html are still showing.

It would be way better and 100 times less confusing if the content of those windows go away whenever the new fiddle opened don't make use of them.

Thanks a lot.

Add an about dialog

As far as I can tell, there's no way to figure out what version of Electron Fiddle a user is running without asking them to dig into the source code of the bundled app, or if they're on Linux, using their package manager. Including this will make it easier to troubleshoot GitHub issues.

Clicking 'Load Fiddle' button doesn't work, but pressing Enter does

v0.4.2

To repro:

1. Paste a gist link in the "Load Fiddle" box, e.g. this one https://gist.github.com/nornagon/580525977e9daf7c4ee0db6971fe3727, without pressing Enter
2. Click "Load Fiddle"

What happens:
This appears in the console and the fiddle does not load:

app.15fac660.js:3689 Loading Fiddle failed HttpError: {"message":"Not Found","documentation_url":"https://developer.github.com/v3"}
    at response.text.then.message (/Applications/Electron Fiddle.app/Contents/Resources/app.asar/node_modules/@octokit/rest/lib/request/request.js:72:19)
    at process._tickCallback (internal/process/next_tick.js:68:7)

What I expect to happen:
The fiddle should load :)

Use Node 10.x?

Is it possible to use a newer version of node than the bundled version?

Post-redesign: Update screenshots

We have a bunch of screenshots that'll be out of date as soon as we release the redesign.

Fiddle can't find NodeJS and npm

I run to this when I try to create a package/installer

Tasks > Package Fiddle...

📦 Packaging current Fiddle...
7:32:31 PMError: Could not find npm. Fiddle requires Node.js and npm to compile packages. Please visit https://nodejs.org to install Node.js and npm.

Tasks > Make Installers for Fiddle...

7:32:37 PM📦 Creating installers for current Fiddle...
7:32:37 PMError: Could not find npm. Fiddle requires Node.js and npm to compile packages. Please visit https://nodejs.org to install Node.js and npm.

running Ubuntu 18.04.1 , NodeJS v10.8.0 via nvm 0.33.11, npm 6.3.0

Unable to copy the entire GitHub Gist URL

I seem to only be able to select until here:

This is with macOS

Soft wrap for Fiddle

Do you guys think it is a good idea to add Soft wrap feature for Fiddle text editor? I feel like it's kind of hard to see what I typed in the text editor without it 😄

JSX / Babel

Is there a way to set a babel config or something, I want to be able to use JSX inside the render.js

Feature idea: "load" a fiddle from a gist

I really enjoyed publishing a fiddle to a gist. But I'd like to make it so that anyone can easily run my gist without manually copying and pasting my code from my gist into their Electron fiddle. And maybe include a security warning when loading a gist?

Love this project 😍

Use Typescript?

Is there any future plan to use Typescript in Fiddle?

Support electron < 1.8.x

It looks like the code in main does not execute when you pick Electron < 1.8.x, due to the missing loadFile method:

Add ability to edit file/headers

It would be cool to be able to the edit the filename (and consequently the window title) for the three windows view.

For example, if you want to experiment with preload files - it would be nice to rename renderer.js into preload.js and adjust the window title bar too. This will also give more flexibility to the tool.

It would be even better to be able to remove windows and add new windows (with custom filename/title).

Infrastructure: Replace electron-download, improve download experience

We're currently using electron-download. This has benefits: We're now that we're always downloading the "right" Electron binary and can simply pull in its latest version to get the same behavior as npm i electron.

But it also has downsides:

• electron-download constantly prints to stdout, creating quite a bit of unnecessary work when used as a library
• It comes with dependencies that need resources but end up not benefiting the user experience
• We currently can't get the progress of the download

We should either improve electron-download to the point where it can be properly used as a library or replace it entirely. Improving is probably the better path but it might require splitting electron-download into multiple packages.

cc @MarshallOfSound

Editor often broken when moving around

I noticed that when you drag and drop an editor around in the UI it often ends up in a state like this:

When I look at whats happening, I believe _updateEditorLayout is called at a time that is too early for the editor to do its right thing. I think the lodash throttle function is not delaying this call properly, at least when I add some console log statements, the editor layout is being called often without a delay.

redo doesn't work

OS: macOS 10.14.4

To reproduce:

1. make some changes
2. undo them with Cmd+Z
3. attempt to redo them with Cmd+Shift+Z or the 'edit -> redo' menu item

Expected behaviour:
the change is redone

Actual behaviour:
nothing happens when pressing the shortcut

No support for Nightly

In Electron settings there is checkbox for Nightly.
After clicking "UPDATE ELECTRON RELEASE LIST", there are only stable
(and beta, if i check beta checkbox) releases.

Save (Ctrl+S) opens the main folder where the project resides

When I hit Ctrl+S to save Nautilius opens the parent folder of where the project is created.
Is this a bug or a feature?

running Ubuntu 18.04.1

Temp files are re-saving even if fiddle didn't change

If I just re-run fiddle, it saves new temp files. It's performance issue and bad for SSD drives.

Support upcoming Electron 5.0 with nodeIntegration disabled by default

Electron 5.0 is going to have nodeIntegration disabled by default (electron/electron#16235).

need to replace

mainWindow = new BrowserWindow({width: 800, height: 600})

with

mainWindow = new BrowserWindow({
  width: 800,
  height: 600,
  webPreferences: {
    nodeIntegration: true
  }
})

Make Gist Private by Default (or at least have an option in the preferences)

The current version makes public Gist by default. Github removed the possibility to turn public -> private gists, thus it's kind of annoying. Also, I am sure not many people realize that.

Ciao!
Luca

Switching versions with an unsaved fiddle shows a confusing dialog

To reproduce:

1. Write some code in one of the code windows.
2. Switch Electron versions using the dropdown.

What happens:

What I expect to happen:

Switch versions without changing any of my code.

hot reload support?

App changes according to my code changes.Does it support hot reload?

Version chooser uses latest included version rather than latest online version as default

To repro:

1. install on fresh machine
2. look at top-left corner for current electron version
3. observe "Electron v4.0.0-beta.10"

Fiddle should probably default to whatever electron@latest is on npm :)

Latest version won't start on Ubuntu 16.04

electron-fiddle immediately closes with the following error:

$ electron-fiddle 
Creating main window
(node:18671) UnhandledPromiseRejectionWarning: Error: Cannot find module '../clipboard'
    at Module._resolveFilename (internal/modules/cjs/loader.js:602:15)
    at Function.Module._resolveFilename (/usr/lib/electron-fiddle/resources/electron.asar/common/reset-search-paths.js:35:12)
    at Function.Module._load (internal/modules/cjs/loader.js:528:25)
    at Module.require (internal/modules/cjs/loader.js:658:17)
    at require (internal/modules/cjs/helpers.js:20:18)
    at Object.get [as clipboard] (/usr/lib/electron-fiddle/resources/electron.asar/common/api/exports/electron.js:9:18)
    at Object.__importStar (/usr/lib/electron-fiddle/resources/app.asar/node_modules/tslib/tslib.js:215:100)
    at Object.parcelRequire.src/constants.ts (/usr/lib/electron-fiddle/resources/app.asar/dist/src/main/main.js:692:32)
    at newRequire (/usr/lib/electron-fiddle/resources/app.asar/dist/src/main/main.js:49:24)
    at localRequire (/usr/lib/electron-fiddle/resources/app.asar/dist/src/main/main.js:55:14)
(node:18671) UnhandledPromiseRejectionWarning: Unhandled promise rejection. This error originated either by throwing inside of an async function without a catch block, or by rejecting a promise which was not handled with .catch(). (rejection id: 2)
(node:18671) [DEP0018] DeprecationWarning: Unhandled promise rejections are deprecated. In the future, promise rejections that are not handled will terminate the Node.js process with a non-zero exit code.

So it seems the clipboard import isn't properly included?

Question: Isn't this wildly dangerous?

I love what you're doing here, but I'm concerned that newcomers may not realize that an electron application operates at a much higher level of trust than a web browser window, e.g. it can access files, network resources, etc. and that there are some bad people in the world who might try to trick them into loading malicious programs.

I see that you are at least preventing navigation, but are users informed about NodeJS integration, etc.? (Admittedly, I haven't played with electron fiddle yet, other than reading some docs and grepping some code, so I apologize in advance for my ignorance.) If there are potential security risks by default perhaps users should see a warning banner or something and have to opt-in to activate that functionality.

Related to #62

Can't find documentation on controlling the filename for builds?

How do I avoid builds like observant-vein-command-1.0.0 Setup.exe?

Googling didn't get me anywhere?

Editor for preload script

Testing contextIsolation is currently not possible without a preload script, as the main world does not have access to require even if nodeIntegration is enabled.

Baffled by require('') behaviour

A number of issues here.
If I put this in Main Process, only the first module is loaded, etherport is not.

var five = require('johnny-five')
var EtherPort = require('etherport')
const {app, BrowserWindow} = require('electron')

If I do this:

const {app, BrowserWindow} = require('electron')
var five = require('johnny-five')
var EtherPort = require('etherport')

then etherport is loaded, but johnny-five returns "Cannot find module".

If I put one module in the renderer process and one in the main process, I can get them both to load - even if they are commented out!

Post-redesign: Update screenshots

We have a bunch of screenshots that'll be out of date as soon as we release the redesign.

Support running nightly & custom builds

Haven't fully thought out how this would look in Fiddle, but I thought I'd suggest it to plant the idea anyway:

My use case is bisecting through commits to find where a regression was introduced. When doing this, choosing a specific nightly build -- or a specific local build, in the cases where the bug was introduced before we started making nightlies -- would be crazy useful.

Questions:

• Is this feature useful for non-maintainers?
• Does the version dropdown selector still make sense if there are 100 versions to chose from?
• How would local builds (ie non-npm, for testing things that came before the first nightly) be specified?

"Show Me" not working on Windows

I just downloaded the executable from here. Running it pops up the blank Electron Fiddle window. When I select any of the options from the "Show Me" menu, though, (e.g. Show Me > Electron APIs > App), nothing happens. I assumed this would pull up some simple demo project that showcases the named feature? Are there any other setup steps that I need to take besides just running the executable?

Actually, it might be more than just "Show Me" - I tried File > New Fiddle, and I'm still left with the same blank window (just the title bar with, e.g., the button to close the window and the tool bar with File, etc.).

This is on Windows 10. I'm happy to provide any additional information that might be helpful / test things.

Gist URL box complains about perfectly valid URL

I triggered this state by first pasting something invalid into the box (anything that isn't a gist URL will do). After that, the input box ceases to function.

Error when npm is not installed in PATH

Seeing this error:

📦 Packaging current Fiddle...

Error: Could not find npm. Fiddle requires Node.js and npm to compile packages. Please visit https://nodejs.org to install Node.js and npm.

On Windows 10 x64. Using Fiddle app 0.6.0 with Electron v5.0.0
NodeJS installed to C:\Program Files\nodejs but not on path.

In Fiddle console I see this error below.

Any ideas?

Thanks

app.15fac660.js:2044 Fetch Types: Updating Monaco types with [email protected]
app.15fac660.js:252 getIsNpmInstalled: "where.exe npm" failed. Error: Command failed: where.exe npm
INFO: Could not find files for the given pattern(s).



    at ChildProcess.exithandler (child_process.js:299)
    at ChildProcess.emit (events.js:182)
    at maybeClose (internal/child_process.js:962)
    at Process.ChildProcess._handle.onexit (internal/child_process.js:251)
getIsNpmInstalled @ app.15fac660.js:252

Definition/Typings editor

I'd love to see typings in a separate editor otherwise we have to trigger auto complete to browse through all types/methods/etc.

• the typings editor can show up only when users run "Go To Definition" or we can probably have a shortcut in Menus
• the typings editor can be readonly
• the typings is from the electron users choose

Translate Fiddle into other (spoken) languages

Can you provide packages in other languages?Can you provide packages in other languages or embedded translation software, intranet translation?

English 日本語 (Japanese) Español (Spanish) 中文 (Chinese Simplified) Türkçe (Turkish) Indonesian Filipino Français (French) Русский (Russian) 한국어 (Korean) Italiano (Italian) Português (Portuguese) Deutsch (German) Українська (Ukrainian) 中文 (Chinese Traditional) język polski (Polish) български език (Bulgarian) हिन्दी (Hindi) Nederlands (Dutch) Tiếng Việt (Vietnamese) اللغة العربية (Arabic) فارسی (Persian) עברית (Hebrew) čeština (Czech) ไทย (Thai) limba română (Romanian) Wikang Tagalog (Tagalog)

First use: Incorrect version selected

The logic in getDefaultVersion() isn't working correctly and returns an incorrect version. To make matters worse, that seems to lead to the run button not rendering at all 😬

Published URL entered in URL bar without prefix

When we publish a fiddle, we currently enter it without the https://gist.github.com (at least on master). Let's fix that!