In Electron Fiddle, you can include asset files (such as images, stylesheets, or other resources) in your Electron app by following these steps:

  1. Create a New Project: Launch Electron Fiddle and create a new Electron project by clicking on "Create new Fiddle" or "New Fiddle" in the menu.

  2. Add Asset Files: To include asset files, you can place them in the app folder of your Electron Fiddle project. The app folder is where your application's source files are located. You can create subdirectories inside the app folder to organize your assets better. For example:

my-electron-fiddle/ |-- app/ | |-- index.html | |-- assets/ | |-- logo.png | |-- styles.css | |-- main.js | |-- preload.js

In the above example, we have created an assets folder inside the app folder and placed the logo.png and styles.css files as asset files.

  1. Use Asset Files in HTML or JavaScript: In your HTML or JavaScript code, you can reference the asset files using relative paths. For example, in index.html, you can use the following code to display the image and apply the CSS styles:
<!DOCTYPE html> <html> <head> <title>My Electron Fiddle</title> <link rel="stylesheet" href="assets/styles.css"> </head> <body> <img src="assets/logo.png" alt="Logo"> <h1>Hello Electron Fiddle!</h1> </body> </html>
  1. Run the Electron App: Save your changes and click on the "Run" button or press Cmd + R (Mac) or Ctrl + R (Windows/Linux) to run your Electron app with the included asset files. The Electron app will load and display the index.html file with the referenced assets.

Note: Electron Fiddle provides a live-reloading feature, so you don't need to restart the app every time you make changes to your code or assets. Simply save your changes, and Electron Fiddle will automatically update and refresh the app.

By following these steps, you can easily include asset files in your Electron Fiddle project and use them in your Electron app. This allows you to enhance the app's user interface and functionality with images, styles, and other resources.

Have questions or queries?
Get in Touch